как я могу использовать любой owl.carousel в моем шаблоне html?
это мой источник. я повторяю треску, но не работает:
...
<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
}
}
});
});