If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to manage Owl Carousel

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