OWL Carousel – Touch enabled beautiful responsive carousel slider

OWL Carousel is a touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. This amazing plugin is created by Bartosz Wojciechowski and it is a nice solution if you want to implement a great-looking touch enabled carousel slider. It has various options that you take advantage of and it is compatible with all modern and old browsers.

 

Owl Carousel – jQuery plugin

Owl Carousel – jQuery plugin

Image carousel

Owl Carousel – jQuery plugin

Full width

Owl Carousel – jQuery plugin

Customized

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

 

Owl Carousel – jQuery plugin

One image only


DEMO | DOWNLOAD


How To Use

1. Load jQuery and include Owl Carousel plugin files

To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.

<!-- Basic stylesheet -->

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

<!-- Default Theme -->

<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!-- You can use latest version of jQuery -->

<script src="jquery-1.9.1.min.js"></script>

<!-- Include js plugin -->

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

 

2. Set up your HTML

You don’t need any special markup. All you need is to wrap your divs inside the container element <div>. Class “owl-carousel” is mandatory to apply proper styles that come from owl.carousel.css file.

<div id="owl-example" class="owl-carousel">

<div> Your Content </div>

<div> Your Content </div>

<div> Your Content </div>

<div> Your Content </div>

<div> Your Content </div>

<div> Your Content </div>

<div> Your Content </div>

.....
</div>

 

3. Call the plugin

Now call the Owl initializer function and your carousel is ready.

$(document).ready(function() {

$("#owl-example").owlCarousel();

});

 

Customizing

1. Options

All of the options below are available to customize Owl Carousel.

Variable Default Description
slideSpeed 200 Slide speed in milliseconds
paginationSpeed false Pagination speed in milliseconds
autoPlay false Auto play per slide. Change to any integrer for example “paginationSpeed : 8000” to play every 8 seconds
goToFirst true Slide to first item if autoPlay reach end
goToFirstSpeed 1000 Slide speed of goToFirst option in milliseconds
stopOnHover false Set true to stop slides on hover(if autoPlay is on). Works only on non-touch devices.
navigation false Display “next” and “prev” buttons. Fully customizable. Note that for better control over navigation the div with arrows and pagination is outside your carousel wrapper
navigationText [“prev”,”next”] You can cusomize your own text for navigation. To get empty buttons use false : “navigationText : false”
pagination true Show pagination.
paginationNumbers false Show numbers inside pagination buttons
responsive true You can use Owl Carousel on desktop-only websites too! Just change that to “false” to disable resposive capabilities
items 5 This variable allows you to set the maximum amount of items displayed at a time with the widest browser width
itemsDesktop [1199,4] This allows you to preset the number of slides visible with a particular browser width. The format is [x,y] whereby x=browser width and y=number of slides displayed. For example [1199,4] means that if(window<=1199){ show 4 slides per page} Alternatively use “itemsDesktop: false” to override these settings.

To see all the demos go to OWL Carousel

 


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *