JS Animated. How to manage Owl Carousel

This tutorial shows how to manage Owl Carousel in JS Animated templates:

1. Inspect carousel using Inspector in Chrome or Firebug in Firefox browser. We can see that Owl carousel is being used in this section:

   

2. Open the appropriate index file in your editor. Search appropriate part of code using search function of your editor:

   

3. In order to add more items, you should copy the code of original item:

   

4. Paste the code. Be sure to keep coding structure. Change text and image:

   

5. Save changes, upload updated file to your server. Refresh page. We have added a new item:

   

6. In order to change carousel options, data attribute should be used. You can check how attributes are defined on the screenshot below:

   

7. Carousel autoplay configuration. In order to enable slider autoplay you should use data-autoplay data attribute:

   

8. In order to display "Previous"/"Next" navigation in Owl Carousel, you should use corresponding data-nav="true" data attribute for carousel. Such attribute is defined in our carousel, please check previous screenshot.

   You can disable navigation by specifying false instead of true.

9. Owl carousel allows to display one or a couple of items at once. In order to manage carousel items display, you should use the corresponding data attribute data-items and data-*-items. Please check template documentation for more detailed information. We have added data-lg-items="1" and data-md-items="1" attributes:

   

   Now two items show up at the same time

   

10. Let’s check how another Owl carousel works. We have inspected carousel using Inspector in Chrome. Such content is provided by owl carousel as well. Navigation does not show up, images have a lightbox:

    

11. Locate appropriate part of code. Attribute data-stage-padding defines carousel scene padding. It can be applied to devices with different resolutions. Attribute data-lightbox defines that gallery will be used for the lightbox:

    

12. The following code defines animation for particular item:

    

13. You can remove lightbox from particular image. Just remove reference to lightbox image. Remove the following code:

    

14. Please check template documentation for more detailed information (Extensions – Owl Carousel).

Feel free to check the detailed video tutorial below: