Welcome to Help center

We are here to help

Multiple carousels at one page

Follow

If you need to create few carousels on one page:

1. Create an owl-carousel as set above and rename its id. For example id="team-carousel";

2. Create another owl-carousel and rename its id. For example id="works-carousel";

3. Initialize all your carousels in js file.

HTML:

         <div id="team-carousel" class="owl-carousel owl-theme">
            <div class="item" ...></div>
            <div class="item" ...></div>
            <div class="item" ...></div>
        </div>
           
<div id="works-carousel" class="owl-carousel owl-theme"> <div class="item" ...></div> <div class="item" ...></div> <div class="item" ...></div> <div class="item" ...></div> <div class="item" ...></div> </div>

Before </body> tag ends:

        <script type="text/javascript" src="assets/owlcarousel/owl.carousel.min.js"></script>
        <script type="text/javascript" src="assets/js/main.js"></script>
    

Initialize carousels in main.js file

        $("#team-carousel").owlCarousel({
            items : 3,
            loop: true,
            nav: true
        });

        $("#works-carousel").owlCarousel({
            items : 5,
            center: true,
            smartSpeed: 650
        });
Top
Powered by Zendesk