我正在使用Owl Carousel 2jquery插件,并试图将导航按钮包含在幻灯片中。我的html很简单:
<div class="owl-carousel">
<div>
<p>Slide 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>
<div class="customNavigation">
<a class="prev">Previous</a>
<a class="next">Next</a>
</div>
</div>
<div>
<p>Slide 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>
<div class="customNavigation">
<a class="prev">Previous</a>
<a class="next">Next</a>
</div>
</div>
<div>
<p>Slide 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>
<div class="customNavigation">
<a class="prev">Previous</a>
<a class="next">Next</a>
</div>
</div>
然后我这样调用插件:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
items: 1,
})
});
现在我只需要获得链接就可以使用插件了!任何帮助都非常感谢
希望这对你的伴侣有所帮助。
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
});
owl = $('.owl-carousel').owlCarousel();
$(".prev").click(function () {
owl.trigger('prev.owl.carousel');
});
$(".next").click(function () {
owl.trigger('next.owl.carousel');
});
Fiddle here