owl-carousel

I have a page with multiple sliders that are created with owl carousel. I would like to define different number of visible items for each slider. The perfect solution would be to define number of visible items in HTML (as a class or data). I am just starting using jQuery so I only managed to pass a value using data attribute like this: <div class="owl-carousel" data-itemsnumber="5">...</div> Then I applied this value to a variable in JS and add this variable in settings instead of items number like this. var slides = $('.owl-carousel').data('itemsnumber'); $(".owl-carousel").owlCarousel( {

I am working on a slider with Owl-Carousel 2 (beta), but there is a lot that doesn't work well. I want the owlCarousel to work like this: It should scroll 2 items at a time, showing 2 items at a time. So: [0,1] slide [2,3] slide [4,5] On mobile, it should show one picture and scroll by 1 picture at a time. owl = $('.owl-carousel') owl.owlCarousel({ center: true, loop: false, margin: 20, items: 2, responsive: { 0: { items: 1, navigation: true, nav: true }, 640: { items: 2, navigation: true, nav: true } }, scrollPerPage: true, navigation: true }).css("z-index", 0) You can use the slideBy option.

At the moment the Owl Carousel autoHeight works only with 1 item on screen. Their plan is to calculate all visible items and change height according to highest item. I work around this problem by calling the .active classes on the visible items, and give the invisible items a small height. Is there already a more elegant solution? $('.owl-carousel').owlCarousel({ loop: true, items: 3, margin: 1, autoHeight: true, }); Fiddle Any Ideas? Thanks! Dennis Helfensteller I solved it via the internal API using several events calling the same autoHeight-function. Fiddle The jQuery-Part: $('.owl-carousel

How come the navigation buttons are not visible? I'm using jQuery and owlcarousel ( http://owlgraphic.com/owlcarousel/ ). http://jsfiddle.net/bobbyrne01/s10bgckL/1/ html .. <div id="owl-demo"> <div class="item"> <img src="http://placehold.it/50x50" alt="Owl Image" /> </div> <div class="item"> <img src="http://placehold.it/50x50" alt="Owl Image" /> </div> <div class="item"> <img src="http://placehold.it/50x50" alt="Owl Image" /> </div> <div class="item"> <img src="http://placehold.it/50x50" alt="Owl Image" /> </div> <div class="item"> <img src="http://placehold.it/50x50" alt="Owl Image" /> <

I'm trying to use owl carousel for my website. I want to disable the navigation after it reach first/last item, for example by adding "disabled" class in navigation then disable it via css. Is it possible? my code $(document).ready(function() { var owl = $("#owl-demo"); owl.owlCarousel({ rewindNav : false, pagination : false, items : 4 }); // Custom Navigation Events $(".next").click(function(){ owl.trigger('owl.next'); }) $(".prev").click(function(){ owl.trigger('owl.prev'); }) }); .item { background: #e5e5e5; margin: 10px} .btn { background: #bd0000; color: #fff; padding: 5px 10px; cursor:

I am working on a really simple Html/Boostrap website. I am using the owl-carousel library to display and slide multiple paragraphs. The problem is that when displaying on small devices, these paragraphs will not have the same height, depending on how long they are. I would like all my owl-item div or paragraph to be aligned vertically within the owl-wrapper div. I tried few display combinations, and also the owl carousel's autoHeight: true option but it does not work as I except. See the pictures, the little paragraph is displayed on the top of the owl-wrapper div, but I would like it to be

$(".owl-carousel").owlCarousel({ margin:10, dots:false, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }); The Above is my Owl carousel. Now i need clicked owl-item should be center. please any me You can trigger the to.owl.carousel event when the user clicks on the item. This event causes the Owl Carousel to move to a specific position. I've set the data-position attribute for each div inside the carousel before initializing the carousel. Then I use this attribute as a parameter of the to.owl.carousel event. Please check the result: https://codepen.io/glebkema