问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何动态创建多嵌套swiper？

头像
sz861128
    191356121

    我想做一个嵌套 swiper，外部图片可以横向滚动，然后每页由于图片过长可以内容滚动

    我的代码如下：

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <script src="js/jquery.min.js"></script>

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper my-swiper-wrapper"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <!-- Swiper JS -->
  <script src="js/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var array = [
      "images/a.jpg",
      "images/b.jpg",
      "images/c.jpg",
      "images/d.jpg",
      "images/e.jpg",
      "images/f.jpg",
      "images/g.jpg"
    ]
    var swiper = new Swiper(".mySwiper", {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    })

    var ele = ""
    $.each(array, (index, element) => {
      ele += `<div class="swiper-slide">
        <div class="swiper inSwiper${index}">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="${element}" />
            </div>
          </div>
        </div>
        <div class="swiper-scrollbar swiper-scrollbar${index}"></div>
      </div>`

      window["swiper" + index] = new Swiper(".inSwiper" + index, {
        direction: "vertical",
        slidesPerView: "auto",
        freeMode: true,
        scrollbar: {
          el: ".swiper-scrollbar" + index,
        },
        mousewheel: true
      })
    })
    $('.my-swiper-wrapper').html(ele)

    // var swiper = new Swiper(".mySwiper", {
    //   direction: "vertical",
    //   slidesPerView: "auto",
    //   freeMode: true,
    //   scrollbar: {
    //     el: ".swiper-scrollbar",
    //   },
    //   mousewheel: true,
    // });
  </script>
</body>

</html>

    根据数组创建 dom 后请问如何创建每帧图片单独的 js 呢？
    通过百度我得知可以通过 window[] 的形式动态创建变量，但是代码并未成功
    还望指点，谢谢！

    javascriptswiper.js
    阅读 2.3k
    1 个回答
    得票最新
    头像
    玛拉_以琳
      8.7k41542
      ✓ 已被采纳

      通过设置外部 Swiper 的参数 direction: 'horizontal' 来实现图片的横向滚动，同时您需要在每张图片的 div 中再插入一层 Swiper，内部 Swiper 的参数 direction: 'vertical' 设置为垂直滚动，就可以实现内部滚动。以下是示例代码：

      <!-- 外部swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-container inner-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="image1.jpg" /></div>
          <div class="swiper-slide"><img src="image2.jpg" /></div>
          <div class="swiper-slide"><img src="image3.jpg" /></div>
          <!-- 这里可以添加更多的图片 -->
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-container inner-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="image4.jpg" /></div>
          <div class="swiper-slide"><img src="image5.jpg" /></div>
          <div class="swiper-slide"><img src="image6.jpg" /></div>
          <!-- 这里可以添加更多的图片 -->
        </div>
      </div>
    </div>
    <!-- 这里可以添加更多的 slide -->
  </div>
</div>
      // 初始化外部的swiper
var swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  // 这里可以添加更多的自定义配置
});

// 初始化内部的swiper
var innerSwipers = document.querySelectorAll('.inner-swiper');
innerSwipers.forEach(function (innerSwiper) {
  new Swiper(innerSwiper, {
    direction: 'vertical',
    // 这里可以添加更多的自定义配置
  });
});

      以上代码仅供参考，具体实现根据您的实际情况和需求进行修改。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题