0

estoy haciendo mi primera página web y he cogido un modelo de github. Me gustaría poder activar los botones "previous/next"; los he insertado pero al pinchar sobre ellos no hacen nada. Estoy usando HTML para la web. Os paso el código:

        <div class="brand-area gray-bg">
          <div class="container">
            <div class="row">
                <!-- Brand Slider Area -->
                <div class="col-xl-12">
                    <div class="brand-active owl-carousel">
                        <!-- Single Slider -->
                        <div class="single-brand">
                            <img src="img/brand/1.png" alt="">
                        </div>
                        <!-- Single Slider -->
                        <div class="single-brand">
                            <img src="img/brand/2.png" alt="">
                        </div>
                        <!-- Single Slider -->
                        <div class="single-brand">
                            <img src="img/brand/3.png" alt="">
                        </div>
                        <!-- Single Slider -->
                        <div class="single-brand">
                            <img src="img/brand/4.png" alt="">
                        </div>
                    </div>
                    <div class="slider_nav">
                            <button class="am-next">Next</button>
                            <button class="am-prev">Previous</button>
                        </div>
                </div>
            </div>
        </div>
     </div>
    </div>```


Gracias!

1 respuesta 1

0

Puedes activarla desde la inicialización del plugin usando nav:true (que por default es false -desactivada-) en las opciones:

$('.owl-carousel').owlCarousel({
    nav:true
})

Igual puedes meter más opciones de loop y ajustar los breakpoints para responsive con sus opciones individuales:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }

})

En la documentación de owl.carousel.js puedes ver más opciones:

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.