移动端多个swiper轮播的实现

不论是移动端还是pc端,都可以使用:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <title>标题</title>
    <!-- 通用的样式:主要是html的font-size:100px -->
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/swiper.css" />
    <script src="./js/rem.js"></script>
    <script src="./js/swiper.js"></script>
    <style>
      .environment_item {
        width: 80%;
        margin: 0 auto;
        border-radius: 0.2rem;
      }
      .swiper-container {
        width: 100%;
        /* 图片的宽*高=234*153:此处一定要使用css的动态计算容器的高度 */
        height: calc(80vw * 153 / 234);
        border-radius: 0.2rem;
      }
      .swiper-wrapper {
        width: 100%;
        border-radius: 0.2rem;
        height: 100%;
      }
      .swiper-slide {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
      .swiper-slide img {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <ul id="work_environment">
        <li class="environment_item">
          <h3 class="title">办公环境</h3>
          <div class="swiper-container en-1">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./img/work_enviroment01.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment02.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment03.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment04.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment05.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment06.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment07.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/work_enviroment08.png" alt="" />
              </div>
            </div>
          </div>
        </li>
        <li class="environment_item">
          <h3 class="title">健身项目</h3>
          <div class="swiper-container en-2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./img/running01.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/running02.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/running03.png" alt="" />
              </div>
            </div>
          </div>
        </li>
        <li class="environment_item">
          <h3 class="title">文体活动</h3>
          <div class="swiper-container en-3">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./img/recreation01.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/recreation02.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/recreation03.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./img/recreation04.png" alt="" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <script>
      //动态创建多个独立的Swiper对象,否则Swiper对象就只有一个,其它轮播会没有作用
      for (let i = 1; i <= 3; i++) {
        let str = ".en-" + i;
        new Swiper(str, {
          direction: "horizontal",
          loop: true,
          autoplay: {
            delay: 2000,
            disableOnInteraction: false,
          },
        });
      }
    </script>
  </body>
</html>

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页