swiper插件实现幻灯片左右箭头切换效果。

1.下载swiper插件
2.引入swiper.min.css
3.引入swiper.min.j s

效果图：这个是一行显示2个图。
你可以项目需求设置一行展示多个图。

<div class="swiper-container">
    <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>

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
   //可以按照需要设置分页的排列个数，例如：一行显示多少个
    slidesPer View：5；
    autoHeight:true,自适应高度
    
  })        
  </script>

自我总结项目经验：一行展示多个图片。可以使用弹性盒模型布局。pc端和移动端都可自适应。

1.左右↔️可以自定义，看项目需要定义。
2.更详细的可以看swiper官网！