一页中的多猫头鹰轮播具有不同的设置 [英] Mutlple owl Carousel in one page with different setting
本文介绍了一页中的多猫头鹰轮播具有不同的设置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有两个owlCarousel可以在一页上完美地工作,但是我想更改每个轮播上的默认设置.一旦我更改了应用于两个轮播的效果.
There are two owlCarousel working perfectly in one page but I want to change the default setting on each carousel. Once I changed the effects applying to both carousel.
我已经尝试过的东西
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel1({
navigation : false,
pagination : true,
items : 1
});
});
</script>
<script>
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
</script>
我想为每个转盘更改以下设置
I want to change the below settings for each carousle
$.fn.owlCarousel.options = {
items : 4,
itemsCustom : false,
itemsDesktop : [1199, 1],
itemsDesktopSmall : [979, 1],
itemsTablet : [768, 1],
itemsTabletSmall : false,
itemsMobile : [479, 1],
singleItem : false,
itemsScaleUp : false
}
推荐答案
如果您要为每个div分配变量,则要定位,然后分配选项,例如下面的示例;
If you assign a variable to each of the div's you wish to target and then assign the options, example below;
$(document).ready(function() {
var one = $("#one");
var two = $("#two");
one.owlCarousel({
navigation : false, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
mouseDrag:false,
touchDrag:false
});
two.owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
mouseDrag:false,
touchDrag:false,
navigationText : false,
rewindSpeed : 300,
});
});
这篇关于一页中的多猫头鹰轮播具有不同的设置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文