yesterday i prenseted a website to a customer. I always use Owl carousel since it's responsive. The client how ever hated the previous, next words and wanted to change them to arrows.
昨天我向一位顾客推出了一个网站。我总是使用猫头鹰旋转木马,因为它的响应。客户如何讨厌以前的,接下来的话,并希望将它们改为箭头。
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>');
});
Wel there you have it. You can always add more styling. (First time I use an answer your own question hope this is the right place/way)
在那里,你有它。您可以随时添加更多样式。 (我第一次使用答案你自己的问题希望这是正确的地方/方式)
4 个解决方案
#1
34
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>"]
});
#2
15
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>"
]
#3
4
This is how you do it in your $(document).ready()
function with FontAwesome Icons:
这是你在带有FontAwesome图标的$(document).ready()函数中的方法:
$( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
$( ".owl-next").html('<i class="fa fa-chevron-right"></i>');
#4
4
The following code works for me on 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>"]
});
#1
34
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>"]
});
#2
15
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>"
]
#3
4
This is how you do it in your $(document).ready()
function with FontAwesome Icons:
这是你在带有FontAwesome图标的$(document).ready()函数中的方法:
$( ".owl-prev").html('<i class="fa fa-chevron-left"></i>');
$( ".owl-next").html('<i class="fa fa-chevron-right"></i>');
#4
4
The following code works for me on 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>"]
});