swiper.js带缩略图画廊图片切换特效

来源:https://www.sucaihuo.com/js/4337.html 2019-05-05 10:51浏览(1213) 收藏

基于swiper.js制作的一款带缩略图画廊图片切换特效,点击缩略图或鼠标拖动大图进行切换。
swiper.js带缩略图画廊图片切换特效
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript">
var thumbsSwiper = new Swiper('#thumbs', {
	spaceBetween: 10,
	slidesPerView: 5,
	watchSlidesVisibility: true, //防止不可点击
})
var gallerySwiper = new Swiper('#gallery', {
	effect : 'coverflow',
	spaceBetween: 10, //缩略图间距
	slidesPerView: 3,
	centeredSlides: true,
	initialSlide :2,
	loop: true,
	autoplay: true,
	thumbs: {
		swiper: thumbsSwiper,
	}
})
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2