swiper.js带缩略图画廊图片切换特效-站长技术网

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

时间:2019-11-15 10:29:16 来源:网络收集作者:不详点击:次

源码授权：免费特效运行环境： JS 源码大小： 490 KB
普通会员
点击下载

基于swiper.js制作的一款带缩略图画廊图片切换特效，点击缩略图或鼠标拖动大图进行切换。
swiper.js带缩略图画廊图片切换特效

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>