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官网！
