owl-carousel-2

问题 I'm looking for a way to display the img title & alt tags in a div ( .image-caption ). This is my code so far: owl.on('changed.owl.carousel', function(event) { var comment = $(this).find('img').attr('alt'); var title = $(this).find('img').attr('title'); if(comment) $('#desktop .image-caption').html('<h4>'+title+'</h4><p>'+comment+'</p>'); }) Any ideas? Thanks! 回答1: You can use translated.owl.carousel event for that Here is a working Fiddle owl.on('translated.owl.carousel', function(event) {

问题 I have a webpage with 2 carousels in which I have to show different items depending on user actions. The new data comes from the internet, I use fetch, parse the json into an array, all good. Only problem is I can't have the new items replace the old ones in the carousel. For a simple example I have tried var carousel = $jq("#owl-genres"); for(...) { carousel.owlCarousel() .trigger('add.owl.carousel', [$jq('<div class="item">' + genres[i] + '</div>')]) .trigger('refresh.owl.carousel'); } but

问题 I am working on owl-carousel . Currently I have a problem that my slider width is acting really bad. When I load/refresh the website, owl-carousel has some value in width, but a part of the next slide is visible (I want to avoid that). At the same time after the initial load when I resize the window (toggle maximize, or change the width or height by dragging) it sets the width to the correct value as I wanted. I don't understand why it's happening. I want to prevent that habit in the initial

问题 I noticed when using Owl Carousel 2, while slide the item in mobile viewing, the browser also can be move up and down. Try to disabling the scroll function when trigger the Owl Carousel 2 prev and next function in mobile but it still doesn't work. $('.owl-carousel').owlCarousel({ loop:true, margin:5, nav:true, items:2, }); // $('.owl-carousel').bind("mousewheel", function() {return false;}); $('.owl-carousel').bind('touchmove', function(e){e.stopPropagation(); alert('allow scroll');});

问题 I have implement Owl carousel in Magnific Popup . and, It is normaly working fine. if, I have use simple function $('.owl-carousel').owlCarousel({autoplay:true, items:1}) but, Owl carousel does not work when i define Owl carousel with data attribute. HTML: <a class="ajax-popup btn btn-dark" href="ajaxproject.html">Click To Open Popup</a> ajaxproject.html file: <div class="container ajax-container"> <h2 class="text-7 text-center mb-4">Title 1</h2> <div class="row"> <div class="col-sm-7"> <div

问题 I have two carousels that I wanted to used, they both have the same amount of items so it will be fine, BUT I want only to have one navigation dots and be able to trigger multiple dots with the same attributes. $('.div_main .owl-dots').each(function(index) { $(this).attr('data-index','dot-'+index); }); $('.owl-dots[data-index="dot-0"] button').each(function(index) { $(this).attr('data-index','dot-'+index); }); $('.owl-dots[data-index="dot-1"] button').each(function(index) { $(this).attr('data

问题 Using owl carousel and trying to slide items five by five, now i have 5 items, i want when i push next or prev button it move to next five item, currently it move to next item, is it possible? $('.owl-carousel').owlCarousel({ loop:true, items:5, margin:10, nav:true }) Demo i googled and checked plugin website but couldn't find anything. 回答1: Use the slideBy options in the owlCarousel config: $('.owl-carousel').owlCarousel({ loop:true, items: 5, margin:10, slideBy: 5, // slide 5 items nav:true

问题 I have 3 divs that activate slide toggle when I click on them. And inside every div there is owl carousel slider. If I trigger one div the slider shows, but when I click other div slider doesn't show unless I resize the window. How can I trigger refresh on slide toggle for the slider in every div? I tried with this on slide toggle but it doesn't work: $('.owl-slider').trigger('refresh.owl.carousel'); 回答1: You trigger with a class. You can try with a variable: var $owl = $('.owl-carousel')

问题 i need to create multiple responsive owl carousel in some page, i need to works with Data Attributes. I work like this but i cant do responsive my carousel, jQuery var $carousel = $('.data-carousel[data-carousel]'); if ($carousel.length) { $carousel.each(function() { $(this).owlCarousel($(this).data('carousel')); }); } HTML <div class="owl-carousel data-carousel" data-carousel='{"margin": 10, "items": 4, "center": "true", "loop": true}'> <div class="item"><h1>1</h1></div> <div class="item">

问题 I built 2 responsive Owl-carousel-v2 in a page which look perfect. After I put them into tabs, the first one carousel works but the one behind tab panel lost it's item width, and I couldn't make it work. If I have all the items with a certain width then all items will be listed vertically. Here is my demo pen: http://codepen.io/bard/pen/NxqyQy/ I guess the problem is item width are calculated when the page loads. How to solve this? HTML: <ul class="nav nav-tabs"> <li class="active"><a data