owl-carousel-2

$(".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

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! You can use translated.owl.carousel event for that Here is a working Fiddle owl.on('translated.owl.carousel', function(event) { var comment = $(this).find('.active').find('img').attr('alt'); var title = $(this).find('.active').find('img'

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'); egvrcn You trigger with a class. You can try with a variable: var $owl = $('.owl-carousel').owlCarousel({ items: 1, loop:true }); $owl.trigger('refresh.owl.carousel'); 来源： https://stackoverflow

$(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, items: 1 }) }); <div class="owl-carousel"> <div class="item"><h4>1</h4></div> </div> <link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script> Console Error : TypeError: items[clones[(clones.length - 1)]] is undefined. this error due to only one item div and

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 nothing happens. The old elements remains, although the methods executes and the .trigger is executed.

I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view carousel structure will not reinitialize. I don't know where I did mistake. Ajax Request $(document).on('click', '.category_list', function() { var category_id = $(this).attr('data-id'); var _token = $('#_token').val(); var param = 'category_id=' + category_id + '&_token=' + _token; $.ajax({ type: "POST", datatype: "json", url: "/master/sub_category", data: param, success: function(result) { $('#test').html(result); var

I'm using Owl Carousel 2.0 . I would like to show one item, a half (or less) of the previous item (left side) and a half (or less) of the next item (right side). Just putting a part of them out on the right and on the left side: I've been trying using just CSS ( padding and margin negative with the owl-stage-outer ) but obviously Javascript override them. Here's my code so far: $('.owl-carousel').owlCarousel({ loop: true, margin: 10, nav: true, responsive: { 0: { items: 1 }, 600: { items: 3 } } }) .owl-carousel .item h4 { color: #FFF; font-weight: 400; margin-top: 0em; } .owl-carousel .item {

I have the following code blocks. All i'm trying to do is get the src of the current image in the slide show. It's not working, nothing appears in the console at all despite it changing slide fine. HTML: <div id="banner" class="owl-carousel"> <img src="template/banner-1.jpg" alt=""> <img src="template/banner-2.jpg" alt=""> <img src="template/banner-1.jpg" alt=""> <img src="template/banner-2.jpg" alt=""> </div> jQuery: var owl = $(".owl-carousel"); owl.owlCarousel({ loop: true, autoplay: true, items: 1, animateOut: 'fadeOut', onChange: function (elem) { var current = this.currentItem; var src =

Well, I'm using a owl-carousel-2 plugin now. And I encounter the following problem: The markup code: <div class="owl-carousel" style="display: none;"> <div class="item"><img src="..." /></div> <div class="item"><img src="..." /></div> <!-- ... --> <div class="item"><img src="..." /></div> </div> <script> $(function() { var $owl = $('.owl-carousel'); $owl.owlCarousel(); // Doing many things here. $owl.show(); }); </script> The problem is: When I initialize with the $owl.owlCarousel(); statement, which under an hidden state, its size is not initialized. So when I show that control, the control