Swiper 的轮播图对象(标题，图标，链接，按钮)可以是 for 循环对象吗

[elsagong]

想在页面中添加轮播图效果，然而 swiper 的文档没有 swiper-slide for 循环对象 的用法，翻遍文档中的案例都是固定的 slied1,2,3,4,5 的值

<div class="swiper-slide">slide1</div>
<div class="swiper-slide">slide2</div>
<div class="swiper-slide">slide3</div>
<div class="swiper-slide">slide4</div>
<div class="swiper-slide">slide5</div>

我想知道类似于 vue.js 中vue-awesome-swiper 的 v-for 用法如：

<swiper-slide v-for="(page, index) of pages" :key="index">

这是部分原 html： https://pastebin.com/pMEgymrK 这是部分渲染后的 html： https://pastebin.com/U8SLANEX

[paloalto]

为什么不在模板里循环输出？你前端用的什么模板？是 python 的 mako 吗？去搜对应的模板循环语法就可以了。

[paloalto]

% for item in list:
<div class="swiper-slide">item-${row}</div>
% endfor

[paloalto]

http://docs.makotemplates.org/en/latest/syntax.html#control-structures

[elsagong]

@paloalto 前端用的 jquery，bootstrap，scss，不是 mako 哦，还是感谢你

[doommm]

`v-for`列表渲染`swiper-item`，然后外面用一个 container 包起来，这是用 vue 包装过后的用法。
用 jQuery 的话思路应该也差不多吧，遍历列表创建`swiper-item`对应的 dom 节点，然后用`swiper`加载？
稍微看一看`vue-awesome-swiper`的源码应该就明白了

[paloalto]

@elsagong #4 你后端数据怎么传给前端的？是后端直接渲染前端的模板吗？还是只在模板的 script 里插入数据？

[xusongfu5050]

可以，我就这么干过，我使用的 VUE,直接 v-for

[elsagong]

@paloalto 我前后端没有分离.....

[elsagong]

@xusongfu5050 我知道 vue 可以用 v-for，我现在用的是 swiper，不是 vue-awesome-swiper，不是 vue.........所以不能用 v-for。

[xusongfu5050]

@elsagong 我用的也是 swiper,不是 vue-awesome-swiper，如果你没有用 vue,你就用原生 js 循环生成<div class="swiper-slide">slide1</div>,然后 appendTo 父元素应该就可以了吧。