Vebego Component Library

Image Slider 

<div class="mol-image-slider">
    <div class="swiper-container" data-autoplay="true">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/231/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/232/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/234/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/235/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/236/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/237/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/238/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/239/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/2/960/540" alt="">
                    </picture>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
 
<div class="mol-image-slider">
    <div class="swiper-container" data-autoplay="true">
        <div class="swiper-wrapper">
            {{#each images}}
                <div class="swiper-slide">
                    <div class="slide-image">
                        {{render '@image' this}}
                    </div>
                </div>
            {{/each}}
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
 
{
  "images": [
    {
      "src": "https://picsum.photos/id/231/960/540"
    },
    {
      "src": "https://picsum.photos/id/232/960/540"
    },
    {
      "src": "https://picsum.photos/id/234/960/540"
    },
    {
      "src": "https://picsum.photos/id/235/960/540"
    },
    {
      "src": "https://picsum.photos/id/236/960/540"
    },
    {
      "src": "https://picsum.photos/id/237/960/540"
    },
    {
      "src": "https://picsum.photos/id/238/960/540"
    },
    {
      "src": "https://picsum.photos/id/239/960/540"
    },
    {
      "src": "https://picsum.photos/id/2/960/540"
    }
  ]
}
  • Content: 
    .mol-image-slider {
  .swiper-container,
  .swiper-container-autoplay{
    @apply pb-12;

    .swiper-slide {
      > .slide-image {
        @apply relative h-0;

        padding-bottom: 75%;

        @screen md {
          padding-bottom: 56.25%;
        }

        .atm-image {
          @apply absolute w-full h-full;

          img {
            @apply w-full h-full object-cover;
          }
        }
      }
    }

    .swiper-pagination {
      @apply bottom-0;

      &-bullet {
        @apply bg-gray;
        @apply p-1;

        &-active {
          @apply bg-navy;
        }
      }
    }
  }
}
  • URL: /components/raw/image-slider/image-slider.css
  • Filesystem Path: src\components\03-molecules\image-slider\image-slider.css
  • Size: 647 Bytes
  • Content: 
    (function () {

  "use strict";

  var imageSliders = document.querySelectorAll(".mol-image-slider");

  for (var i = 0; i < imageSliders.length; i++) {
    var swiperContainer = imageSliders[i].querySelector(".swiper-container");
    
    let toggleAutoplay = swiperContainer.dataset.autoplay.toLowerCase();
    let autoplayTrue = (toggleAutoplay === 'true');

    if(autoplayTrue){
      new Swiper(swiperContainer, {
        spaceBetween: 16,
        slidesPerView: 1.2,
        watchOverflow: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        autoplay: {
          delay: 2500
        },
        breakpoints: {
          1024: {
            slidesPerView: 2,
          },
        },
      }); 
    } else {
      new Swiper(swiperContainer, {
        spaceBetween: 16,
        slidesPerView: 1.2,
        watchOverflow: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        breakpoints: {
          1024: {
            slidesPerView: 2,
          },
        },
      }); 
    }
  }
})();
  • URL: /components/raw/image-slider/image-slider.js
  • Filesystem Path: src\components\03-molecules\image-slider\image-slider.js
  • Size: 1.2 KB

No notes defined.