Carousel 示例

Carousel - 旋转木马基本示例

设置 step/size/viewSize 的情况

  • step 为步长，即每切换一次，移动多少个 panels，而 viewSize 为滑动窗口的大小，一般为 panels 的整数倍。
  • viewSize 默认是自动计算，但有时设置不准确，特别是 panels 和容器设置了乱七八糟的 padding 时。所以这是需要手工指定 viewSize。
  • size 为视窗内有多少个 panels，渲染时会进行克隆。

旋转木马使用如下样式

.carousel{
    overflow: hidden;
    margin: 0 auto;
}

.carousel .carousel-content{
    height: 90px;
}

.carousel ul{
    margin: 0;
    padding: 0;
}

.carousel .carousel-content li{
    list-style: none;
}

.carousel .carousel-content li .text{
    height: 90px;
    width: 100px;
    text-align: center;
    line-height: 90px;
    font-size: 60px;
    background: gray;
    color: #fff;
    font-weight: bold;
}

.carousel .ui-switchable-nav{
    height: 10px;
    margin-top: 10px;
    text-align: center;
}

.carousel .ui-switchable-trigger{
    display: inline-block;
    height: 10px;
    vertical-align: top;
    list-style: none;
    width: 30px;
    margin-left: 10px;
    background: gray;
    font-size: 0;
}

.carousel .ui-switchable-active{
    background: red;
}

size 大于 1 的情况

<div id="carousel-01" class="carousel" style="width: 300px;">
    <div class="carousel-content">
        <ul data-role="content">
            <li><div class="text">01</div></li>
            <li><div class="text">02</div></li>
            <li><div class="text">03</div></li>
            <li><div class="text">04</div></li>
            <li><div class="text">05</div></li>
        </ul>
    </div>

    <ul data-role="nav"></ul>
</div>
var Carousel = FNX.include('switchable/carousel');

new Carousel({
    effect: 'scrollx',
    interval: 1000,
    duration: 1000,
    autoplay: true,
    size: 3,
    element: '#carousel-01'
});

step 大于 1 的情况

<div id="carousel-02" class="carousel" style="width: 600px;">
    <div class="carousel-content">
        <ul data-role="content">
            <li><div class="text">01</div></li>
            <li><div class="text">02</div></li>
            <li><div class="text">03</div></li>
            <li><div class="text">04</div></li>
            <li><div class="text">05</div></li>
            <li><div class="text">06</div></li>
            <li><div class="text">07</div></li>
            <li><div class="text">08</div></li>
            <li><div class="text">09</div></li>
            <li><div class="text">10</div></li>
            <li><div class="text">11</div></li>
            <li><div class="text">12</div></li>
        </ul>
    </div>

    <ul data-role="nav"></ul>
</div>
var Carousel = FNX.include('switchable/carousel');

new Carousel({
    effect: 'scrollx',
    interval: 2000,
    autoplay: true,
    size: 6,
    step: 2,
    element: '#carousel-02'
});