Swiper

Demo

Slide 0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Slide 1

Slide 2

Slide 3

Slide 4

Code

<head> code

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<style>
:root {
	--swiper-theme-color: #000000;
  
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: 0;
  --swiper-pagination-right: 0px;
  --swiper-pagination-bottom: 0px;
  --swiper-pagination-top: 0;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 0px;
  --swiper-pagination-bullet-vertical-gap: 6px;
}
.swiper-button-next, .swiper-button-prev {
	position: relative;
  top: 0;
  width: auto;
  height: auto;
  margin-top: 0;
  left: 0;
  right: 0;
}
.swiper-pagination {
	position: relative;
}
.swiper-pagination-bullet {
	margin: 0;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #00000026;
}
.swiper-pagination-bullet-active {
	width: 24px;
}
.swiper-pagination-bullet-active .swiper-pagination-bullet-indicator {
	display: block;
}
.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}
.swiper-slide {
	height: auto;
}
</style>

<body> code

<script>
var swiperEl = document.querySelector('[el-role="swiper"]');
var mobileSlidesPerView = swiperEl.getAttribute('mobile-slides-per-view');
var mobileSpaceBetween = swiperEl.getAttribute('mobile-space-between');

var mobileLandscapeSlidesPerView = swiperEl.getAttribute('mobile-landscape-slides-per-view');
var mobileLandscapeSpaceBetween = swiperEl.getAttribute('mobile-landscape-space-between');

var tabletSlidesPerView = swiperEl.getAttribute('tablet-slides-per-view');
var tabletSpaceBetween = swiperEl.getAttribute('tablet-space-between');

var desktopSpaceBetween = swiperEl.getAttribute('space-between');
var desktopSlidesPerView = swiperEl.getAttribute('slides-per-view');

var autoplayDelay = Number(swiperEl.getAttribute('autoplay-delay'));

var bulletIndicator = swiperEl.querySelector('[el-role="swiper_autoplay_indicator"]');
const IndicatorTemplate = bulletIndicator.cloneNode(true);

var buttonResume = swiperEl.querySelector('[el-role="swiper_resume"]');
var buttonPause = swiperEl.querySelector('[el-role="swiper_pause"]');
var buttonStart = swiperEl.querySelector('[el-role="swiper_start"]');

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,
  autoplay: {
  	disableOnInteraction: true,
    delay: autoplayDelay,
  },
  
  watchSlidesProgress: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    bulletActiveClass: 'swiper-pagination-bullet-active',
    bulletClass: 'swiper-pagination-bullet',
    clickable: true
  },
  
  breakpoints: {
        // when window width is >= 320px
    320: {
      slidesPerView: mobileSlidesPerView,
      spaceBetween: mobileSpaceBetween
    },
    // when window width is >= 480px
    479: {
      slidesPerView: mobileLandscapeSlidesPerView,
      spaceBetween: mobileLandscapeSpaceBetween
    },
    // when window width is >= 640px
    768: {
      slidesPerView: tabletSlidesPerView,
      spaceBetween: tabletSpaceBetween
    },
    992: {
      slidesPerView: desktopSlidesPerView,
      spaceBetween: desktopSpaceBetween
    }
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
buttonResume.addEventListener('click', resumeSwiper);
buttonPause.addEventListener('click', pauseSwiper);
buttonStart.addEventListener('click', startSwiper);

function resumeSwiper() {
	swiper.autoplay.resume();
  console.log('resume');
  buttonPause.style.display = "block";
  buttonResume.style.display = "none";
  buttonStart.style.display = "none";
};

function pauseSwiper() {
	swiper.autoplay.pause();
  console.log('pause');
	buttonPause.style.display = "none";
  buttonResume.style.display = "block";
  buttonStart.style.display = "none";
};

function startSwiper() {
	swiper.autoplay.start()
	buttonPause.style.display = "block";
  buttonResume.style.display = "none";
  buttonStart.style.display = "none";
  handleAutoplayIndicator(swiper)
};

swiper.on('autoplayStop', function() {
	console.log('stop');
  buttonPause.style.display = "none";
  buttonResume.style.display = "none";
  buttonStart.style.display = "block";
  removeAutoPlayIndicator(swiper);
});

swiper.on('autoplayStart', function() {
	console.log('start');
	buttonPause.style.display = "block";
  buttonResume.style.display = "none";
  buttonStart.style.display = "none";
  handleAutoplayIndicator(swiper);
  swiper.autoplay.pause();
  swiper.autoplay.resume();
});

handleAutoplayIndicator(swiper);
swiper.on('realIndexChange', handleAutoplayIndicator);

function handleAutoplayIndicator(swiper) {
  if (swiper.autoplay.running) {
    var activeBullet = swiper.pagination.bullets[swiper.realIndex];
    activeBullet.append(IndicatorTemplate);
    swiper.on('autoplayTimeLeft', function(swiper, timeLeft, percentage) {
      var activeIndicator = activeBullet.querySelector('[el-role="swiper_autoplay_indicator"]');
      if (activeIndicator) {
        activeIndicator.style.width = 100 - (percentage * 100) + '%';
      }
    });
  };
}

function removeAutoPlayIndicator(swiper) {
	var activeBullet = swiper.pagination.bullets[swiper.realIndex];
  activeBullet.querySelector('[el-role="swiper_autoplay_indicator"]').remove();
};
</script>

Swiper Slider