Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

float slides render bad until the slider is initialized #19

Closed
scazzy opened this issue Jul 30, 2014 · 3 comments

Comments

@scazzy
Copy link

commented Jul 30, 2014

as you know your plugin uses float method to keep the slides alinged, and when the slider is initialized, you are able to give width to the parent container via javascript.

BUT... until the slider is loaded, the slides are stacked one below the other, as like normal elements, blocking space, and once the slider is init-ed, they suddenly go up and form a slider stacking one beside each other.
This wouldn't be noticed if its a single slider on page, but if thee's other content (big page) along with the slider, or consider a slow connection, the slider wouldn't be loaded the moment you enter the page. hence, the awkward rendering or movement, whatever you call, appears.

solutions:

  1. for sliders I prefer to use absolute, so your slider looks as is before and after slider is loaded because of CSS, blocking same position before and after.
  2. giving fixed height to the slider and overflowing none, is a way - but we talk responsive here, so isn't a good idea.

What do you think?

@sachinchoolur

This comment has been minimized.

Copy link
Owner

commented Jul 30, 2014

Hi,

For the demo website i am using the following method..
Add .cS-hidden class to the ul and remove it once the slider is fully loaded.
.cS-hidden class is included in the lightSlider.css but it is not documented..

.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}
<ul id="lightSlider" class="cS-hidden">
    <li>Slide 1</li>
    <li>Slide 2</li>
    .....
</ul
$('#lightSlider').lightSlider({
    onSliderLoad: function() {
        $('#lightSlider').removeClass('cS-hidden');
    }     
});
@scazzy

This comment has been minimized.

Copy link
Author

commented Jul 31, 2014

aah, so you knew all along ;)
Anyway. but that's jerky too.
Secondly, it would be better if you give 'this' object scope inside your callback functions, like onSliderLoad.

$('#lightSlider').lightSlider({
    onSliderLoad: function() {
        $(this).removeClass('cS-hidden');
    }     
});

why? because

  1. most users might use class (multiple sliders) $('.slider'), and jquery search dom for the elements everytime you do a $('...') search.
  2. providing this might give user access to current elements already being used inside the plugin.

#suggestion

@sachinchoolur

This comment has been minimized.

Copy link
Owner

commented Aug 1, 2014

Hi,
I am busy with some other projects and don't have much time to work on this project..
for current use you can just modify lightSlider.js

line number 13

onSliderLoad: function ($el) {},

line number 246

settings.onSliderLoad.call(this, $el);
$('#lightSlider').lightSlider({
    onSliderLoad: function(el) {
        $(el).removeClass('cS-hidden');
    }     
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.