owl-carousel

问题 i'm using owl carousel. this is my script: $("#owl-demo").owlCarousel({ items : 3 }); i want the container show 3 images. But, here is the picture when first load but when i resize the browser, although just a little bit, size of images change to actual size and setting that i want So, the problem is images preview when i load browser for the first time. Why this is happening? i think the issues about size of my browser 回答1: I fixed this problem when I measured the width of the owl-stage

问题 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=

问题 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

问题 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 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 (the carousel structure) will not reinitialize. Everything is fine upon page load. I'm using version 1.3.3 $(document).ready(function() { $(".owl-carousel").owlCarousel({ items : 3 }); }); Ajax call $.ajax({ type: 'get', url: '/public/index', dataType: 'script', data: data_send, success: function(data) { $(".owl

问题 I have been looking at ways on google to use multiple carousel on a single page and yet did not find any of the solutions working for me. Can anyone of you please help. Here is the code: HTML <!-- Carousel 1 --> <div id="demo"> <div class="container"> <div class="row"> <div class="span12"> <div id="owl-demo" class="owl-carousel"> <div class="item"> <h1>1</h1> </div> <div class="item"> <h1>2</h1> </div> <div class="item"> <h1>3</h1> </div> <div class="item"> <h1>4</h1> </div> <div class="item"

问题 I am using a plugin called owlcarousel to create a carousel. The carousel and the collage have been made. The work has been tested on Google Chrome, Safari, Opera andd Firefox. Everything works fine for all of them except Firefox. When the carousel is working fine, this how is displayed : On Firefox,this is how, it looks: Now, this is the part of my code concerning the carousel (HTML): <div class="container"> <div class="carousel-featured-sellers"> <div class="featured-sellers-collage"> <div

问题 I have an responsive Owl Carousel (v2), each item or slide has an image and below that some text of variable length, see image below: As can be seen, all the images are bottom aligned to the same baseline, regardless of how much text there is. I've done this by setting the text div to a fixed height. The problem is, if there were to be just one line of text, I'd have unnecessary space below the carousel. If I allow the div to set its own height, I get this: So my images are no longer lined up

问题 Any one have idea about this .data("owlItem") ? how can i find this on jquery or console log. i think this is not data attribute. .data("owlItem") .data("owlItem") $("#slider_thumb").on("click", ".owl-item", function(e){ e.preventDefault(); var number = $(this).data("owlItem"); sync1.trigger("owl.goTo",number); }); Thanks! 回答1: var number = $(this).find(".item h1").html(); alert(number); 来源： https://stackoverflow.com/questions/29040649/what-is-the-owlitem-in-owl-carousel

问题 Trying to get my owl carousel to work for me in shopify. Could you take a look at my code and see if anything looks off to you? I think I've implemented it the to T but it won't seem to fire. Any suggestions would be great! CSS Styles {{ 'owl.theme.css' | asset_url | stylesheet_tag }} {{ 'owl.carousel.css' | asset_url | stylesheet_tag }} JS Files {{ 'owl.carousel.js' | asset_url | script_tag }} {{ 'jquery-1.9.1.min.js' | asset_url | script_tag }} Slider HTML {% if collection.handle contains