簡體   English   中英

自動播放不止一項?

[英]Autoplay more than one item?

如果輪播顯示 4 個項目,則設置自動播放替換為 4 個新項目。 這里的demo如果點擊item分頁,就可以看到效果。 但是如果我們設置自動播放,那么只更改一項?

$(".owlcarousel").owlCarousel({
    autoplay: true,
    margin: 10,
    nav: true,
    loop: true,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 5
        }
    }
});

php / html 代碼 (cakephp)

    <?php $brands = $this -> requestAction('/brands'); ?>
<div class="featured-brands">
    <div class="container">
        <div class="col-xs-12">
            <div class="owlcarousel">
            <?php foreach ($brands as $brand) {?>
                <div class="item"><?php echo $this->Html->image('brands/'.$brand['Brand']['id'].'/'.$brand['Brand']['image'],array('class'=>'img-responsive')); ?></div>
            <?php } ?>
            </div>
        </div>
    </div>
</div>

我將slideBy設置為您的項目數:

$(".owlcarousel").owlCarousel({
    autoplay: true,
    margin: 10,
    nav: true,
    loop: true,
    responsive: {
        0: {
            items: 1,
            slideBy: 1
        },
        600: {
            items: 3,
            slideBy: 3
        },
        1000: {
            items: 5,
            slideBy: 5
        }
    }
});

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#slideby

在 Owl Carousel 2 中,您可以使用選項: slideBy:'page'在自動播放(或導航按鈕)上滑動整個“頁面”。

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM