[Swiper] How to create a slider that can be freely grabbed and moved

Sample

You can create something like this.

Try dragging and dropping to move the slides.

Sample: Common Slider

You can freely move the slides by swiping them.

Version with inertia scroll
You can move it smoothly by flicking it. (Just change the options of the sample above)

Sample: Constant Speed Slider

This can also be used when you want to move at a constant speed but don't want to wait for it to flow.

Version with inertia scroll
(Just change the options of the sample above)

Common HTML

The HTML is common.
If there are too few slides, the generation of slides might not keep up when moved vigorously.
We recommend preparing more slides, for example, by setting up two sets of the same slides.

<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 class="swiper-slide"><img src="img04.jpg"></div>
		<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 class="swiper-slide"><img src="img04.jpg"></div>
	</div>
</div>

How to Create a Common Slider

Here's how to create a common slider that can be freely grabbed and moved.

Execute Swiper as follows.

let slideLen = document.querySelectorAll(".swiper .swiper-slide").length;

const initSwiper = () => {
	const mySwiper = new Swiper('.swiper', {
		slidesPerView: 'auto', // Setting to show multiple slides
		spaceBetween: 8, // Left and right margin of slides
		loop: true,
		loopedSlides: slideLen,
		speed: 1000, // Animation speed
		autoplay: {
			delay: 2000, // Autoplay speed
			disableOnInteraction: false,
		},
		freeMode: {
			enabled: true,
			momentum: false, // Set to true to enable inertia scroll
		},
		grabCursor: true,
		on: {
			touchEnd: (swiper) => {
				swiper.slideTo(swiper.activeIndex + 1); // Set the next slide to active after swiping
			}
		}
	});
};

window.addEventListener('load', function(){
	initSwiper();
});

Please adjust the slide margins and slider speed as you like.

Setting "momentum" on line 16 to true will enable inertia scroll.

This article was referenced.

[v8] Swiper Usage: 15 Practical Demos Explained - From Basics to Advanced – BRISK, a Web Production Company in Tokyo

.swiper-slide {
	width: 200px;
}

How to Create a Constant Speed Slider

Here's how to create a slider that can be freely grabbed and moved, and continuously flows horizontally at a constant speed.

Execute Swiper as follows.

let slideLen = document.querySelectorAll(" .swiper .swiper-slide").length;

const initSwiper = () => {
	const mySwiper = new Swiper(' .swiper', {
		slidesPerView: 'auto', // Setting to show multiple slides
		spaceBetween: 8, // Left and right gap of slides
		loop: true,
		loopedSlides: slideLen,
		speed: 6000, // Flow speed
		autoplay: {
			delay: 0,
			disableOnInteraction: false,
		},
		freeMode: {
			enabled: true,
			momentum: false, // Set to true to enable inertia scroll
		},
		grabCursor: true,
		on: {
			touchEnd: (swiper) => {
				swiper.slideTo(swiper.activeIndex + 1);
			}
		}
	});
};

window.addEventListener('load', function(){
	initSwiper();
});

Please adjust the slide margins and flow speed as you like.

Setting "momentum" on line 16 to true will enable inertia scroll.

This article was referenced.

[v8] Swiper Usage: 15 Practical Demos Explained - From Basics to Advanced – BRISK, a Web Production Company in Tokyo

.sample03 .swiper-wrapper {
	-webkit-transition-timing-function: linear !important;
	transition-timing-function: linear !important;
}
.swiper-slide {
	width: 200px;
}

Comments

We also welcome reports such as "It worked!"