Question

I have successfully integrated Owl Carousel and some my desired settings are active

However, the navigation and margin and padding sections aren't working...

$('.owl-carousel').owlCarousel({
    items : 3, 
    nav: true,
    navText: ['<i class="fa fa-arrow-left fa-2x"></i>','<i class="fa fa-arrow-right fa-2x"></i>'], 
    loop:true,
    stagePadding: 50,
    margin: 10,
    responsiveClass:true,
    dots: false,
    responsive:{
        0:{
            items:1,
        },
        767:{
            items:2,
        },

    }
});

I have checked the console and there are no errors, the js and css is linked and in the case of the arrows, looking at the HTML the font awesome icons aren't even rendered - it's just empty divs for prev and next arrows (which actually work when clicked)

If worse comes to worse I can use CSS to fix the issues manually, but with the margins and paddings its kind of best to have Owl Carousel calculate them

Help appreciated, thanks

Answer 1

According to the OWl Carousel docs (http://www.owlcarousel.owlgraphic.com/docs/api-options.html), you seem to have split the navText value out, which might be causing the error.

Try using this instead:

navText: [<i class="fa fa-arrow-left fa-2x"></i><i class="fa fa-arrow-right fa-2x"></i>],

Certain Owl Carousel settings not working

1 个答案: