swiper缩放图

swiper缩放图

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

分为大图和小图，就是主图和缩略图

（class 里面可以有不止一个属性）

需要把自己的图片插入相应位置（上图我已经插入了六个演示图片)，在swiper-slide里面，格式可以在swiper官网粘贴

相应的：

如果需要添加轮播组件，需要在相应位置加上

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在Swiper容器之外

加入相应的组件后，不要忘了在<script>进行相应的初始化

找到相对应的进行粘贴复制即可

<script>        
  var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>

因为是缩略图，所以上面有图片（大图），下面也有图片（小图）

可以设置相应的id属性便于寻找

（这里我设置的是id=shang，id=xia）

对其设置大小位置显示

*{
    margin: 0;
    padding: 0;
}
#shang{
    width: 360px;
    height: 320px;
  
}
#shang img{
        width: 100%;
        height: 100%;
    }
#xia{
        width: 360px;
    height: 80px;
   
    }
#xia img{
        width: 120px;
        height:100%;
    }
​
//下面的图  
var xia = new Swiper("#xia", {
    loop:true,
    slidesPerView:3,
    watchSlidesVisibility: true,
});

loop设置轮播

slidesPerView设置下面会显示三个图片

//上面的图 var shang = new Swiper("#shang", { navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, loop:true, //监听 thumbs: { swiper:xia, }

先初始化的导航按钮

thumbs设置监听 小图（id=xia）

如果我们想要下面的缩略图被选中的话，不透明

如果未被选中的话，则出现一点透明

.swiper-slide-visible{
    opacity: 0.2;
}
.swiper-slide-thumb-active{
    opacity: 1;
}