Swipe轮播模块

Swipe模块是轮播图和旋转木马模块,可以实现文本、图片、视频、iframe等媒体内容的轮播呈现。支持拖拽滚动,也支持点击按钮切换滑块;支持异步获取内容,支持插入和删除滑块;响应滑块的变化和外容器的变化,进而自动修正滑块之间的关系。

简单使用

本模块需要遵循“父容器”=>“项目容器”=>“内容”的结构关系,可以ul/ol+li的形式构建节点。

在本例中第一层div是父容器,需将Masonry实例应用在这个容器上;section为项目容器,是用来计算和赋值grid-row样式的节点,用户的所有内容均需要放在section标签内。

  • 输出
  • HTML
    • 子元素1
    • 子元素2
    • 子元素3
    • 子元素4
    • 子元素5
    • 子元素6
    • 子元素7
    • 子元素8
    • 子元素9
    • 子元素10
    • 子元素11
    • 子元素12
  •                 
                    
                

或以new示例的方式运行模块。

  • 输出
  • HTML
  • JS
    • 子元素1
    • 子元素2
    • 子元素3
    • 子元素4
    • 子元素5
    • 子元素6
    • 子元素7
    • 子元素8
    • 子元素9
    • 子元素10
    • 子元素11
    • 子元素12
  •                 
                    
                
  •                 
                        new ax.Swipe('#demo01',{
                            //
                        })