Javascript 如何用箭头而不是下一个上一个制作猫头鹰旋转木马
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31605932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a owl carousel with arrows instead of next previous
提问by user3806549
Yesterday I presented a website to a customer. I always use Owl carousel since it's responsive. The client, however, hated the previous, next words, and wanted to change them to arrows.
昨天我向客户展示了一个网站。我总是使用 Owl carousel，因为它反应灵敏。然而，客户讨厌上一个和下一个词，并想将它们更改为箭头。
So hence I updated my script. js file. It was very easy to do and I wanted to share it.
因此，我更新了我的脚本。js 文件。这很容易做到，我想分享它。
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
nav:true,
responsive:{
...
})
$( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
$( ".owl-next").html('<i class="fa fa-chevron-right"></i>');
});
Well there you have it. You can always add more styling. (First time I use an answer to your own question hope this is the right place/way)
那么你有它。您可以随时添加更多样式。（我第一次使用你自己问题的答案希望这是正确的地方/方式）
采纳答案by user3806549
This is how you do it in your $(document).ready()function with FontAwesome Icons:
这是您$(document).ready()使用 FontAwesome Icons在函数中执行此操作的方式：
$( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
$( ".owl-next").html('<i class="fa fa-chevron-right"></i>');
回答by Rubel Hossain
If you're using Owl Carousel 2, then you should use the following:
如果您正在使用Owl Carousel 2，那么您应该使用以下内容：
$(".category-wrapper").owlCarousel({
items : 4,
loop : true,
margin : 30,
nav : true,
smartSpeed :900,
navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
});
回答by Pandy
A note for others who may be using Owl Carousel v 1.3.2:
给可能使用 Owl Carousel v 1.3.2 的其他人的注意事项：
You can replace the navigation text in the settings where you're enabling the navigation.
您可以在启用导航的设置中替换导航文本。
navigation:true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
回答by Code Spy
Complete tutorialhere
完整教程在这里
Demolink
演示链接
JavaScript
JavaScript
$('.owl-carousel').owlCarousel({
margin: 10,
nav: true,
navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
});
CSS Style for navigation
用于导航的 CSS 样式
.owl-carousel .nav-btn{
height: 47px;
position: absolute;
width: 26px;
cursor: pointer;
top: 100px !important;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;
}
.owl-carousel .prev-slide{
background: url(nav-icon.png) no-repeat scroll 0 0;
left: -33px;
}
.owl-carousel .next-slide{
background: url(nav-icon.png) no-repeat scroll -24px 0px;
right: -33px;
}
.owl-carousel .prev-slide:hover{
background-position: 0px -53px;
}
.owl-carousel .next-slide:hover{
background-position: -24px -53px;
}
回答by Sword I
The following code works for me on owl carousel.
以下代码适用于owl carousel。
https://github.com/OwlFonk/OwlCarousel
https://github.com/OwlFonk/OwlCarousel
$(".owl-carousel").owlCarousel({
items: 1,
autoplay: true,
navigation: true,
navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
For OwlCarousel2
对于OwlCarousel2
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
$(".owl-carousel").owlCarousel({
items: 1,
autoplay: true,
nav: true,
navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
回答by Tariqul_Islam
If you using latest Owl Carousel 2 version. You can replace the Navigation text by fontawesome icon. Code is below.
如果您使用最新的 Owl Carousel 2 版本。您可以用 fontawesome 图标替换导航文本。代码如下。
$('.your-class').owlCarousel({
loop: true,
items: 1, // Select Item Number
autoplay:true,
dots: false,
nav: true,
navText: ["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa-long-arrow-right'></i>"],
});
