swiper轮播图插件简单使用

复制代码
<!DOCTYPE html>
<html lang="en" backgound="">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../public/plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
    <link href="../public/plugins/swiper-8.3.0/swiper-bundle.min.css" rel="stylesheet" />
  </head>
  <style>
    .swiper-slide {
      border: 1px solid blue;
    }
    .swiper-slide1 {
      transition: 300ms;
      transform: scale(0.8);
    }
    .swiper-slide-active,
    .swiper-slide-duplicate-active {
      transform: scale(1);
    }
    .swiper-slide7 {
      height: calc((100% - 30px) / 2);
    }

    .swiper-wrapper1 {
      /* 通过改变animation-timing-function 制作弹性切换效果 */
      transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
    }
  </style>
  <body class="bg-light">
    <div class="container-fluid mt-3">
      <!-- content ------------------------------------- -->
      <div class="row">
        <div class="col-4">
          <div class="card p-2">
            <div class="swiper swiper1" style="width: 100%; height: 400px">
              <div class="swiper-wrapper">
                <div class="swiper-slide" style="width: 100%; height: 400px" id="main1"></div>
                <div class="swiper-slide" style="width: 100%; height: 400px" id="main2"></div>
                <div class="swiper-slide" style="width: 100%; height: 400px" id="main3"></div>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>

              <!-- 如果需要导航按钮 -->
              <!-- <div class="swiper-button-prev swiper-button-white"></div>
          <div class="swiper-button-next swiper-button-white"></div> -->

              <!-- 如果需要滚动条 -->
              <!-- <div class="swiper-scrollbar"></div> -->
            </div>
          </div>
        </div>

        <div class="col-4">
          <div class="card p-2">
            <div class="swiper swiper3" style="width: 100%; height: 400px">
              <div class="swiper-wrapper">
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies1</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies2</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies3</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies3</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies4</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies5</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies6</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies7</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies8</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies9</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies10</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies11</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies12</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies13</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies14</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies15</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies16</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies17</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies18</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies19</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies20</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies21</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies22</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies23</div>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>

              <!-- 如果需要导航按钮 -->
              <!-- <div class="swiper-button-prev swiper-button-white"></div>
          <div class="swiper-button-next swiper-button-white"></div> -->

              <!-- 如果需要滚动条 -->
              <!-- <div class="swiper-scrollbar"></div> -->
            </div>
          </div>
        </div>

        <div class="col-4">
          <div class="card p-2">
            <div class="swiper swiper2" style="width: 100%; height: 400px">
              <div class="swiper-wrapper">
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies1</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies2</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies3</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies3</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies4</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies5</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies6</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies7</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies8</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies9</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies10</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies11</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies12</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies13</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies14</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies15</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies16</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies17</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies18</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies19</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies20</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies21</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies22</div>
                <div class="swiper-slide p-2 text-center">Conveying meaning to assistive technologies23</div>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>

              <!-- 如果需要导航按钮 -->
              <!-- <div class="swiper-button-prev swiper-button-white"></div>
          <div class="swiper-button-next swiper-button-white"></div> -->

              <!-- 如果需要滚动条 -->
              <!-- <div class="swiper-scrollbar"></div> -->
            </div>
          </div>
        </div>
      </div>

      <div class="row mt-5">
        <div class="col-6">
          <div class="card p-2">
            <div class="swiper swiper4 swiper-horizontal" style="width: 100%; height: 300px">
              <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide1" data-swiper-slide-index="0">Slide 1</div>
                <div class="swiper-slide swiper-slide1" data-swiper-slide-index="1">Slide 2</div>
                <div class="swiper-slide swiper-slide1" data-swiper-slide-index="2">Slide 3</div>
                <div class="swiper-slide swiper-slide1" data-swiper-slide-index="3">Slide 4</div>
                <div class="swiper-slide swiper-slide1" data-swiper-slide-index="4">Slide 5</div>
                <div class="swiper-slide swiper-slide1" data-swiper-slide-index="5">Slide 6</div>
                <div class="swiper-slide swiper-slide1" data-swiper-slide-index="6">Slide 7</div>
                <div class="swiper-slide swiper-slide1" data-swiper-slide-index="7">Slide 8</div>
                <div class="swiper-slide swiper-slide1" data-swiper-slide-index="8">Slide 9</div>
                <div class="swiper-slide swiper-slide1" data-swiper-slide-index="9">Slide 10</div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
          </div>
        </div>

        <div class="col-6">
          <div class="card p-2">
            <div class="swiper swiper7 swiper-horizontal" style="width: 100%; height: 300px">
              <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide7" data-swiper-slide-index="0">Slide 1</div>
                <div class="swiper-slide swiper-slide7" data-swiper-slide-index="1">Slide 2</div>
                <div class="swiper-slide swiper-slide7" data-swiper-slide-index="2">Slide 3</div>
                <div class="swiper-slide swiper-slide7" data-swiper-slide-index="3">Slide 4</div>
                <div class="swiper-slide swiper-slide7" data-swiper-slide-index="4">Slide 5</div>
                <div class="swiper-slide swiper-slide7" data-swiper-slide-index="5">Slide 6</div>
                <div class="swiper-slide swiper-slide7" data-swiper-slide-index="6">Slide 7</div>
                <div class="swiper-slide swiper-slide7" data-swiper-slide-index="7">Slide 8</div>
                <div class="swiper-slide swiper-slide7" data-swiper-slide-index="8">Slide 9</div>
                <div class="swiper-slide swiper-slide7" data-swiper-slide-index="9">Slide 10</div>
              </div>
              <div class="swiper-button-prev swiper-button-white"></div>
              <div class="swiper-button-next swiper-button-white"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="row my-5">
        <div class="col-6">
          <div class="card p-2">
            <div class="swiper swiper6 swiper-horizontal" style="width: 100%; height: 300px">
              <div class="swiper-wrapper">
                <div class="swiper-slide" data-swiper-slide-index="0">Slide 1</div>
                <div class="swiper-slide" data-swiper-slide-index="1">Slide 2</div>
                <div class="swiper-slide" data-swiper-slide-index="2">Slide 3</div>
                <div class="swiper-slide" data-swiper-slide-index="3">Slide 4</div>
                <div class="swiper-slide" data-swiper-slide-index="4">Slide 5</div>
                <div class="swiper-slide" data-swiper-slide-index="5">Slide 6</div>
                <div class="swiper-slide" data-swiper-slide-index="6">Slide 7</div>
                <div class="swiper-slide" data-swiper-slide-index="7">Slide 8</div>
                <div class="swiper-slide" data-swiper-slide-index="8">Slide 9</div>
                <div class="swiper-slide" data-swiper-slide-index="9">Slide 10</div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="card p-2">
            <div class="swiper swiper5 swiper-horizontal" style="width: 100%; height: 300px">
              <div class="swiper-wrapper swiper-wrapper1">
                <div class="swiper-slide" data-swiper-slide-index="0">Slide 1</div>
                <div class="swiper-slide" data-swiper-slide-index="1">Slide 2</div>
                <div class="swiper-slide" data-swiper-slide-index="2">Slide 3</div>
                <div class="swiper-slide" data-swiper-slide-index="3">Slide 4</div>
                <div class="swiper-slide" data-swiper-slide-index="4">Slide 5</div>
                <div class="swiper-slide" data-swiper-slide-index="5">Slide 6</div>
                <div class="swiper-slide" data-swiper-slide-index="6">Slide 7</div>
                <div class="swiper-slide" data-swiper-slide-index="7">Slide 8</div>
                <div class="swiper-slide" data-swiper-slide-index="8">Slide 9</div>
                <div class="swiper-slide" data-swiper-slide-index="9">Slide 10</div>
              </div>
              <div class="swiper-button-prev swiper-button-white"></div>
              <div class="swiper-button-next swiper-button-white"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.js"></script>
  <script src="../public/plugins/jquery-1.9.1.js"></script>
  <script src="../public/plugins/layer-v3.5.1/layer.js"></script>
  <script src="../public/plugins/echarts.min.js"></script>
  <script src="../public/plugins/swiper-8.3.0/swiper-bundle.min.js"></script>
  <script src="../public/plugins/swiper-8.3.0/TweenMax.min.js"></script>
  <script>
    var swiper = new Swiper(".swiper7", {
      slidesPerView: 3,
      grid: {
        rows: 2,
      },
      spaceBetween: 30,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

    var swiper = new Swiper(".swiper6", {
      keyboard: true,
      virtualTranslate: true,
      on: {
        setTranslate: function () {
          this.$wrapperEl.transition("");
          TweenMax.to(this.$wrapperEl, 1.5, { x: this.translate, ease: Power4.easeOut });
        },
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });

    var swiper = new Swiper(".swiper5", {
      speed: 2000,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

    var swiper = new Swiper(".swiper4", {
      slidesPerView: 3,
      spaceBetween: 30,
      centeredSlides: true,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });

    var mySwiper = new Swiper(".swiper1", {
      initialSlide: 0,
      // 切换方向
      direction: "horizontal",
      // direction: "vertical",

      //在slide之间设置距离（单位px）
      // spaceBetween: 30,

      //设置slider容器能够同时显示的slides数量(carousel模式)
      // slidesPerView: 3,
      // slidesPerView: "auto",

      // 在carousel mode下定义slides的数量多少为一组
      // slidesPerGroup: 3,

      //居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左。
      // centeredSlides: true,

      //启用后，它将使用现代CSS Scroll Snap API。它不支持Swiper的很多功能，但可能会带来更好的性能。
      // cssMode: true,

      //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值
      // mousewheel: true,

      //设置开启键盘来控制Swiper切换。设为true时，能使用键盘的方向键控制slide切换。
      // keyboard: true,

      //启用自由模式功能。可设置具体参数或true来使用默认设置。默认情况下Swiper 每次滑动时只滑动一个Slide，并且会自动贴合Wrapper。开启自由模式后，Swiper 会根据惯性滑动可能不止一格且不会贴合。
      // freeMode: true,

      //设置网格组件的参数来启用网格功能。网格就是同一屏内Slide的多行多列布局。
      // grid: {
      //   rows: 2,
      // },

      // 设置为true 时，鼠标覆盖Swiper 时指针会变成手掌形状，拖动时指针会变成抓手形状。
      grabCursor: true,

      // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"card p-2s"(卡片式)、"creative"（创意性）。
      // effect: "fade",

      // cubeEffect: {
      //   shadow: true,
      //   slideShadows: true,
      //   shadowOffset: 20,
      //   shadowScale: 0.94,
      // },
      // coverflowEffect: {
      //   rotate: 50,
      //   stretch: 0,
      //   depth: 100,
      //   modifier: 1,
      //   slideShadows: true,
      // },

      // 设置为true启动自动切换，并使用默认的切换设置。
      // autoplay: true,
      autoplay: {
        delay: 2500, //自动切换的时间间隔，单位ms,还可以在某个slide上设置单独的停留时间
        //用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰(touch)，拖动，点击pagination等
        disableOnInteraction: false,
      },

      // 设为true开启图片延迟加载默认值，使preloadImages无效。或者设置延迟加载选项。图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。
      // lazy: true,

      // 断点设定，允许为不同的响应断点（屏幕尺寸）设置不同的参数。类似于CSS响应式布局的media only screen and (min-width: 480px)。
      // 只有部分不需要变换布局方式和逻辑结构的参数支持断点设定，如slidesPerView、slidesPerGroup、 spaceBetween、grid.rows、slidesPerGroupSkip、direction，而像loop、effect等则无效。
      // breakpoints: {
      //   640: {
      //     slidesPerView: 2,
      //     spaceBetween: 20,
      //   },
      //   768: {
      //     slidesPerView: 4,
      //     spaceBetween: 40,
      //   },
      //   1024: {
      //     slidesPerView: 5,
      //     spaceBetween: 50,
      //   },
      // },

      //自动高度。设置为 true 时，wrapper 和container 会随着当前slide 的高度而发生变化。
      // autoHeight: true,

      // 开启焦距功能：双击slide会放大/缩小，并且在手机端可双指触摸缩放。可设置缩放选项或设为true使用默认值。
      // zoom: true,

      // 设置为 true 则开启循环(loop)模式。loop模式：会在原本slide 前后复制若干个slide (默认一个)并在合适的时候切换，让Swiper看起来像是循环的。
      // loop: true, // 循环模式选项
      // 在loop 模式下，将用空白slide 填充slide 数量不足的组。需要与  slidesPerGroup 一起使用。
      //  loopFillGroupWithBlank: true,

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        //动态分页
        // dynamicBullets: true,
        //分页进度条
        // type: "progressbar",
        //分页分数表示
        // type: "fraction",
        //自定义分页
        // clickable: true,
        // renderBullet: function (index, className) {
        //   return '<span class="' + className + '">' + (index + 1) + "</span>";
        // },
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
        //滑动前隐藏
        // hide: true,
      },
    });

    var mySwiper = new Swiper(".swiper2", {
      initialSlide: 0,
      direction: "vertical",
      grabCursor: true,
      slidesPerGroup: 7,
      slidesPerView: 7,
      autoplay: true,
      loop: true,
      pagination: {
        el: ".swiper-pagination",
      },
    });

    var mySwiper = new Swiper(".swiper3", {
      initialSlide: 0,
      direction: "vertical",
      slidesPerView: 7,
      grabCursor: true,
      autoplay: true,
      loop: true,
    });
  </script>
  <script>
    var chartDom1 = document.getElementById("main1");
    var chartDom2 = document.getElementById("main2");
    var chartDom3 = document.getElementById("main3");
    var myChart1 = echarts.init(chartDom1);
    var myChart2 = echarts.init(chartDom2);
    var myChart3 = echarts.init(chartDom3);
    var option;

    option = {
      backgroundColor: "transparent",
      // textStyle: { color: "#fff" },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      grid: {
        left: "3%",
        right: "3%",
        bottom: "3%",
        containLabel: true,
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          itemStyle: { color: "#FF8000" },
        },
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          itemStyle: { color: "#FFE500" },
        },
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          itemStyle: { color: "#FFDFBF" },
        },
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          itemStyle: { color: "#C0C0EC" },
        },
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          itemStyle: { color: "#DFD9A7" },
        },
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          itemStyle: { color: "#BFB660" },
        },
      ],
    };

    myChart1.setOption(option);
    myChart2.setOption(option);
    myChart3.setOption(option);

    window.onresize = function () {
      myChart1.resize();
      myChart2.resize();
      myChart3.resize();
    };
  </script>
</html>
复制代码

 

posted @   carol2014  阅读(264)  评论(0)  编辑  收藏  举报
相关博文：
· 轮播图组件swiper之两个轮播图同步
· 回调函数、Promise、Generator 函数和async函数
· P9_组件-swiper和swiper-item的基本用法
· vue中使用轮播插件
· 轮播图，组件自动导入
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示