幻灯片案例

‹ ›

Ut egestas tempor magna, sed rutrum felis fermentum quis. Aliquam congue ultricies elit, sit amet tempor tortor tempor nec.

Ut egestas tempor magna, sed rutrum felis fermentum quis. Aliquam congue ultricies elit, sit amet tempor tortor tempor nec.

This super beast eats fresh human flesh. She claws picking his nose, uttering at the same contented purring, and tooth picks out of leftover meat.

‹ ›

‹ ›

自定义组件

    <div class="carousel" data-role="carousel">
        <div class="slides">
            <div class="slide image" id="slide1">
                <img />
                <div class="description">
                    Description text here...
                </div>
            </div>
 
            <div class="slide mixed" id="slide2">
                <img />
                <div class="description">
                    Description text here...
                </div>
            </div>
            ...
        </div>
 
        <span class="control left">‹</span>
        <span class="control right">›</span>
 
    </div>

你可以手动通过width 和 height 设置幻灯片大小。

使用幻灯片，你需要在你页面的head添加carousel.js ，同时在幻灯片对像上添加属性data-role="carousel"。 设置特定的参数，例如：direction, duration, period, 等等。 给幻灯片设置特定的参数，需要使用属性data-param-* 给幻灯片对象添加自定义样式。

参数:

• auto - 自动播放(默认值: true)
• period - 播放速度 (默认值: 6000)
• duration - 持续时间 (默认值: 1000)
• effect - 动画效果，有效的值: slide, fade, slowdown, switch (默认值: slide)
• direction - 动画方向，有效值: left, right (默认值: left)
• markers - on|off 幻灯片的朦板 (默认值: on)
• arrows - on|off 滑动箭头 (默认值: on)
• stop - on|off 鼠标悬停时动画 (默认值: on)

    <div class="carousel" data-role="carousel" data-param-auto="false" data-param-effect="fade">
        ...
    </div>

Javascript

需要在页面头部加载carousel.js