FYI, I had an error using jQuery 1.71 - undefined property 'data' - I upgraded to 1.8 and everything works perfectly. Great plugin

Hello! I've read in the TODO list (index.html) there are some issues with the $.data object. What's exactly the issue?

From [http://zeptojs.com/#data]

Zepto's basic implementation of data() only stores strings. To store arbitrary objects, include the optional "data" module in your custom build of Zepto.

Have you tried using the data module?

On autowidth.html, if the plugin is initialised with only the first 3 items:

On dragStart, the .owl-stage will snap so that it is right-aligned (before sliding back on dragEnd).

Hi,
great, great work.

Question:
are you going to abandon the css transitions with "transitionStyle" ...?

Hey. Check the plug-in Firefox browser. I it does not work there. (Last version of the browser 28 and 29 too)
(windows 7 - 64 bit home)

Navigation does not work, drag and drop, bullets.

http://www.owlgraphic.com/owlcarousel2/ - not work!
http://www.owlgraphic.com/owlcarousel/ - work!

If the only problem for me, that could be the cause of its occurrence?

LazyLoad background images not working

Here is a test case. I have not be able to capture when an event is fired. I am trying to capture when a slide change has happened.

http://jsfiddle.net/GXMPg/

Hi, i have a carousel that must be a normal carousel under 768 but over it return at it's normal grid.
i have create a method that on windows resize it destroy and generate the carousel the carousel.

     $(window).on("resize", function(event){
            if( $(window).width() < 768 && widthController!="mobile"){
                  $carouselres.owlCarousel({
                ........
                 });
             });
    });


           $carouselres.on('onResponsiveAfter',function(){
             if( $(window).width() > 768 ){
                      $carouselres.data('owlCarousel').destroy();
              }
            });

it is destroyed corrcetly but after the precent Click funtion is not unbind on all the image(at random can be bind on 1 or 2 randomly on 3 element) that i have in the carousel and give me this error

the this value is null and it enter in the function even if the carousel not exist anymore

Someone have a solution or have similar behavior?

OwlCarousel seems to have to load all images before being able to calculate widths while autoWidth is set to true. Maybe I'm just doing it wrong.
My setup basically looks like this:

<div class="owl-carousel">
    <div style="width: 500px;">
        <span class="caption">Caption A</span>
        <img class="owl-lazy" width="500" height="200" data-src="large-image.a.jpg" alt="">
    </div>

    <div style="width: 700px;">
        <span class="caption">Caption B</span>
        <img class="owl-lazy" width="700" height="200" data-src="large-image.b.jpg" alt="">
    </div>

    <div style="width: 1200px;">
        <span class="caption">Caption C</span>
        <img class="owl-lazy" width="1200" height="200" data-src="large-image.c.jpg" alt="">
    </div>

    <div style="width: 300px;">
        <span class="caption">Caption D</span>
        <img class="owl-lazy" width="300" height="200" data-src="large-image.d.jpg" alt="">
    </div>
</div>

The thing is that I already know how big my images are and don't have to wait for images to load. Also, I'm resizing images as the browser's window is resized, but that is working like it's supposed to do once the slider is initialised.
Is there a way to tell it to rely on widths I already provide?

hi again

if i set lazyLoad: true , autoHeight dosn't work anymore.
but if i remove lazyLoad option or set it to false, autoHeight works well.

regards

In fireCallback, there's code forking going on to determine whether there's a native custom event API – but seeing as jQuery is already a dependency, isn't it better to simply use their convenience methods (the else condition) anyway?

Hello,

is there a way to destroy the carousel once initialized?

Has anyone got this working?

Thank you

hi @OwlFonk

if i set margin to an odd integer and set item to an even int , in the rightest side of carousel i have 1px offset and for reverse state i have the same issue . (margin be even and item be odd)

How about adding mousewheel option?

Hello,

First of thanks a lot for your effort on this amazing plugin. I am using the latest beta and everything works a charm. I am trying to create a theme with CSS3 transitions. Here is a working demo: http://ipanelthemes.com/owl2.demo/ Right now, the look and feel is only consistent when only 3 items are displayed.

As you can see I am using the onChangeState event to add a class to currently active slide so that it reverts back before actually going away from the screen. But I think I can make the animations better if the onChangeState event had more information in it, likely

1. If the element has gone right or left.
2. If it is fastrewind
3. If it is fastforward.

I hope you can help me with that. Also I shall be glad to hear more ideas from you on how to make this a standard theme for which the look and feel will be consistent for any number of slides. If you need the files, then it is downloadable from this link: http://ipanelthemes.com/owl2.demo/download-3d-owl.zip

Once again, thanks for this amazing plugin.

Hiya,
I've got this working nicely for what I need and it's great, thank you. There is blank spacing before and after my carousel, how can I can rid of this so that the carousel stops when the last photo is reached? see:

http://www.roweena.co.uk/projects/christina/archive-home.html

I am instantiating with:

$('#owl-demo-1').owlCarousel({
center: true,
items:3,
loop:false,
startPosition: 1,
margin:10,
navigation: true,
navText: ['<','>'],
naviSpeed: 450
});

Thank you :-)

I know that it is just a beta, but it's the only carousel which feeds my needs so I want to use it right now. I'm using Firefox 28 and the navigation is not working. Neither the pagination nor the prev/next navigation.

If you have define 3 elements in the carolusel, but it only have 2, when you move it to the second element and return to the first one, the class "owl-item.center" is not set again.

The carousel configuration is:

center: true,
items: 3,
loop: true,
callbacks:true

One solution that i've found, was changing in the file "owl.corrusel.js" the next lines:
This are the original:

// if speed is 0 the set inMotion to false
if(this.speed.current !== 0 && this.pos.currentAbs !== this.pos.min){
    this.fireCallback('onTransitionStart');
    this.state.inMotion = true;
}

This are the lines modified:

// if speed is 0 the set inMotion to false
if(this.speed.current !== 0) {
    this.state.inMotion = true;
    if(this.pos.currentAbs !== this.pos.min){
        this.fireCallback('onTransitionStart');
    }
}

I'm working with the version 2.0.0-beta.1.8, and I want to know if this solution is correct and if this fix would have some impact in another place?.

Currently there are events like onChange – this is confusing because change already is a native DOM event (for form elements), and the on prefix is also confusing because it is used in various methods to handle events (eg DOM v1 input.onchange = handlerFn, jQuery $( input ).on( 'change', handlerFn )).

How about namespacing these events to owlCarousel in the style of the jQuery convention?

This way onChange would become change.owlCarousel.

I'm trying to do something similar to the BBC homepage carousel (http://www.bbc.co.uk/). The design requires that the prev/next slides are always in view (but obscured). At the moment, the beta will often remove the next slide from the DOM (i.e. if you trigger a move on the carousel then stop).

Is it possible to ensure that there's always at least three slides in the DOM (one either side of the current slide)?

Hi there, plugin works great for me, i wonder if there is possibility to set up containers where navigation and pagination would be created?
That would be awesome to set it up as a option while creating slider 👍

f.e.

<div id="slider">
<div class="slide>...</div>
<div class="slide>...</div>
<div class="slide>...</div>
</div>
<div id="pagination_slider">
</div>
<div id="navi_slider">
</div>

Hi Bartosz,

First off, you've created an amazing product, thank you!

Is there a manipulation event I can use to manually fire the resize function that OwlCarousel uses for its responsiveness? I'm developing a site on which the carousels width dynamically changes without the browser-window being resized. So the browser stays the same size while the carousel itself is enlarged or reduced by clicking on a trigger. I've tried using the jQuery .resize(); function but doesn't seem to do the trick.

I've found that you've developed plugin manipulation functionality like owl.data('owlCarousel').updatePosition(); . Is there also an event for triggering the resize function?

Best Regards,
Max

The other day I received a design of a page where the pagination dots of the carousel are located above the carousel itself (not below). For my surprise OwlCarousel doesn't have an option to do it through configuration (Or at least I didn't find anything).

The way I temporarily did it is the following, but it would be great if that option is included in a future :)

Just adding an option called something like "dotsAbove" (I'm not good naming variables):

var defaults = {
...
dotsAbove: false
}

And then add the conditional in the dots creator in order to append or prepend depending on the configuration:

 /**
 * Controls
 * @desc Calls controls container, navigation and dots creator
 * @since 2.0.0
 */
  Owl.prototype.controls = function(){
    var cc = document.createElement('div');
    cc.className = this.options.controlsClass;

   if (this.options.dotsAbove)
         this.dom.$el.prepend(cc);
   else
  this.dom.$el.append(cc);

    this.dom.$cc = $(cc);
};

We get something like:

Thats all of my humble opinion,
I love the new version!
Cheers!

Hi,

Using beta.1.8 and lazyLoad:true on the images in my carousel

<img class="owl-lazy" data-src-retina="http://placehold.it/552x720" data-src="http://placehold.it/276x360" class="thumbnail">

Images are being loaded correctly, but no retina versions on an iPhone and iPad I've tested on.

Is this working in the beta, or am I doing something wrong?

Thanks

I have a widget that outputs ul li's. Will this new version support this markup?

Hi, I tried using the SlideBy property, therefore specifying a number as a string 'page', but I have been unable to make it work. What can I be doing wrong?

Thanks!

keys.sort(), to perform a numeric sort, you must pass a function as an argument when calling the sort method, now are sorted alphabetically, "960" comes before "1200"

Hi!
Your plugin is really great but my client want to stop autoplay function.
I have two slides. Instead of an "automatic" transition he just want a "clicked" one. Just after the mouse click the slide 2 takes the place of the slide 1.

How can I change the code just to obtain this result?
Thanx

Using an iPad with the latest beta of the OwlCarousel2 (version 2.0.0-beta.1.8), am seeing a brief flicker after the image slide transition. Just for a fraction of a second, it will flash the image of the previous slide. I've set up two test pages, removing almost all html and markup to isolate the issue. If I switch lazyContent to false, it will not flicker. I don't see the flicker on other computers or devices (including iPhones). Only the iPad.

Here is the test page that flickers:
http://nopiece.com/javascripts/libs/owl-carousel/lazyContent-true.html

Here is the same page, with the lazyContent disabled:
http://nopiece.com/javascripts/libs/owl-carousel/lazyContent-false.html

Reproduce steps:

1: load the lazyContent-true.html test page
2: swipe to right

If it doesn't flicker, swipe back and forth a few times. Not every slide transition will flicker, but if you go through the slides, you should see it about half the time.

iPad info:
Model MD328LL/A (3rd Generation)
System version 7.1.1 (11D2010)
Safari "Mozilla/5.0 (iPad; CPU OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53"

Thanks, and I really appreciate the work you are doing on the slider. This early beta is already great!

Could you make it so there's an option to queue up the next slide with lazy load? I don't want to load every slide and bog down the website but I also don't want the user to have to wait if they do decide to click next.

Thanks. Great work.

on browser resize(1200 to 480) layout disturbs at "678".....
alternatively (480 to 1200) it goes right.

Hello, I want add my own thumbnail to video, I add class .owl-video with href on youtube, and add tag img to this url, but this is make error,
Tell please how add my own thumbnail to video?
Thank you!

owlCarousel v1 returned a plugin object (which could also be retrieved from jQuery .data( 'owlCarousel' ) which exposed internal state properties like visibleItems etc, which was very useful for writing plugins that incorporated owlCarousel into more complex UIs. I notice with owlCarousel v2 that the internal state Owl object looks very different, but it doesn't appear to be accessible either – the only exposed data appears to be the owlItem instances accessible from `$( 'owl-item' ).data( 'owlItem' ).

Are there any plans to expose internal state? For example, in my UI I could bind the following function to the old afterAction callback, and this would allow me to reflect the state of owlCarousel in other parts of the UI:

if( this.visibleItems.slice( -1 )[ 0 ] === this.itemsAmount - 1 ){
    $next.addClass( 'disabled' );
}
else {
    $next.removeClass( 'disabled' );
}

if( this.visibleItems[ 0 ] === 0 ){
    $prev.addClass( 'disabled' );
}
else {
    $prev.removeClass( 'disabled' );
}

Hey,

it would be great if you could add some more information to the beforeMove/afterMove function or add a new function called afterManualMove or so. Because sometimes its good to know if the move was triggered by autoplay or by hand.

For example: i would like to stop the autoplay after the user did a manual move

In this case i could do something like that:

afterManualMove: function {
//stop the autoplay
}

Manual move means pushed on a owl-button or did the mouse/touch drag.

If it's allready build in, please let me know how to do that, i didn't figger it out how to :(

Thank you,
Pomm0

Any thoughts on addind a "full screen mode"? Kind of like http://nicinabox.com/superslides/ and http://buildinternet.com/project/supersized/

Thank alot for your hard work on this, Owl!!

At the moment, if a video is playing (so it's been loaded) and the stopVideo function is called, then the video is stopped, but the iframe is also removed from the DOM completely. This means that the video position gets lost, and if it's played again has to be reloaded.

Once a video is loaded, there could be a pauseVideo function to just pause, rather than fully remove the video.

First off - this is a great plugin!

Some page layouts may require the carousel controls to be outside the container for the carousel itself. It would be great if you added this as an option, something like:

{
navContainer: 'some-class' // or even $('some-class'),
dotsContainer: 'another-class' // or $('another-class')
}

I recognize this may be an edge-case for most - but thought I'd put it out there anyway. I have a version working locally if you're interested (though it's rough for now)

When using lazyLoad swipe image will be flashes.

iOS7 safari.

Hello, this is a grat carousel, I really like it and started using it for a project, but I found a problem testing it on IE 11.

The navigation and the dots pagination doesn't work. The two of them are correctly visible, but when clicked they didn't work.

The mouse drag works fine.I didn't have this problem in Firefox and Chrome.
I'm using win 7.

Another question, not related whit this problem: is there any way to change the easing of the transition? I wold like a linear transition instead of the actual swing, but couldn't find the way of changing it.

Related to #22. When a video is playing, and the carousel moves (even if the video stays in view, or the carousel doesn't actually change slides) then the stopVideo function is called. Is there a way to ensure that the video is only paused/stopped when it is moved from view?

In the previous version, you could reference this.owl in a callback. This meant you could access the baseElement to work out which carousel fired the event and manipulate the DOM around it.

Unless I'm missing it (likely), this information is no longer exposed anywhere, so with the callbacks (specifically info) it's impossible to know which carousel on the page triggered the event.

Can you consider adding？

• vertical scroll
• Multi Image delay load

When setting option "mouseDrag:false", user selection goes weird, it selects entire text on the screen. I think the problem is with "user-select: all" in owl.carousel.css

I changed it as "user-select: auto". This worked for me.

Hello!

I've noticed this is an old bug, which affects OwlCarousel(1) too. I hope in v.2 will be fixed :)

The issue is really simple: even if you set mouseDrag to false, you're not able to select the text within the owl elements. I think you should be able to, if the option is turned off.

Hello
I'm not able to make carousel work in infinite loop with 5 items visibles (on total of 5 items).

This is my code :
$('#round').owlCarousel({
items:5,
loop:true,
merge:true,
center:true,
responsiveClass:true,
mouseDrag:true,
touchDrag:true,
pullDrag:true,
freeDrag:false,
//margin:5,
callbacks:true,
navigation:true,
URLhashListener:true,
dots:false,
//autoplayHoverPause:true,
startPosition: 'URLHash'
});
I use owl2 beta 1.5
I precise that one previous version of this plugin (beta 1.0) worked great with 5 items but did a fast rewind when last item + 1 is active.

An other pb is : next / previous buttons not working under IE11
Thanks =)

PS : great job ! owl carousel is one of my favorite jaquery plugin !

Hello!

This happened before in OwlCarousel (1) and I sorted it out, the problem is: I don't remember how :P

What's wrong? I've got a series of sections with background-attachment: fixed. When I start the animation though the next sections's background will temporarily disappear. You can see the odd behavior following this link (resize the screen so that multiple carousel pages are available, then scroll a little bit to see the next section and click on the prev/next buttons).

Hi, I've tested OwlCarousel2 on my website and after a refresh especially in IE (all versions) it is not loaded. It says "object doesn't support this property or method 'owlCarousel' ". Any suggestions? This is my website: www.ponzawebcam.it/prova
Thank you in advance

I have suggestion adding disabled navigation if total items = visible items
In function:

Owl.prototype.updateNavigation

add:

if (this.pos.current === this.pos.max) {
     this.dom.$navNext.addClass('disabled');
}

and add css style for .disabled

opacity: 0.5;
cursor: default;

Hi there, amazing plugin.

I'm trying to figure out how to center all the items within a carousel if there's not enough items to fill it up. I'm using Owl Carousel to house the thumbnails for a video playlist.

For example, if my carousel has enough width to contain 8 thumbnails, but there's only 4 items in any given playlist, is there a way to have those 4 thumbnails center within the carousel?