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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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