owl-carousel

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 work with owl carousel 2 for carousel content. JS: $('#owl-demo').owlCarousel({ loop: true, margin: 10, nav: true, items: 1, }); HTML: <div id="owl-demo" class="owl-carousel"> <div class="item"><h4>1</h4></div> </div> Problem: when I have one content (dynamic content using PHP) loop:true and items:1 not work and I see blank But if I add two content Owl worked true!! EDIT : my content is dynamic ( 1 - ....). when my result is one content owl have a problem. Problem DEMO worked DEMO how do fix this problem ? I report this bug to Owl developer group and fix this problem here . Change this line

I an trying to use the owl carousel in my new project. I seem to be having an issue with it. So far only the HTML and CSS is working. I am somehow doing something wrong with the Script. Could someone possibly lend me a hand and take a look and point me in the right direction where I am messing up? Here is a link to the website. The Owl Carousel is close to the bottom of the website. You will see two "partners" sections. The top is just the demo HTML, and the bottom is what I am trying to use to create the carouse. I am just using dummy images for the time being. CloudPoint DIV Site Here is the

I did not want to take the plugin code so I was wondering if someone had already managed to use plugin vertically. It's a shame on the part of this plugin can be used horizontally. Sorry for langage... Here is a CodePen that solves this: http://codepen.io/dapinitial/pen/xZaRqz $(".owl-carousel").owlCarousel({ loop: true, autoplay: true, items: 1, nav: true, autoplayHoverPause: true, animateOut: 'slideOutUp', animateIn: 'slideInUp' }); Regard to the 2.0 beta it's currently not possible to slide vertically. However, the complexity has been significantly reduced by the refactoring and the plugin

I know in the first version of owl carousel we do it like this : var $carousel = $('#carousel'); var owl = $carousel.data('owlCarousel'); owl.reinit({touchDrag: false, mouseDrag: false;}); Ok, but how we do it in the second version, i don't know how they renamed it. For some reasons $('#your_carousel').trigger('destroy.owl.carousel') is not working correctly. it does not remove all classes which are needed to reinit the plugin again. You'll need to remove them completely to destroy the "owl carousel 2". like described here in this issue on github: https://github.com/smashingboxes/OwlCarousel2

I have multiple owl carousel set up on my home page. I have the first one (the one about free shipping) set to a slideSpeed of 10000. As you can see all the slide change at the same speed. Is there a reason this doesn't work? Am i doing something wrong? Please note that you have to use autoplay:true, autoplayTimeout:5000 when using owlCarousel 2.0 Autoplay is where you set the slide changing speed. Not slidespeed Just set time to autoPlay option $("#slider").owlCarousel({ autoPlay: 2500, //autoPlay: true, <-- if you want to set default slide time (5000) slideSpeed: 300, paginationSpeed: 500,

I'm trying to apply the fade effect on a Owl Carousel but it does not seem to work. As you can see in this fiddle - http://jsfiddle.net/lav911/fHa6J/ , I'm loading the transitions.css file mentioned in their docs . Am I missing something? Why does it slide instead of fading ? Also, notice the fade does not work even on their site. Later edit: It seems to fade on Google Chrome 35 and Firefox, but on Google Chrome 36 it will slide. Strange. It was reported apparently on the plugin's github repo - https://github.com/OwlFonk/OwlCarousel/issues/346 Simply using this version of the plugin (pull