[Swiper] How to add pause and play buttons to a slider

HTML

Prepare a slider and two buttons.

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img01.jpg"></div>
		<div class="swiper-slide"><img src="img02.jpg"></div>
		<div class="swiper-slide"><img src="img03.jpg"></div>
	</div>
	<!-- Dots -->
	<div class="swiper-pagination"></div>
	<!-- Pager -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

<!-- Buttons -->
<button class="swiper_pause">Pause</button>
<button class="swiper_start">Play</button>

The pause/play buttons don't necessarily have to be <button> tags.

JS

The JS looks like this.

const swiper = new Swiper(".swiper", {
	loop: true,
	autoplay: { // Autoplay
		delay: 1000, // Autoplay speed
		disableOnInteraction: false, // Don't stop autoplay when clicking arrows
	},
	pagination: {
		el: ".swiper-pagination",
		clickable: true
	},
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev"
	},
	breakpoints: {
		768: { //Apply the following if 768px or wider
			slidesPerView: 1.5, // Show a glimpse of slides on both sides
			centeredSlides: true, // Show a glimpse of slides on both sides
		}
	}
});

// Pause
document.querySelector(".swiper_pause").addEventListener("click", function(){
	swiper.autoplay.stop();
});
// Play
document.querySelector(".swiper_start").addEventListener("click", function(){
	swiper.autoplay.start();
});

Customize Swiper options as you like.

The important part is from line 23 onwards, where pause and play are defined.

If you prefer jQuery, this also works.

// Pause
$(".swiper_pause").on("click", function(){
	swiper.autoplay.stop();
});
// Play
$(".swiper_start").on("click", function(){
	swiper.autoplay.start();
});

swiper.autoplay.stop(); // Stop
swiper.autoplay.start(); // Play

swiper.stopAutoplay(); // Stop
swiper.startAutoplay(); // Play

HTML

Prepare a slider and one button.

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><img src="img01.jpg"></div>
		<div class="swiper-slide"><img src="img02.jpg"></div>
		<div class="swiper-slide"><img src="img03.jpg"></div>
	</div>
	<!-- Dots -->
	<div class="swiper-pagination"></div>
	<!-- Pager -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>

<!-- Buttons -->
<button class="swiper_pause">Pause/Play</button>

The pause/play button doesn't necessarily have to be <button> tags.

JS

The JS looks like this. The Swiper part is the same as before.

const swiper = new Swiper(".swiper", {
	loop: true,
	autoplay: { // Autoplay
		delay: 1000, // Autoplay speed
		disableOnInteraction: false, // Don't stop autoplay when clicking arrows
	},
	pagination: {
		el: ".swiper-pagination",
		clickable: true
	},
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev"
	},
	breakpoints: {
		768: { //Apply the following if 768px or wider
			slidesPerView: 1.5, // Show a glimpse of slides on both sides
			centeredSlides: true, // Show a glimpse of slides on both sides
		}
	}
});

// Pause/Play
document.querySelector(".swiper_pause").addEventListener("click", function(){
	// When .paused exists
	if(this.classList.contains("paused")){
		swiper.autoplay.start(); // Play
		this.classList.remove("paused"); // Remove .paused
	}else{
		// When .paused does not exist
		swiper.autoplay.stop(); // Pause
		this.classList.add("paused"); // Add .paused
	}
});

Customize Swiper options as you like.

The important part is from line 23 onwards, where the "paused" class is added or removed from the button to toggle between pause and play.

If you prefer jQuery, this also works.

$(".swiper_toggle").on("click", function(){
	// When .paused exists
	if($(this).hasClass("paused")){
		swiper.autoplay.start(); // Play
		$(this).removeClass("paused"); // Remove .paused
	}else{
		// When .paused does not exist
		swiper.autoplay.stop(); // Pause
		$(this).addClass("paused"); // Add .paused
	}
});

swiper.autoplay.stop(); // Stop
swiper.autoplay.start(); // Play

swiper.stopAutoplay(); // Stop
swiper.startAutoplay(); // Play