V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
elsagong
V2EX  ›  JavaScript

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

  •  
  •   elsagong · 2018-08-29 17:27:42 +08:00 · 5733 次点击
    这是一个创建于 1407 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本人后端用的 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.jsvue-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
        1
    leemove  
       2018-08-29 20:59:34 +08:00
    能力有限 实在是看不懂
    channg
        2
    channg  
       2018-08-29 22:04:49 +08:00
    后端渲染出来不就行了吗?
    crs0910
        3
    crs0910  
       2018-08-29 22:19:43 +08:00 via Android
    先遍历数据生成 dom 结构,然后插到你的容器里,再调用 swiper。另外,vue 普通页面也能用。
    elsagong
        4
    elsagong  
    OP
       2018-08-29 23:48:03 +08:00
    @crs0910 感谢回复,vue 我只会用前后端分离的😂普通页面不知道咋用。。。我是 Python 后端狗,后端数据已经准确无误了,HTML 里遍历数据不用 swiper 时也没有问题,用 swiper 就不知道为啥页面上的轮播图无效,还是我之前的那种图片列表,我把 HTML 文件贴在 pastebin 链接里了,求大神指点迷津,https://pastebin.com/pMEgymrK
    elsagong
        5
    elsagong  
    OP
       2018-08-29 23:49:14 +08:00
    @channg 后端渲染?😂你在逗我吗?我后端的数据已经准确无误了
    elsagong
        6
    elsagong  
    OP
       2018-08-29 23:49:34 +08:00
    @leemove 还是感谢你的回复🌹
    crs0910
        7
    crs0910  
       2018-08-30 01:07:13 +08:00 via Android
    贴你渲染后的 html,另外你引用 swiper 的 js 文件了么? 自己 debug 的思路可以用最小可用法和二分法。
    shaojz2005
        8
    shaojz2005  
       2018-08-30 09:30:11 +08:00
    后端用循环把 swiper 需要的 html 结构显示出来。
    lieqishi
        9
    lieqishi  
       2018-08-30 09:41:07 +08:00
    @crs0910 刚刚也想说。没看的有引用 JS,不知道会不会在{% extends "base.html" %}输出?哈哈。
    elsagong
        10
    elsagong  
    OP
       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
        11
    elsagong  
    OP
       2018-08-30 12:45:10 +08:00
    嗨,渲染后的 html,我删除了部分,只留了 swiper 的部分,在这个链接里 https://pastebin.com/U8SLANEX 我确定引用了 swiper 的 js 文件,我先去搜搜什么是最小可用法和二分法,前端真的比后端难啊😂
    elsagong
        12
    elsagong  
    OP
       2018-08-30 12:47:58 +08:00
    @shaojz2005 后端的数据我确定是准确无误的,就是 swiper 中的 swiper-slide 如何在 for 循环中运用,难倒我了
    shaojz2005
        13
    shaojz2005  
       2018-08-30 17:06:33 +08:00
    看你的代码已经循环了,大致上看起来没有错,你可以看看浏览器 console 有没有输出什么错误
    wuyao
        14
    wuyao  
       2018-09-20 10:38:33 +08:00
    把 jquery 和 swiper 的 js 放到 header 里面,初始化 swiper,放到 dom 结构加载完成的回调里面
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1111 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:30 · PVG 06:30 · LAX 15:30 · JFK 18:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.