CODEWITHSUNDEEP
javascripthtmljqueryslick.js
FixedDoor47
FixedDoor47

Reputation: 3

'Slick' carousel JQuery code not functioning/loading

Attempting to use the Slick carousel, following the 'usage' on their website to the letter and having no luck.

My code:

    <html>
  <head>
  <title>slick test</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <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>

  <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(){
      $('.your-class').slick({
        setting-name: setting-value
      });
      $('.single-item').slick();
    });
  </script>

  </body>
</html>

I assume it's something wrong with JQuery as VS-code shows errors in the initialization script.

I have tried using the CDN versions of slick and a newer version of JQuery and neither seem to work. Other than the images in the div and the 'single item' script, this is identical to the code offered on the slick website.

Upvotes: 0

Views: 533

Answers (1)

Kovo
Kovo

Reputation: 574

  • You are missing 'http(s)://' prefixes in your code for CDN content
  • Slick tutorial (links) for CDN too.
  • You let part of example code in Your code that is nowhere defined

working code:

  <html>
  <head>
  <title>slick test</title>
  <link rel="stylesheet" type="text/css" href="https:///cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
  </head>
  <body>

  <div class="your-class">
    <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>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        //setting-name: setting-value
      });
      $('.single-item').slick();
    });
  </script>

  </body>
</html>

Upvotes: 1

Related Questions