swiper.js 常用代码

最新推荐文章于 2025-06-25 10:18:47 发布

原创最新推荐文章于 2025-06-25 10:18:47 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swiper.js

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了使用Swiper实现不同布局的轮播图效果的方法，包括基础单排、多排及自定义dots样式等配置选项。

基础单排

var obj = new Swiper('#id .swiper', {
	paginationClickable: true,
	loop: true,
	pagination: '#id .dots',
	prevButton: '#id .prev',
	nextButton: '#id .next',
	slidesPerView: 3,
	slidesPerGroup: 3,
	spaceBetween: 10
});

基础多排

var obj = new Swiper('#id .swiper', {
	paginationClickable: true,
	pagination: '#id .dots',
	prevButton: '#id .prev',
	nextButton: '#id .next',
	slidesPerView: 3,
	slidesPerColumn: 2,
	spaceBetween: 10
});

自定义dots

var galleryTop = new Swiper('.gallery-top', {
		nextButton: '.swiper-button-next',
		prevButton: '.swiper-button-prev',
		spaceBetween: 10,
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
		spaceBetween: 10,
		centeredSlides: true,
		slidesPerView: 'auto',
		touchRatio: 0.2,
		slideToClickedSlide: true
});

galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;