swiper实现页面banner图自由切换

首先引入css样式（官方可下载）：

<link rel="stylesheet" href="./css/swiper-3.4.2.min.css">

html部分代码

 <!-- banner容器 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url(./images/2162840f5f7543df9fd14a86446b0fd7.jpeg)"></div>
        <div class="swiper-slide" style="background-image: url(./images/3d6867017cab45169f9dbcb531ded949.jpeg)"></div>
        <div class="swiper-slide" style="background-image: url(./images/ee1e35a0d7204035ba1e5107061a981f.jpeg)"></div>
    </div>
    <!-- 分页 -->
    <div class="swiper-pagination"></div>

    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

js部分代码

<script src="js/jquery-3.5.1/jquery-3.5.1.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"></script>

<script>
  $(function () {
    let mySwiper = new Swiper('.swiper-container', {
      autoplay: 2000,//可选选项，自动滑动
      pagination : '.swiper-pagination',// 分页
      paginationClickable :true,// 导航按钮开启
      prevButton:'.swiper-button-prev',// 上一页
      nextButton:'.swiper-button-next',// 下一页
    })
  })
</script>

注意：对于banner容器尽量不要自己另外设置样式，可能会与原本的css冲突，会导致banner图不能正常翻页等问题。