您好,我一直在尝试添加猫头鹰轮播滑块,但它的上一个和下一个不起作用
我的代码是这样的
<div class="magazine-carousel owl-theme">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="navigation">
<div class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
<div class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
</div>
现在猫头鹰轮播脚本是这样的
$('.magazine-carousel').owlCarousel({
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:false,
loop:true,
nav:true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:6
},
1600:{
items:8
},
1900:{
items:10
}
}
})
请查看此链接
$(document).ready(function () {
$('.magazine-carousel').owlCarousel({
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true,
loop:true,
nav:true,
navigation:true,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:6
},
1600:{
items:8
},
1900:{
items:10
}
}
});
$('.magazine-carousel').trigger('owl.play',2000);
});
您需要
在模板文件中添加轮播 Js 和 Css 文件。
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
经验:
$('.owl-theme').owlCarousel({
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:false,
items:1,
loop:true,
navText:['<i aria-hidden="true" class="fa fa-caret-left"></i>','<i aria-hidden="true" class="fa fa-caret-right"></i>'],
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:6
},
1600:{
items:8
},
1900:{
items:10
}
}
})
.prev,
.next{
font-size:100px;
}
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div class="magazine-carousel owl-theme" id="slider">
<div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
<div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
<div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
<div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
</div>
<div class="navigation">
<div class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
<div class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
</div>