Search jQuery

jQuery Forum

Slick Slider Not Working

in Using jQuery Plugins • 6 years ago

I am trying to use the Slick slider plugin. I tried downloading the physical files and linking to them and I have tried linking to the CDN file paths for them, but nothing happens. Nothing is styled and nothing functions. I used the Slick set up tutorial and looked up solutions, but alas, nothing helps. I'm hoping someone can assist me on this. Here is my simplified test of the Slick Slider, this one uses the CDN file paths:

<!DOCTYPE HTML>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Slick Slider Test</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js" integrity="sha256-JklDYODbg0X+8sPiKkcFURb5z7RvlNMIaE3RA2z97vw=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js" integrity="sha256-JklDYODbg0X+8sPiKkcFURb5z7RvlNMIaE3RA2z97vw=" crossorigin="anonymous"></script>
</head>
<div class="slide-viewer">
<div class="slide slide-1">
<img src="common/art/projects/ofs/artichoke_rd4.png" >
</div>
<div class="slide slide-2">
<img src="common/art/projects/ofs/artichoke_rd4.png" >
</div>
<div class="slide slide-3">
<img src="common/art/projects/ofs/artichoke_rd4.png" >
</div>
</div>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script>
$(".slider_viewer").slick({
// normal options...
infinite: false,
// the magic
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
infinite: true
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 2,
dots: true
}
}, {
breakpoint: 300,
settings: "unslick" // destroys slick
}]
});
</script>
</body>
</html>

Replies(1)

watusiware

Re: Slick Slider Not Working

6 years ago

You didn't load jQuery!

And you loaded the jQuery-migrate plugin twice! (Do you actually need it?) I see the documentation does show jQuery-migrate being loaded. I am skeptical about any plugin that requires jquery-migrate! Usually it is abandonware, but I see slickslider was last updated a month ago. You might query the author as to the need for jquery-migrate.

Load jQuery first, before any plugins.

The documentation for SlickSlider is poor in at least one regard: in some places, it doesn't show jQuery being loaded. I guess the author assumes users will know they need to load jQuery first. (But if you scroll down, it does show jQuery being loaded.)

USUALLY, "theme" files should be loaded before base CSS files. But that is just common convention. SlickSlider might be different - refer to it's documentation for proper CSS load order.

Top Reply

Response title

Attachments

jQuery Forum

Slick Slider Not Working

Replies(1)

Re: Slick Slider Not Working

Statistics

Tags

Actions