Responsive jQuery Slider Example with Owl Carousel
Responsive jQuery Slider is something I have worked with for some time now. I have found some good plugins to create this and Owl Carousel is one of those jQuery plugins. Basically it is a plugin you need to create a slideshow to your website. This carousel is especially developed having responsive design in mind. Owl Carousel has two version but I recommend you all use the second version which is basically a rewrite of the first and has everything running smoother.
Owl Carousel has plenty of modes and options to choose from but I’ve the plugin to be best at simple three images side by side image slider type of slideshow. The transitions are super smooth and the workflow is really simple. Owl Carousel doesn’t have free rolling so it is not very good when developing large sliders for mobile devices, but for small slideshows it works very well. The responsive options are very easily created.
I have tested it on most of the major mobile devices and it works on all of them very nicely. And of course modern desktop browsers are supported too.
With Owl Carousel you can make many kinds of slideshows, especially responsive.
Owl Carousel Example #
Here is the HTML template we will be needing for this example. I also added some styling to make the example more clear.
You can download Owl Carousel assets at http://www.owlcarousel.owlgraphic.com/download/owl.carousel.zip. Make sure to unzip them to the same location you have your web page on.
Now we need to add Owl Carousel HTML and its items to create our slideshow.
Add the following HTML to the template.
<div class\="owl-carousel"\> <div class\="item"\>1</div> <div class\="item"\>2</div> <div class\="item"\>3</div> <div class\="item"\>4</div> <div class\="item"\>5</div> </div>
Thats it! You can find a lot more about Owl Carousel from its own website there are many demos and all the options you can use with it. This was only a little tutorial into the subject. Next I will be covering the mobile optimized slider called Swiper which is really good at doing free rolling slideshows.