How do I get Slick carousel to work? [closed]


Tags: jquery,css,carousel,slick.js

Problem :

I know this has been asked a lot but I've read through loads of other threads related to Slick yet none of the suggested fixes seem to be working for me.

I've followed the instructions on http://kenwheeler.github.io/slick/ but am just left with a page that has three images stacked on top of each other and doesn't remotely resemble a carousel. I have a feeling that it's because I haven't added anything to my main css stylesheet but have no idea how I'm supposed to style it to turn it from three static images into a carousel! Does anyone have any ideas? The code from the html page is below. Does anyone know what I need to do to the 'fade' div class in order to get it working? Or is not a stylesheet issue?

Any help would be massively appreciated. Thank you!

<!doctype html>

<html>

<head>
    <meta charset="utf-8">
    <title>Title will go here</title>
    <meta name="description" content="Description">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="slick/slick.css" />
    <!-- // Add the new slick-theme.css if you want the default styling -->
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />

</head>

<body>



    <section id="magazine">


        <div class="container group">


            <div class="fade">
                <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
                <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
                <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
            </div>


        </div>


    </section>



    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//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() {
            $('.fade').slick({
                dots: true,
                infinite: true,
                speed: 700,
                autoplay: true,
                autoplaySpeed: 2000,
                arrows: false,
                slidesToShow: 1,
                slidesToScroll: 1
            });

        });
    </script>


</body>

</html>


Solution :

Load your page and 'View Source', try to see if any of your files or stylescripts are missing. Just click on the links and see if it brings you to the source files.

If you're missing any of them that explains your problem. You can try what Samar mentioned.

If all the files are present and linked, check your JavaScript console and if there are any errors, maybe that would be a hint to your problem. Otherwise, I can't find anything glaring in your markup.


    CSS Howto..

    How to implement two sets of CSS Tabs on one page?

    How can I re-size Background Image to full Width of Window with CSS

    Hide/Show Div Depending on Screen Width

    CSS: How do I assign one class to multiple elements?

    How to add image, that overlapping Bootstrap modal?

    How to avoid the div 'move' when mouse hover?

    how to stop CSS hyphenation, no dash between words

    How to use z-index to make an element overlap another element in CSS

    How put a top border to a title that only cover the letters in css

    How do I get a div to change the max-height upon window resize?

    How to make CSS drop down menu appear/change on click

    How to create an image sprite that stretches both horizontal and vertically as a single image?

    How to double an image size in HTML using only CSS?

    CSS DIV as table - how to make all column same height as the highest

    How to override html property created by script (mediaelement.js)

    HTML and CSS: How to lay out a div tag with width:100% and left:300px

    How to add a border-bottom similar to Yahoo! when you scroll the page?

    How to stretch a background-image with css

    How to adjust 100% height to include height of added element

    How to override inline css coming from js

    How to reset inline css applied by jquery?

    CSS Border Color: How to set bottom border color?

    How can I ensure that text is inside rounded div?

    How to load CSS using jquery

    HTML/CSS: How to get the id of sub menu

    How can I make 2 elements share the same rollover state in CSS?

    can't find out how to create a css selector for yahoo stocks page

    How to space text like using tab on website?

    Fontawesome: How to control height and width of stacked icons

    How to apply CSS to only immediate children of a certain class