Swiper Slider

Swiper Slider is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior For more details

File Structure
  • gulp+scss+hbs
    • src
      • assets
        • vendor
          • swiperSlider
              • swiper-bundle.min.css
              • swiper-bundle.min.js 
<!-- swiper slider css-->
<script src="{{path}}assets/vendor/swiperSlider/swiper-bundle.min.css"></script>

<!-- swiper slider js-->
<script src="{{path}}assets/vendor/swiperSlider/swiper-bundle.min.js"></script>
HTML Code
<div class="swiper swiper-container swiper-general" data-slide="3" data-laptop="3" data-tab="2" data-mobile="1"
    data-mobile-sm="1" data-autoplay="true" data-loop="true" data-pagination="false" data-space="30">
    <ul class="p-0 m-0 mb-5 swiper-wrapper list-inline">
        <li class="swiper-slide">
            Slide1
        </li>
        <li class="swiper-slide">
            Slide2
        </li>
        <li class="swiper-slide">
            Slide3
        </li>
        <li class="swiper-slide">
           Slide4
        </li>
        <li class="swiper-slide">
            Slide5
        </li>
        <li class="swiper-slide">
           Slide6
        </li>
        <li class="swiper-slide">
           Slide7
        </li>
    </ul>
    <div class="swiper-pagination d-md-none d-block"></div>
</div>
Script
(function (jQuery) {
  "use strict";

  jQuery(document).ready(function () {
    callGeneralSwiper();
  });
})(jQuery);
function callGeneralSwiper() {
  jQuery(document)
    .find(".swiper-general")
    .each(function () {
      let slider = jQuery(this);

      var sliderAutoplay = slider.data("autoplay");

      var breakpoint = {
        // when window width is >= 0px
        0: {
          slidesPerView: slider.data("mobile-sm"),
        },
        480: {
          slidesPerView: slider.data("mobile"),
        },
        // when window width is >= 768px
        768: {
          slidesPerView: slider.data("tab"),
        },
        // when window width is >= 1023px
        1023: {
          slidesPerView: slider.data("laptop"),
        },
        // when window width is >= 1199px
        1199: {
          slidesPerView: slider.data("slide"),
        },
      };

      if (slider.data("navigation")) {
        if (slider.data("navigation-outer")) {
          var navigationVal = {
            nextEl: slider.next(".swiper-btn").find(".swiper-button-next")[0],
            prevEl: slider.next(".swiper-btn").find(".swiper-button-prev")[0],
          };
        } else {
          var navigationVal = {
            nextEl: slider.find(".swiper-button-next")[0],
            prevEl: slider.find(".swiper-button-prev")[0],
          };
        }
      } else {
        var navigationVal = false;
      }

      if (slider.data("pagination")) {
        var paginationVal = {
          el: slider.find(".swiper-pagination")[0],
          clickable: true,
        };
      } else {
        var paginationVal = false;
      }
      var sw_config = {
        loop: slider.data("loop"),
        speed: 1000,
        spaceBetween: slider.data("space"),
        slidesPerView: slider.data("slide"),
        centeredSlides: slider.data("center"),
        mousewheel: slider.data("mousewheel"),
        autoplay: sliderAutoplay,
        effect: slider.data("effect"),
        navigation: navigationVal,
        pagination: paginationVal,
        breakpoints: breakpoint,
      };
      var swiper = new Swiper(slider[0], sw_config);

      jQuery(".porfolio-tab .nav-link").on("shown.bs.tab", (e) => {
        swiper.destroy(true, true);
        setTimeout(() => {
          swiper = new Swiper(slider[0], sw_config);
        }, 100);
      });
    });
}
Previous Next