Slick Slider Not Working
Slick Slider Not Working
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"/>
- <!-- Add the slick-theme.css if you want default styling -->
- <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> <!-- end -->
- <div class="slide slide-2">
- <img src="common/art/projects/ofs/artichoke_rd4.png" >
- </div> <!-- end -->
- <div class="slide slide-3">
- <img src="common/art/projects/ofs/artichoke_rd4.png" >
- </div> <!-- end -->
- </div> <!-- endSlideViewer -->
- <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>