CMS Slider

Demo

CMS Slider 0

A CMS slider is a powerful tool that allows users to showcase multiple pieces of content in a visually appealing manner. It enhances user engagement by providing dynamic content presentation, making it easier for visitors to navigate through various offerings.

CMS Slider 1

Using a CMS slider can significantly improve the aesthetics of a website. It allows for the integration of images, videos, and text, creating a rich multimedia experience. This feature is particularly useful for highlighting promotions, featured articles, or important announcements.

CMS Slider 2

Implementing a CMS slider requires careful consideration of design and functionality. It is essential to ensure that the slider is responsive and works seamlessly across different devices. Additionally, optimizing the loading speed of the slider can enhance user experience.

CMS Slider 3

A well-designed CMS slider can lead to increased conversion rates. By strategically placing calls to action within the slider, businesses can guide users towards desired actions, such as signing up for newsletters or making purchases.

CMS Slider 4

Incorporating a CMS slider into your website can also improve SEO. Search engines favor websites that provide engaging content, and a slider can help keep visitors on the site longer, reducing bounce rates and improving overall site performance.

Embed code

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>

CMS Slider Swiper