Problems with slide owl-carrousel

Navigation
0

I'm developing a site and I'm using owl-carrousel2 but I'm having a problem with the nav option, I'd like it to appear on my site, I simply add it to that page, does not appear when I look at the console my nav:true appears with a navs called class that disable in the browsers of the slide I know that in case it is only give a display:none in the display:block line more I do not think this is a good practice if I use css it would have to appear by default without needing an edit via nav:true it follows what is displayed in the console and the code:

JS:

$('.slide-camp').owlCarousel({loop:true,autoplay:false,autoplayTimeout:5000,navText:['<iclass="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
    rewindNav : true,
    slideSpeed: 300,
    singleItem: true, transitionStyle: "fade",
    autoHeight:true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:false
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:4,
            nav:true
        }
    }
});

HTML: 

<div class="item">
                        <div class="box-one">
                            <img src="images/slide-04.jpg" class="image-slide-1" alt="Campo" />
                            <div class="overlay">
                                <div class="text-center content-box">
                                    <h3 class="title">Society club</h3>
                                    <p class="text">Quadra society</p>
                                    <ul class="list-inline list-unstyled classifications">
                                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                        <li><i class="fa fa-star-half-o" aria-hidden="true"></i></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
    
asked by anonymous 09.05.2017 / 21:39

1 answer

1

Looking through various documentation, I was able to find a possible solution:

Instead of declaring as nav:true , declare it as navigation:true and it will probably appear next and prev , and from there, it is only to manipulate the items through classes .owl-prev and .owl-next.

Example:

JS: 


$('.owl-carousel').owlCarousel({
    loop:true,
    navigation:true,
    autoplay:false,
    autoplayTimeout:5000

});

$('.owl-next').html('Avançar');
$('.owl-prev').html('Recuar');
  

Note that instead of NAV I declare navigation:true , and after, I manipulate   the text inserting an HTML via js.

I hope I have helped! Abs

    
11.04.2018 / 21:19
Error creating php mysql line graph router.php on internal server does not work correctly