CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
rimes
rimes

Reputation: 921

Lightslider - first img not showing until window resize

I am facing a strange thing. I am using lightslider to display my img-s. Now when I use it inside the regular dom, so the one that is open everything works fine. But sometimes I show a modal window on top of my regular one, and there I have the problem that the first img is never shown. I can scroll to the others, but when I comes to select the show the first one, it appears for a second and then dissapears. After some trying a found out that when I resize the browser window (by hand) for just one pixel then I am able to select the first img (if it was already selected but not visible it appears on its own)

Does anybody know what the reason could be, or if not, how can I simulate the behaviour of the window resize (that would be the quick and dirty solution) ?

Regards

Upvotes: 2

Views: 1910

Answers (3)

Rajanish Singh
Rajanish Singh

Reputation: 23

you can put $(window).resize(); after the lightSlider() script.

You can use the following code snippet too:

setTimeout(() => {$( window ).resize()}, 500);

Here you can use setTimeout Function, because some time script executed before load the DOM.

Upvotes: 1

And
And

Reputation: 37

Anyone still having this issue with a carousel.. A quick fix is by toggling between ID's, one of which has "height:0px" and overflow hidden. This one really really killed me so hope it helps someone out there.

#demo {
  visibility: hidden;
  overflow: hidden;
  height: 0px;



}
#demo_visible {
  overflow: hidden;
}


   jQuery(document).ready(function ($) {
        $(".arrow_link").click(function (e) {
            e.preventDefault();

    if ($(".demo").attr('id') == 'demo_visible') {

                $(".demo").attr('id', 'demo');

            } else {

                $(".demo").attr('id', 'demo_visible');

            }
        });
    });

Upvotes: 1

Pangeran Zuckerberg
Pangeran Zuckerberg

Reputation: 135

you can put this $( window ).resize(); after the script. That should work. However you can use the following code snippet too:

onSliderLoad: function() {
    $( window ).resize();
}, onAfterSlide: function() {
    $( window ).resize();
}

don't use too many this script $( window ).resize(); ,because jquery will display error "exceeded RangeError: Maximum call stack size exceeded" , if it shows that error, just use one $( window ).resize();

Upvotes: 5

Related Questions