javascript - 自动播放多个项目?

标签 javascript jquery owl-carousel owl-carousel-2

如果轮播显示 4 个项目,设置自动播放替换为 4 个新项目。这里是demo如果你点击项目分页,你可以看到效果。但是如果我们设置自动播放,那么只改变一个项目?

$(".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

关于javascript - 自动播放多个项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30195858/

相关文章:

javascript - 使用 Javascript 的 Flowtype 解释泛型

javascript - 以编程方式将文件从 node.js 上传到另一个 Web 服务器

javascript - .Net Core 单选按钮总是返回 false

jquery - 移动 iOS 上 Owl-Carousel 图像上的 Bootstrap Modals

javascript - 如何在悬停时不停止 Owl Carousel ?

javascript - 文档就绪表单提交和浏览器历史记录

javascript - 想要为嵌套创建正则表达式以转义嵌套括号

javascript - 制作一个简单的实时图表

Jquery和搜索表单问题

html - 在 div 中居中图像的中间部分