swiper

https://swiper.com.cn/

首先引入css和js 针对不同的技术栈进行引入（可以直接下载js和css 或者引入cdn）

温馨提示 这里不建议用CDN 练手的还行 CDN很辣鸡

这里示例用原生html+css

创建的时候需要看好版本 低版本的盒子类型不一样 不要搞错

一个页面中引用多个Swiper，可以给每个容器加上ID或Class区分，要保留默认的类名.swiper ！！

<div class="swiper" id="swiper1">....</div>
<div class="swiper" id="swiper2">....</div>
<div class="swiper" id="swiper3">....</div>
 
<!-- 这里的class=swiper 这个swiper不能动 可以追加 -->
<div class="swiper" id="自定义类名防止冲突">
  <div class="swiper-wrapper">
    <div class="swiper-slide">内容1</div>
    <div class="swiper-slide">内容2</div>
    <div class="swiper-slide">内容3</div>
  </div>
  <div class="swiper-pagination"></div>    // 分页器
  <div class="swiper-button-prev"></div>   // 箭头上一个
  <div class="swiper-button-next"></div>   // 箭头下一个
</div>
 
  let swiper1 = new Swiper('#swiper1');
  let swiper2 = new Swiper('#swiper2');
  let swiper3 = new Swiper('#swiper3');

<link rel="stylesheet" href="./swiper-bundle.min.css">
 
<script src="./swiper-bundle.min.js"></script>
 
<!-- 这里可以直接用id来命名  创建多个swiper -->
<script type="text/javascript">
  let mySwiper = new Swiper('#swiper1', {
    direction: 'horizontal', // 横向切换选项
  })
  let mySwiper1 = new Swiper('#swiper2', {
    direction: 'horizontal', // 横向切换选项
    loop: true, // 循环模式选项
    autoplay: {
      delay: 3000,//3秒自动循环
      disableOnInteraction: false,//处理点击左右箭头后不自动循环问题
    },
    // 下方分页器的。。。  这里可以用css修改他的样式
    pagination: {
      //为了防止多个swiper都需要分页器和左右箭头 所以在前面再添加一个容器的class
      // 来区分
      el: '.dynamic .swiper-pagination',
      clickable: true,
    },
    // 左右箭头
    navigation: {
      nextEl: '.dynamic .swiper-button-next',
      prevEl: '.dynamic .swiper-button-prev',
    },
  })
  let mySwiper2 = new Swiper('#swiper3', {
    direction: 'horizontal', // 横向切换选项
    loop: true, // 循环模式选项
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: '.dynamics .swiper-pagination',
      clickable: true,
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.dynamics .swiper-button-next',
      prevEl: '.dynamics .swiper-button-prev',
    },
  })
</script>

/* 修改左右箭头样式 */
  .dynamic .swiper-button-next::after,
  .dynamic .swiper-button-prev::after,
  .dynamics .swiper-button-next::after,
  .dynamics .swiper-button-prev::after {
    font-size: 30px;
    text-align: center;
  }
 
  .swiper-pagination-bullet {
    width: 30px;
    height: 3px;
    border-radius: 0px;
  }