Feb 28, 2017

How to create a responsive slider with Owl-Carousel

I'm interested in Owl Carousel. I tried Owl carousel v2 but it seems like there is a bug... I come back version 1.x. IMO, Owl Carousel is one of top 3 slider libraries (Slick.js, Owl Carousel, bxSlider). The OwlCarousel v1 is very good. Put grabbing.png and owl.carousel.css in same directory. With a little code, we have a slider such as:

We wants there are two buttons called button-next (aka arrow next) and button-previous (aka arrow previous). The previous button will be on the left side of the slider and the next button will be on the right side of it.

In Twitter Bootstrap we know a simple technique to center a div (we wanna put the slider to center): <div class="row"> <div class="col-lg-1"> <!-- arrow left --> </div> <div class="col-lg-10"> <!-- slider --> </div> <div class="col-lg-1"> <!-- arrow right --> </div> </div>