使用swiper 实现左右切换

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

引用js、css文件

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">

 远程加载慢，建议下载安装包，地址：下载Swiper - Swiper中文网

下载后引入根目录下的 swiper-bundle.min.js 和 swiper-bundle.min.css 就ok啦

html

<div class="swiper">
   <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-color: yellowgreen;"></div>
        <div class="swiper-slide" style="background-color: rgb(205, 107, 50);"></div>
        <div class="swiper-slide" style="background-color: rgb(37, 216, 216);"></div>
   </div>
   <div class="swiper-pagination"  style="position: absolute;bottom: 0rem;"></div>
</div>

js

var mySwiper = new Swiper('.swiper', {
    pagination: {
       el: '.swiper-pagination',
    }
})

css

.swiper {
   width: 600px;
   height: 300px;
}