淘宝商城详情页轻量级无缝轮播代码

淘宝商城详情页轻量级无缝轮播代码

淘宝商品详情的轮播,无缝轮播,兼容视频和图片移动端,PC均适用,没有依赖也没有初始样式(需要自己添加样式)。

使用方法
HTML结构代码

1
2
3
4
5
6
<div >
 <div>Hi, I'm slide 1</div>
 <div>Hi, I'
m slide 2</div>
 <div>Hi, I'm slide 3</div>
 <div>Hi, I'
m slide 4</div>
</div>

JS代码
一些(可选)设置,你可以通过将对象作为参数传递更改。默认值如下所示。

1
2
3
4
5
6
7
8
9
10
new Siema({
 selector: '.siema',
 duration: 200,
 easing: 'ease-out',
 perPage: 1,
 startIndex: 0,
 draggable: true,
 threshold: 20,
 loop: false,
});
  • selector :(字符串或DOM元素)指定选择器
  • duration :(数字)滑动转换持续时间(以ms为单位)
  • easing :(字符串)与CSS中的transition-timing-function相同
  • perPage :(数字)要显示的幻灯片的数量
  • startIndex : (数字)起始滑块的索引(从零开始)
  • draggable :(布尔)使用拖动和触摸滑动
  • threshold :(数字)触摸和鼠标拖动阈值(以px为单位)
  • loop :(布尔)循环幻灯片

API

  • next() :转到下一张幻灯片
  • prev() :转到上一张幻灯片
  • goTo(index) :转到特定幻灯片
  • currentSlide :当前活动幻灯片的索引(只读)
当前内容只有登录了才能查看,如果您已经注册,请登录
4

发表评论