前端用过 Swiper 的大神，求助 swiper-slide 在 for 循环中的使用

[elsagong]

本人后端用的 Python, 想在页面中添加轮播图效果，然后 swiper 的文档没有swiper-slide for 循环对象的用法，这里面的loopedSlides并没有让swipe-slide for 循环 https://www.swiper.com.cn/api/loop/25.html，里面明明还是固定写死的<div class="swiper-slide">slider1</div> slider2,3,4,5 等等.

实在是 Google 不到，我已经不知道怎么搜索了，求助各位大神，非常感谢！！！

ps: 我知道vue.js中vue-awesome-swiper的 for 循环用法如<swiper-slide v-for="(page, index) of pages" :key="index">, 但是这个项目前后盾没有分离，无法用到vue.js,

再次感谢！(第一此用 V2EX 发帖，原谅我不知道怎么上传图😂)

我确定有引入 swiper 的 js 文件，这是原 html 的部分代码： https://pastebin.com/pMEgymrK
这是部分渲染后的 html，https://pastebin.com/U8SLANEX

[leemove]

能力有限 实在是看不懂

[channg]

后端渲染出来不就行了吗？

[crs0910]

先遍历数据生成 dom 结构，然后插到你的容器里，再调用 swiper。另外，vue 普通页面也能用。

[elsagong]

@crs0910 感谢回复，vue 我只会用前后端分离的😂普通页面不知道咋用。。。我是 Python 后端狗，后端数据已经准确无误了，HTML 里遍历数据不用 swiper 时也没有问题，用 swiper 就不知道为啥页面上的轮播图无效，还是我之前的那种图片列表，我把 HTML 文件贴在 pastebin 链接里了，求大神指点迷津，https://pastebin.com/pMEgymrK

[elsagong]

@channg 后端渲染？😂你在逗我吗？我后端的数据已经准确无误了

[elsagong]

@leemove 还是感谢你的回复🌹

[crs0910]

贴你渲染后的 html，另外你引用 swiper 的 js 文件了么？ 自己 debug 的思路可以用最小可用法和二分法。

[shaojz2005]

后端用循环把 swiper 需要的 html 结构显示出来。

[lieqishi]

@crs0910 刚刚也想说。没看的有引用 JS，不知道会不会在{% extends "base.html" %}输出？哈哈。

[elsagong]

@lieqishi 我有加这一行哦 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>，真的引用了，我感觉是我那一坨 swiper-slide 没放对地方，无论怎么改，就是不轮播😂

[elsagong]

嗨，渲染后的 html，我删除了部分，只留了 swiper 的部分，在这个链接里 https://pastebin.com/U8SLANEX 我确定引用了 swiper 的 js 文件，我先去搜搜什么是最小可用法和二分法，前端真的比后端难啊😂

[elsagong]

@shaojz2005 后端的数据我确定是准确无误的，就是 swiper 中的 swiper-slide 如何在 for 循环中运用，难倒我了

[shaojz2005]

看你的代码已经循环了，大致上看起来没有错，你可以看看浏览器 console 有没有输出什么错误

[wuyao]

把 jquery 和 swiper 的 js 放到 header 里面，初始化 swiper，放到 dom 结构加载完成的回调里面