Trying to implement slick slider but images are stacking vertically. No slider

[tripwater]

short description of the bug / issue, provide more detail below. Just go to the jsfiddle and you will see a simple example. I followed the most basic examples on the github for slick but can't get it to work. I am not sure what I am missing. Each image is stacking vertically, no bullets, no arrows, no slide. Thank you for your time and a help with this.

[ paste your jsfiddle link here ]

http://jsfiddle.net/tripwater/6rdLmnop/

====================================================================

Steps to reproduce the problem

1. Go to jsfiddle link provided. Issue is reproduced there.
2. ...

====================================================================

What is the expected behaviour?

...

====================================================================

What is observed behaviour?

...

====================================================================

More Details

• Which browsers/versions does it happen on? All browsers
• Which jQuery/Slick version are you using? Latest from github
• Did this work before? Never worked. Just starting, first time install

[pwhitehouse]

Change your JS code to:

$(document).ready(function(){ $('.test').slick({ dots: true, arrows: true, infinite: true, slidesToShow: 1, slidesToScroll: 1 }); });

Change .test to your ID selector.

[tripwater]

Thanks pwhitehouse, I am not sure how that is different from what I had...but I did as you asked and here is the jsfiddle of what I have now http://jsfiddle.net/tripwater/6rdLmnop/10/ and nothing seemed to change. Thank you again for your time and responding. Hopefully, we can figure this out. :-)

[pwhitehouse]

@tripwater I've just had a look at your code and your selector inside the JS is missing the 1. It's not matching the ID on the div. Make sure both the div ID and the JS selector are the same and it'll work.

[tripwater]

@pwhitehouse thank you! Stupid oversight. I have the it matching now. Knew it had to be something simple :-)

Now, curious, the arrows don't show. Is this something I have to handle with custom css now? Look at my fiddle now and see the bullets are there but no arrows even though they are set to true. http://jsfiddle.net/tripwater/6rdLmnop/14/

**The arrows appear to be present in jsfiddle but hid from view. If you mouse over the left or right edge you get a pointer cursor and clicking will kick off next/prev slide. So they are there just invisible.

Also in my first example before the typo from the copy and paste of your exmaple, I had this:

$(document).on('ready', function() { $("#slider1_container").slick({ dots: true, arrows: true, infinite: true, slidesToShow: 1, slidesToScroll: 1 }); }); What about the above code was wrong just so I know in the future? This is what was in place BEFORE your first reply to my post. Was it the on('ready')? Thank you again

[pwhitehouse]

@tripwater the arrows are showing if you inspect the code. However, they're set to white which is why you can't see them.

Your code wasn't working because I believe ready cannot be used with on. You will need to use DOMContentLoaded instead of ready if you're using the on method.

[tripwater]

@pwhitehouse thank you again for your time and help! Have a great day.

[pwhitehouse]

@tripwater no worries! Glad I could provide you with some help ha! You too, have a good one.

[iamrohitsoni]

[Solved] Images are stacking vertically while slick slider is loading.

It worked for me with a little bit of jQuery and CSS.

jQuery:

$("body").bind("DOMNodeInserted", function() {
    var $this = $(this).find('.slick-initialized');
    window.setTimeout(function(){
        $this.addClass('finally-loaded');
    }, 2000);
});

CSS:

.slick-slider {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

.slick-slider.finally-loaded {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}