html - 如何使用任何owl.carousel?
问题描述
如何在我的模板 html 中使用任何 owl.carousel ?
这是我的来源。我重复鳕鱼但不起作用:
...
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
</div>
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
</div>
...这是我的来源:[ https://drive.google.com/file/d/1NhADd8J0ARRzRAutfs5u-_zrYqdg5nS3/view?usp=sharing][1]
解决方案
看看这个:https ://jsfiddle.net/97j9gmtm/2/你需要把“owl-carousel”类放在你的轮播上,独立的一些。
$(document).ready(function(){
$('.owl-one').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
$('.owl-two').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
$('.owl-three').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
});
或者,如果它们都将具有相同的设置,您可以使用:
$(".owl-carousel").each(function(){
$(this).owlCarousel({
loop:true,
margin:10,
nav:true,
navText: ['next','prev'],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
});
推荐阅读
- java - 如何获取从昨天到现在的 created_at 时间的对象列表
- django - “事件”对象没有属性“获取”
- sql - Redshift SQL用逗号分隔一个包含两个字段的字段
- python - ModuleNotFoundError:没有名为“bootstrap4”的模块
- php - 如果有可用的地方,则显示其他图像
- java - 将 javaFX (.jar) 文件导入 Netbeans Maven 项目
- python - 减少字典python上的函数
- php - php composer 使用自定义供应商名称安装私有包
- c# - “反射”:带有“参数”的方法不会初始化我的自定义对象
- opencv - 在opencv路径上,haar cascade文件夹不可见