Web Components Library

Homepage Discover Carousel

No notes defined.

<div class="bg-cyan py-12">

    <h2 class="font-mtl-heading text-4xl sm:text-5xl text-white uppercase text-center">
        Discover Mountaineer Lodge
    </h2>

    <div class="relative flex flex-col mt-12 mb-12" data-slideout-ignore>

        <ul id="discover-controls" class="z-50 controls text-white m-0 p-0 flex items-center justify-between focus:outline-none z-10" aria-label="Carousel Navigation" tabindex="0">

            <li class="prev absolute left-0 top-0 bottom-0 flex items-center  sm:py-1 hover:bg-black hover:bg-opacity-50 focus:outline-none cursor-pointer" data-controls="prev" aria-controls="customize" tabindex="-1">

                <svg class="fill-current mt-1 w-10 sm:w-16 h-10 sm:h-16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 30 8 16 20 2" />
                </svg>

            </li>

            <li class="next absolute right-0 top-0 bottom-0 flex items-center  sm:py-1 hover:bg-black hover:bg-opacity-50 focus:outline-none cursor-pointer" data-controls="next" aria-controls="customize" tabindex="-1">

                <svg class="fill-current mt-1 w-10 sm:w-16 h-10 sm:h-16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 30 12-14L12 2" />
                </svg>

            </li>

        </ul>
        <div id="discover-slider" class="relative flex flex-wrap">

            <div class="max-w-md">
                <a href="" class="group">
                    <div class="relative">
                        <div class="relative">
                            <img class="h-full w-full object-center object-cover" src="/dist/images/temp/Carmella_MRI_June-3-Large.f1637891328.jpg" alt="Random Image">

                        </div>
                        <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
                        <div class="absolute inset-0 flex justify-center items-center border border-white m-1">
                            <h3 class="text-xl sm:text-2xl text-white uppercase">
                                Special Offers
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="max-w-md">
                <a href="" class="group">
                    <div class="relative">
                        <div class="relative">
                            <img class="h-full w-full object-center object-cover" src="/dist/images/temp/Mountaineer_LakeLouise-20-Large.jpg" alt="Random Image">

                        </div>
                        <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
                        <div class="absolute inset-0 flex justify-center items-center border border-white m-1">
                            <h3 class="text-xl sm:text-2xl text-white uppercase">
                                Hotel Amenities
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="max-w-md">
                <a href="" class="group">
                    <div class="relative">
                        <div class="relative">
                            <img class="h-full w-full object-center object-cover" src="/dist/images/temp/Mountaineer_LakeLouise-10-Large.jpg" alt="Random Image">

                        </div>
                        <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
                        <div class="absolute inset-0 flex justify-center items-center border border-white m-1">
                            <h3 class="text-xl sm:text-2xl text-white uppercase">
                                Breakfast
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="max-w-md">
                <a href="" class="group">
                    <div class="relative">
                        <div class="relative">
                            <img class="h-full w-full object-center object-cover" src="/dist/images/temp/Lake-Louise-Ski-Resort.jpg" alt="Random Image">

                        </div>
                        <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
                        <div class="absolute inset-0 flex justify-center items-center border border-white m-1">
                            <h3 class="text-xl sm:text-2xl text-white uppercase">
                                Winter Activities
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="max-w-md">
                <a href="" class="group">
                    <div class="relative">
                        <div class="relative">
                            <img class="h-full w-full object-center object-cover" src="/dist/images/temp/For-the-Family.jpg" alt="Random Image">

                        </div>
                        <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
                        <div class="absolute inset-0 flex justify-center items-center border border-white m-1">
                            <h3 class="text-xl sm:text-2xl text-white uppercase">
                                Visit Lake Louise
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="max-w-md">
                <a href="" class="group">
                    <div class="relative">
                        <div class="relative">
                            <img class="h-full w-full object-center object-cover" src="/dist/images/temp/Carmella_MRI_June-10-XL.f1637891336.jpg" alt="Random Image">

                        </div>
                        <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
                        <div class="absolute inset-0 flex justify-center items-center border border-white m-1">
                            <h3 class="text-xl sm:text-2xl text-white uppercase">
                                Check Rates &amp; Dates
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
        </div>

    </div>

</div>

<script>
    const discoverSliderContainer = document.querySelector('#discover-slider');
    if (discoverSliderContainer) {
        var discoverSlider = tns({
            container: '#discover-slider',
            loop: false,
            items: 1,
            responsive: {
                640: {
                    items: 2
                },
                800: {
                    items: 3
                },
            },
            slideBy: 1,
            edgePadding: 50,
            gutter: 20,
            nav: false,
            autoplay: false,
            // speed: 400,
            autoplayButtonOutput: false,
            mouseDrag: true,
            controlsContainer: "#discover-controls",
            mode: "carousel",
        });
    }
</script>
 
<div class="bg-cyan py-12">

  <h2 class="font-mtl-heading text-4xl sm:text-5xl text-white uppercase text-center">
    Discover Mountaineer Lodge
  </h2>

  <div class="relative flex flex-col mt-12 mb-12" data-slideout-ignore>

    {{> @mtl-carousel-controls }}

    <div id="discover-slider" class="relative flex flex-wrap">

      {{#each items }}
        {{> @mtl-card-page-preview }}
      {{/each}}

    </div>

  </div>

</div>

<script>

  const discoverSliderContainer = document.querySelector('#discover-slider');
  if (discoverSliderContainer) {
    var discoverSlider = tns({
      container: '#discover-slider',
      loop: false,
      items: 1,
      responsive: {
        640: {
          items: 2
        },
        800: {
          items: 3
        },
      },
      slideBy: 1,
      edgePadding: 50,
      gutter: 20,
      nav: false,
      autoplay: false,
      // speed: 400,
      autoplayButtonOutput: false,
      mouseDrag: true,
      controlsContainer: "#discover-controls",
      mode: "carousel",
    });
  }

</script>
 
{
  "controls": "discover-controls",
  "items": [
    {
      "title": "Special Offers",
      "image": "/dist/images/temp/Carmella_MRI_June-3-Large.f1637891328.jpg"
    },
    {
      "title": "Hotel Amenities",
      "image": "/dist/images/temp/Mountaineer_LakeLouise-20-Large.jpg"
    },
    {
      "title": "Breakfast",
      "image": "/dist/images/temp/Mountaineer_LakeLouise-10-Large.jpg"
    },
    {
      "title": "Winter Activities",
      "image": "/dist/images/temp/Lake-Louise-Ski-Resort.jpg"
    },
    {
      "title": "Visit Lake Louise",
      "image": "/dist/images/temp/For-the-Family.jpg"
    },
    {
      "title": "Check Rates & Dates",
      "image": "/dist/images/temp/Carmella_MRI_June-10-XL.f1637891336.jpg"
    }
  ]
}