Carrusel

Ejemplos
Uso

Carrusel de fichas de sesión

10,4 km

Milano - Sanremo

Fácil

10,4 km

Milano - Sanremo

Fácil

10,4 km

Milano - Sanremo

Fácil

10,4 km

Milano - Sanremo

Fácil

10,4 km

Milano - Sanremo

Fácil

10,4 km

Milano - Sanremo

Fácil


<div class="owl-carousel carousel-one">

    <div class="card card-session card-session-routes bg-dark text-white mb-4 shadow">

        <img src="images/components/session-card-img-placeholder.png" class="card-img owl-lazy rounded" alt="Classic routes" data-src="images/components/card/card-routes-01.jpg">

        <div class="card-img-overlay p-0 d-flex flex-column">

            <div class="session-info pt-3 px-3">

                <p class="card-title route-distance mb-0">10,4 km</p>

                <p class="card-title mb-0">Milano - Sanremo</p>

            </div>

            <div class="session-details mt-auto">

                <div class="row m-0">

                    <div class="col-sm-12 session-graph px-0">

                        <img src="images/components/card/card-routes-graph-01.svg" class="card-img owl-lazy rounded" alt="Classic routes">

                    </div>

                    <div class="row w-100 m-0 p-3">

                        <div class="col-auto mr-auto pl-0">

                            <p class="card-text m-0">

                                <span class="icon-session-video"></span>

                                <span class="icon-session-3d"></span>

                                <span class="icon-session-gps"></span>

                            </p>

                        </div>

                        <div class="col-auto ml-auto pr-0">

                            <p class="card-text m-0">Fácil</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="card card-session card-session-routes bg-dark text-white mb-4 shadow">

        <img src="images/components/session-card-img-placeholder.png" class="card-img owl-lazy rounded" alt="Classic routes" data-src="images/components/card/card-routes-02.jpg">

        <div class="card-img-overlay p-0 d-flex flex-column">

            <div class="session-info pt-3 px-3">

                <p class="card-title route-distance mb-0">10,4 km</p>

                <p class="card-title mb-0">Milano - Sanremo</p>

            </div>

            <div class="session-details mt-auto">

                <div class="row m-0">

                    <div class="col-sm-12 session-graph px-0">

                        <img src="images/components/card/card-routes-graph-02.svg" class="card-img owl-lazy rounded" alt="Classic routes">

                    </div>

                    <div class="row w-100 m-0 p-3">

                        <div class="col-auto mr-auto pl-0">

                            <p class="card-text m-0">

                                <span class="icon-session-video"></span>

                                <span class="icon-session-3d"></span>

                                <span class="icon-session-gps"></span>

                            </p>

                        </div>

                        <div class="col-auto ml-auto pr-0">

                            <p class="card-text m-0">Fácil</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="card card-session card-session-routes bg-dark text-white mb-4 shadow">

        <img src="images/components/session-card-img-placeholder.png" class="card-img owl-lazy rounded" alt="Classic routes" data-src="images/components/card/card-routes-03.jpg">

        <div class="card-img-overlay p-0 d-flex flex-column">

            <div class="session-info pt-3 px-3">

                <p class="card-title route-distance mb-0">10,4 km</p>

                <p class="card-title mb-0">Milano - Sanremo</p>

            </div>

            <div class="session-details mt-auto">

                <div class="row m-0">

                    <div class="col-sm-12 session-graph px-0">

                        <img src="images/components/card/card-routes-graph-03.svg" class="card-img owl-lazy rounded" alt="Classic routes">

                    </div>

                    <div class="row w-100 m-0 p-3">

                        <div class="col-auto mr-auto pl-0">

                            <p class="card-text m-0">

                                <span class="icon-session-video"></span>

                                <span class="icon-session-3d"></span>

                                <span class="icon-session-gps"></span>

                            </p>

                        </div>

                        <div class="col-auto ml-auto pr-0">

                            <p class="card-text m-0">Fácil</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="card card-session card-session-routes bg-dark text-white mb-4 shadow">

        <img src="images/components/session-card-img-placeholder.png" class="card-img owl-lazy rounded" alt="Classic routes" data-src="images/components/card/card-routes-01.jpg">

        <div class="card-img-overlay p-0 d-flex flex-column">

            <div class="session-info pt-3 px-3">

                <p class="card-title route-distance mb-0">10,4 km</p>

                <p class="card-title mb-0">Milano - Sanremo</p>

            </div>

            <div class="session-details mt-auto">

                <div class="row m-0">

                    <div class="col-sm-12 session-graph px-0">

                        <img src="images/components/card/card-routes-graph-01.svg" class="card-img owl-lazy rounded" alt="Classic routes">

                    </div>

                    <div class="row w-100 m-0 p-3">

                        <div class="col-auto mr-auto pl-0">

                            <p class="card-text m-0">

                                <span class="icon-session-video"></span>

                                <span class="icon-session-3d"></span>

                                <span class="icon-session-gps"></span>

                            </p>

                        </div>

                        <div class="col-auto ml-auto pr-0">

                            <p class="card-text m-0">Fácil</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="card card-session card-session-routes bg-dark text-white mb-4 shadow">

        <img src="images/components/session-card-img-placeholder.png" class="card-img owl-lazy rounded" alt="Classic routes" data-src="images/components/card/card-routes-02.jpg">

        <div class="card-img-overlay p-0 d-flex flex-column">

            <div class="session-info pt-3 px-3">

                <p class="card-title route-distance mb-0">10,4 km</p>

                <p class="card-title mb-0">Milano - Sanremo</p>

            </div>

            <div class="session-details mt-auto">

                <div class="row m-0">

                    <div class="col-sm-12 session-graph px-0">

                        <img src="images/components/card/card-routes-graph-02.svg" class="card-img owl-lazy rounded" alt="Classic routes">

                    </div>

                    <div class="row w-100 m-0 p-3">

                        <div class="col-auto mr-auto pl-0">

                            <p class="card-text m-0">

                                <span class="icon-session-video"></span>

                                <span class="icon-session-3d"></span>

                                <span class="icon-session-gps"></span>

                            </p>

                        </div>

                        <div class="col-auto ml-auto pr-0">

                            <p class="card-text m-0">Fácil</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="card card-session card-session-routes bg-dark text-white mb-4 shadow">

        <img src="images/components/session-card-img-placeholder.png" class="card-img owl-lazy rounded" alt="Classic routes" data-src="images/components/card/card-routes-03.jpg">

        <div class="card-img-overlay p-0 d-flex flex-column">

            <div class="session-info pt-3 px-3">

                <p class="card-title route-distance mb-0">10,4 km</p>

                <p class="card-title mb-0">Milano - Sanremo</p>

            </div>

            <div class="session-details mt-auto">

                <div class="row m-0">

                    <div class="col-sm-12 session-graph px-0">

                        <img src="images/components/card/card-routes-graph-03.svg" class="card-img owl-lazy rounded" alt="Classic routes">

                    </div>

                    <div class="row w-100 m-0 p-3">

                        <div class="col-auto mr-auto pl-0">

                            <p class="card-text m-0">

                                <span class="icon-session-video"></span>

                                <span class="icon-session-3d"></span>

                                <span class="icon-session-gps"></span>

                            </p>

                        </div>

                        <div class="col-auto ml-auto pr-0">

                            <p class="card-text m-0">Fácil</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

Carrusel de citas

“Gracias a Bkool me mantengo a tope durante el invierno. Compito en las ligas y retos cada semana y eso me permite estar competitivo y con ganas de pedalear.“

Jakob - Dinamarca

Bkooler desde 2014

“Las clases de fitness me ayudan a estar activa y que todas las semanas haga ejercicio. Es fácil de utilizar y tiene clases para cada día y momento.“

Anna - Reino Unido

Bkooler desde 2017

“Me encanta el universo Bkool. La posibilidad de conectarse a la plataforma desde cualquier lugar es epecialmente útil en mi trabajo. El número ilimitado de rutas hace que nunca te aburras y te mantiene motivado para darlo todo.“

Bo Hamburguer - Dinamarca

Bkooler desde 2018

“La posibilidad de elegir cualquier ruta del Mundo sin moverme de casa, compartir con otros usuarios estas rutas y poder ver en pantalla todos los datos que necesito.“

Fernando Alarza (Spain)

Bkooler desde 2017


<div class="owl-carousel carousel-two">

    <div class="card bg-black text-white h-100">

        <div class="card-body p-5 d-flex flex-column">

            <div>

                <h4 class="mb-5">“Gracias a Bkool me mantengo a tope durante el invierno. Compito en las ligas y retos cada semana y eso me permite estar competitivo y con ganas de pedalear.“</h4>

            </div>

            <div class="mt-auto">

                <p class="m-0">Jakob - Dinamarca</p>

                <p class="m-0">Bkooler desde 2014</p>

            </div>

        </div>

    </div>

    <div class="card bg-black text-white h-100">

        <div class="card-body p-5 d-flex flex-column">

            <div>

                <h4 class="mb-5">“Las clases de fitness me ayudan a estar activa y que todas las semanas haga ejercicio. Es fácil de utilizar y tiene clases para cada día y momento.“</h4>

            </div>

            <div class="mt-auto">

                <p class="m-0">Anna - Reino Unido</p>

                <p class="m-0">Bkooler desde 2017</p>

            </div>

        </div>

    </div>

    <div class="card bg-black text-white h-100">

        <div class="card-body p-5 d-flex flex-column">

            <div>

                <h4 class="mb-5">“Me encanta el universo Bkool. La posibilidad de conectarse a la plataforma desde cualquier lugar es epecialmente útil en mi trabajo. El número ilimitado de rutas hace que nunca te aburras y te mantiene motivado para darlo todo.“</h4>

            </div>

            <div class="mt-auto">

                <p class="m-0">Bo Hamburguer - Dinamarca</p>

                <p class="m-0">Bkooler desde 2018</p>

            </div>

        </div>

    </div>

    <div class="card bg-black text-white h-100">

        <div class="card-body p-5 d-flex flex-column">

            <div>

                <h4 class="mb-5">“La posibilidad de elegir cualquier ruta del Mundo sin moverme de casa, compartir con otros usuarios estas rutas y poder ver en pantalla todos los datos que necesito.“</h4>

            </div>

            <div class="mt-auto">

                <p class="m-0">Fernando Alarza (Spain)</p>

                <p class="m-0">Bkooler desde 2017</p>

            </div>

        </div>

    </div>

</div>

¿Cómo usar?

Cargar CSS del plugin

Cargar fichero al final de la página


<link href="'css/plugins/owl-carousel-css/owl.carousel.min.css'" rel="stylesheet">

Cargar JavaScript del plugin

Cargar fichero al final de la página


<script src="'js/owl-carousel-js/owl.carousel.min.js'"></script>

Configuración del componente

Insertar código jQuery en el fichero JavaScript de la landing


$(".carousel-one{selector jQuery}").owlCarousel({

    autoplay: false,

    dots: false,

    items: 3,

    lazyLoad: true,

    loop: false,

    margin: 16,
    nav: true,

    navText: ["<span class='btn btn-white btn-icon shadow'><span class='icon-chevron-left'></span></span>","<span class='btn btn-white btn-icon shadow'><span class='icon-chevron-right'></span></span>"],

    responsive : {

        0 : {

            items: 1,

            stagePadding: 25

        },

        576 : {

            items: 1,

            stagePadding: 25

        },

        768 : {

            items: 1,

            stagePadding: 50

        },

        992 : {

            items: 2,

            stagePadding: 50

        },

        1200 : {

            items: 3,

            stagePadding: 50

        }

    }

});

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica.

Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.