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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2296 天前的主题，其中的信息可能已经有所发展或是发生改变。

本人后端用的 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 发帖，原谅我不知道怎么上传图😂)

第 1 条附言 · 2018-08-30 12:52:12 +08:00

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

14 条回复 • 2018-09-20 10:38:33 +08:00

leemove

2018-08-29 20:59:34 +08:00

能力有限实在是看不懂

channg

2018-08-29 22:04:49 +08:00

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

crs0910

2018-08-29 22:19:43 +08:00 via Android

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

elsagong

2018-08-29 23:48:03 +08:00

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

elsagong

2018-08-29 23:49:14 +08:00

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

elsagong

2018-08-29 23:49:34 +08:00

@leemove 还是感谢你的回复🌹

crs0910

2018-08-30 01:07:13 +08:00 via Android

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

shaojz2005

2018-08-30 09:30:11 +08:00

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

lieqishi

2018-08-30 09:41:07 +08:00

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

elsagong

2018-08-30 12:35:30 +08:00

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

elsagong

2018-08-30 12:45:10 +08:00

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

elsagong

2018-08-30 12:47:58 +08:00

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

shaojz2005

2018-08-30 17:06:33 +08:00

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

wuyao

2018-09-20 10:38:33 +08:00

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