如何制作带箭头的猫头鹰旋转木马而不是下一个

时间:2022-11-04 08:34:29

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>"]
});