owl-carousel – Tarik Billa

Show part of next and previous items with Owl Carousel 2.0

January 1, 2024 by Tarik

The easiest way to do this is by using stagePadding. Demo below: $(function() { $(‘.owl-carousel’).owlCarousel({ margin: 10, loop: true, items: 1, stagePadding: 100 }); }); <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <link href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css” rel=”stylesheet” /> <script src=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js”></script> <div class=”owl-carousel”> <div class=”item”><img src=”https://placehold.it/350×150&text=1″ /></div> <div class=”item”><img src=”https://placehold.it/350×150&text=2″ /></div> <div class=”item”><img src=”https://placehold.it/350×150&text=3″ /></div> <div class=”item”><img src=”https://placehold.it/350×150&text=4″ /></div> <div class=”item”><img src=”https://placehold.it/350×150&text=5″ /></div> … Read more

Cloned items in owl carousel

December 18, 2023 by Tarik

I had this issue – I found that setting the loop option to false resolved it for me.

Owl Carousel 2 Nav on Sides

August 12, 2023 by Tarik

I just did this yesterday:) Firstly make sure nav is turned on in the config https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html $(‘#_samewidth_images’).owlCarousel({ margin:10, autoWidth:false, nav:true, items:4, navText : [‘<i class=”fa fa-angle-left” aria-hidden=”true”></i>’,'<i class=”fa fa-angle-right” aria-hidden=”true”></i>’] }) This will inject the controls into the DOM, see https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html <div class=”owl-carousel owl-theme owl-loaded”> <div class=”owl-stage-outer”> <div class=”owl-stage”> <div class=”owl-item”>…</div> <div class=”owl-item”>…</div> <div class=”owl-item”>…</div> … Read more

Owl Carousel Won’t Autoplay

August 10, 2023 by Tarik

Yes, its a typing error. Write autoPlay not autoplay The autoplay-plugin code defines the variable as “autoPlay”.

Owl Carousel, making custom navigation

March 27, 2023 by Tarik

You need to enable navigation and edit navigationText: > Assuming this is version 1.3.2 owlgraphic.com/owlcarousel/#customizing Note: It appears the site for Owl 1.3 is now down, so here is a forked Codepen example. $(“#owl-example”).owlCarousel({ navigation: true, navigationText: [“<img src=”https://stackoverflow.com/questions/31224192/myprevimage.png”>”,”<img src=”mynextimage.png”>”] }); > Assuming it’s version 2: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav $(“#owl-example”).owlCarousel({ nav: true, navText: [“<img src=”https://stackoverflow.com/questions/31224192/myprevimage.png”>”,”<img src=”mynextimage.png”>”] }); … Read more