<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>
document.querySelectorAll('[el-role="swiper"]').forEach((el) => initSwiper(el));
function initSwiper(el) {
var swiperEl = el;
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(swiperEl, {
// 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>