CODEWITHSUNDEEP
javascripthtmlcss
Hamza
Hamza

Reputation: 630

SlickJS not working only html viewed

I am trying to create a slideshow using SlickJS.

I have followed the guidelines to create this slideshow however instead of getting the actual slideshow I get a bunch of HTML instead. Here is my work:

<html>

<head>
  <title>My Now Amazing Webpage</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>1</div>
    <div>2</div>
    <div>3</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({
        arrows: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
      });
    });
  </script>

</body>

</html>

Upvotes: 1

Views: 41

Answers (2)

Connor Smyth
Connor Smyth

Reputation: 347

The issue is you are loading the default styles with...

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />

If you remove this line you can see the buttons and elements slide appropriately. You can then style the elements with your own css more easily like creating your own custom buttons.

Upvotes: 1

fixatd
fixatd

Reputation: 1404

I suspect it has something to do with your imports. I've tried using the latest version of jQuery and slickjs and that seems to work locally. See the code below:

<html>

<head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
</head>

<body>
  <div class="your-class">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.your-class').slick({
        arrows: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
      });
    });
  </script>
</body>

</html>

Upvotes: 1

Related Questions