Categories

Featured templates

JS Animated. How to manage Owl Carousel

Ryan DeWitt January 21, 2016
Rating: 5.0/5. From 2 votes.
Please wait...
JS Animated. How to manage Owl Carousel

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

JS Animated. How to manage Owl Carousel-1
  1. Inspect carousel using Inspector in Chrome or Firebug in Firefox browser. We can see that Owl carousel is being used in this section:

    JS Animated. How to manage Owl Carousel-2
  2. Open the appropriate index file in your editor. Search appropriate part of code using search function of your editor:

    JS Animated. How to manage Owl Carousel-3
  3. In order to add more items, you should copy the code of original item:

    JS Animated. How to manage Owl Carousel-4
  4. Paste the code. Be sure to keep coding structure. Change text and image:

    JS Animated. How to manage Owl Carousel-5
  5. Save changes, upload updated file to your server. Refresh page. We have added a new item:

    JS Animated. How to manage Owl Carousel-6
  6. In order to change carousel options, data attribute should be used. You can check how attributes are defined on the screenshot below:

    JS Animated. How to manage Owl Carousel-7
  7. Carousel autoplay configuration. In order to enable slider autoplay you should use data-autoplay data attribute:

    JS Animated. How to manage Owl Carousel-8
  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:

    JS Animated. How to manage Owl Carousel-9

    Now two items show up at the same time

    JS Animated. How to manage Owl Carousel-10
  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:

    JS Animated. How to manage Owl Carousel-11
  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:

    JS Animated. How to manage Owl Carousel-12
  12. The following code defines animation for particular item:

    JS Animated. How to manage Owl Carousel-13
  13. You can remove lightbox from particular image. Just remove reference to lightbox image. Remove the following code:

    JS Animated. How to manage Owl Carousel-14
  14. Please check template documentation for more detailed information (Extensions – Owl Carousel).

Feel free to check the detailed video tutorial below:

JS Animated. How to manage Owl Carousel
This entry was posted in JS Animated tutorials and tagged carousel, HTML, Owl. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket