CODEWITHSUNDEEP
jquerycarouselslick.js
user753531
user753531

Reputation:

Slick Carousel Difficulties to Implementation

For a long time I'm searching for a simple slideshow/gallery plugin with lazy-loading support and today I came across Slick.

But Slick site is more focused in show all the power of plugin instead of guide newcomers to the basic implementation. And although I followed the step-by-step provided I couldn't really implement it.

I simplified the markup as much as I could so I could be certain I was not doing anything wrong:

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    </head>

    <body>

        <div class="slider lazy">
            <div>
                <div class="image">
                    <img data-lazy="http://i.imgur.com/Ik3yGs8.jpg"/>
                </div>
            </div>
            <div>
                <div class="image">
                    <img data-lazy="http://i.imgur.com/Bw2NgHm.jpg"/>
                </div>
            </div>
            <div>
                <div class="image">
                    <img data-lazy="http://i.imgur.com/uNPeNKN.jpg"/>
                </div>
            </div>
            <div>
                <div class="image">
                    <img data-lazy="http://i.imgur.com/ys8QsLT.jpg"/>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="slick/slick.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){
                $('.lazy').slick({
                  lazyLoad: 'ondemand',
                  slidesToShow: 1,
                  slidesToScroll: 1
                });
            });

        </script>

    </body>

</html>

Because I don't have a set of images to use I picked some from a random album hosted on IMGUr but this structure simply doesn't work as intended by code fragment described in "manual".

For example, I don't see the navigation arrows. Through Chrome Element Inspector I've added some border to them hoping to see where they're positioned without success.

After dig some information, from other codes other then the one I aimed in the "manual" I've dots: true and a small basic navigation appeared. Finally started working, but not the way I wanted.

Also, my keyboard does nothing. Later I've found that accessbility: true would enabled it.

But, in general, the implementation is harder than it should. Is there another site acting as unofficial manual or something that explain the usage in a better way than just throw dozens of examples and hope anyone can figure out how to work by testing every API option?

Upvotes: 1

Views: 5670

Answers (3)

Nikola Papic
Nikola Papic

Reputation: 1

I am using slick carousel and it works fine for me. They documented all very well. In settings section you can find explanation how to use provided settings in order to customize your carousel.

Upvotes: 0

Stacy Simpson
Stacy Simpson

Reputation: 41

I was struggling with the same; turns out, you need a colored background to see them. Or, change their color. Reference: https://github.com/kenwheeler/slick/issues/440

Upvotes: 0

Guy Schalnat
Guy Schalnat

Reputation: 1717

I tested a few of these, and ended up using owl carousel instead. But that was for my particular need (which was content, not images, for touchphones). I never actually was happy about any of them.

Upvotes: 0

Related Questions