自动播放多个项目?
Autoplay more than one item?
如果轮播显示 4 个项目,设置自动播放替换为 4 个新项目。这里demo点击item pagination,可以看到效果。但是如果我们设置自动播放,那么只改变一项?
$(".owlcarousel").owlCarousel({
autoplay: true,
margin: 10,
nav: true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
});
php / html代码(蛋糕php)
<?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 轮播 2 中,您使用选项:slideBy:'page'
在自动播放(或导航按钮)上滑动整个 "page"。
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
如果轮播显示 4 个项目,设置自动播放替换为 4 个新项目。这里demo点击item pagination,可以看到效果。但是如果我们设置自动播放,那么只改变一项?
$(".owlcarousel").owlCarousel({
autoplay: true,
margin: 10,
nav: true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
});
php / html代码(蛋糕php)
<?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 轮播 2 中,您使用选项:slideBy:'page'
在自动播放(或导航按钮)上滑动整个 "page"。
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html