Not responsive enough in single slide mode.

[honeydripper]

when resizing the window to the bigger size in the single slide mode, things look very unclean, because the next slide is visible for the responsiveRefreshRate time. When resizing to the smaller size, it is bearable, but still not quite so nice because of the 200ms delay.

Quick fix of the first problem - set visibility = hidden on all owl items except the current one on the first resize event and then revert inside the smallDelay interval.

Proper fix of both problems - for single slide mode do not introduce the owl-wrapper element but rather position the elements absolutely one after another and animate them separately. This way the resizing of elements is a matter of setting 100% width of the parent.

Alternatively set the owl-wrapper width to 100% of the wrapper and set the overflow to auto. Position the children absolutely with left : n * 100%. Then you will get the browser to do the resizing for you and earn the "responsive" badge in a proper way.

Keep the small delay interval and inside it just recalculate your vars, but don't update the styles on elements.

On a side note, i have been too lazy to write something like this myself and actually spend the evening trying to find a library like this. From the looks of things yours is the best and surprisingly seems to be the smallest. Thank you for giving it away for free.

[honeydripper]

I have just realized, that i have been trying out the previous version of the owl. The bug report however is valid for this 1.9 beta as well. As are the solutions ;) just the reference to code places is wrong.

[witrin]

I need this single page feature too ;) ... So what's the status here?

@OwlFonk Should this be fixed or not? And if so which approach should be preferred are there alternatives?

@tarasmineus Could you please little bit more precisely. Which one is the 'owl-wrapper'? Where is the fix to place?

[witrin]

I think at least it should work from 1 to n. Or in other words both features are important (one page and multi page) and should be behave nicely. Can here be made already some kind of decision? Which functions are affected?

[witrin]

I would also be happy if I could implement a simple plugin for the single page case, to patch this for my own or contribute it. Thus I would like to know were it happens :) ...

[witrin]

Don't get me wrong with 1 to n. I meant with it just single page mode (1) and multi page mode (n). Does the first approach mean the user gets the possibility for customizing the transition? Second sounds also good for single page mode. The third approach, I do not really understand :S.

[witrin]

Yeah the lazy content would be a killer feature (galleries etc.)...

[witrin]

In my opinion the second approach seems to be ok. Additionally a transition over the item width would be nice (without seeing) the none active items ... What do you think about it?

[witrin]

But in the best case the user should able to decide which transition (opacity, width etc) is used by using CSS ... sure if possible ;)

[witrin]

Sure, I'll wait. Thanks!

[witrin]

However could you name the functions where this happens?

[honeydripper]

since i have raised this long discussion, i thought i will contribute a little bit more to this topic.

The second option - animating all items separately can be rather problematic in terms of performance, one could expect choppy animations especially when there are a few o those slides with some complex markup. Furthermore it is somewhat different a model from what you currently have.

Therefore i actually recommend to go with the third option where i think you will have minimal work and best results.

Check out how nicely this resizes (and how good the orientation change could look like on mobile):

<style>
    .one-per-slide, .wrapper.one-per-slide {
        position:absolute;
        width:100%;
        height:100%;
        top:0;
    }
</style>

<div id="owl" style="width:30%; height:200px; position:relative; border:1px solid red;">
    <div class="wrapper one-per-slide" style="left:0;">

        <div class="item one-per-slide" style="left:0;">

        </div>
        <div class="item one-per-slide" style="left:100%;">

        </div>
        <div class="item one-per-slide" style="left:200%;">

        </div>

    </div>
</div>

Now, instead of setting width on the slide as you currently do, you would set the left position as n * 100%. Instead of registering listeners on the .wrapper element as you might currently do, you would register listener on the #owl element, you would still apply transform to the .wrapper though. Otherwise everything could probably remain as it is.

You can also base your transitions on the same percentage logic.

But hey, it's your project and your decision ;)

[honeydripper]

i have never had any problems with translate3d and %. % are good for wholepage slide, bad for more slides at the same time. However i see here a very clear separation line and limited effort. I do not have time to implement this myself, however if you have and wish to try that one, i could help you out with some advice.