# <stl:swiper> 轮播滑块

<stl:swiper
  direction="方向"
  width="宽度"
  height="高度"
  isPagination="是否显示翻页控件"
  isNavigation="是否显示左右切换控件"
  isScrollbar="是否显示拖动控件"
  color="控件颜色"
>
</stl:swiper>

版本要求

<stl:swiper> 标签需要使用 SSCMS 7.1.2 以上版本。

# 说明

通过 <stl:swiper> 标签在模板中实现触摸轮播滑块效果。

可以将<stl:contents>以及<stl:channels>等标签作为 <stl:swiper> 的子标签,显示轮播图文,也可以将任意 HTML 代码作为 <stl:swiper> 的子标签,系统将自动解析内部代码并轮播显示。

<stl:swiper> 标签底层采用 SwiperJS (opens new window),可以很好的适配 PC 与手机浏览器,需要兼容 IE8 等低版本浏览器时请谨慎使用此标签。

# 属性

属性 说明
direction 轮播显示方向
width 宽度
height 高度
isPagination 是否显示翻页控件
isNavigation 是否显示左右切换控件
isScrollbar 是否显示拖动控件
color 控件颜色

# direction - 方向

轮播显示方向,默认为 horizontal 水平方向显示。

  • "vertical" 垂直
  • "horizontal" 水平

# width - 宽度

轮播滑块的宽度,默认为 500px

# height - 高度

轮播滑块的高度,默认为 500px

# isPagination - 是否显示翻页控件

是否显示翻页控件,默认为 true

# isNavigation - 是否显示左右切换控件

是否显示左右切换控件,默认为 true

# isScrollbar - 是否显示拖动控件

是否显示拖动控件,默认为 false

# color - 控件颜色

设置翻页、左右切换以及拖动控件的颜色。

# 示例

# 显示由三个 div 组成的轮播

下面的例子显示有三个 div 组成的轮播滑块。

<stl:swiper>
  <div>区域1</div>
  <div>区域2</div>
  <div>区域3</div>
</stl:swiper>

# 显示当前内容的图片轮播

下面的例子在内容模板中显示当前内容的图片轮播,同时设置控件颜色以及轮播尺寸。

<stl:swiper color="#cf001c" width="100%" height="500">
  <stl:each type="imageUrl">
    <div style="text-align: center;">
      <stl:image style="max-height: 500px;width: auto;"></stl:image>
    </div>
  </stl:each>
</stl:swiper>

内容编辑界面:

图片轮播最终效果界面:

上次更新: 2022/5/4 下午4:21:42