CODEWITHSUNDEEP
javascriptjqueryhtmlcarouselslick.js
Lamar Tony Daughma
Lamar Tony Daughma

Reputation: 124

slick carousel not displaying / working

I'm using https://github.com/kenwheeler/slick as a carousel for my website. I have followed the tutorial to a T, everything is (to my knowledge) how its meant to be. here's the code

$(document).ready(function(){
  $('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
    });
  $(".slider-nav").slick({
    slidesToShow: 3,
    slidesToScroll, 1,
    asNavFor: '.slider',
    dots: true,
    focusOnSelect, true
    });
  });
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <!--Semantic import-->
  <script src="assets/semantic/semantic.min.js"></script>
  <link href="assets/semantic/semantic.min.css" rel="stylesheet" />

  <!-- Slick -->
  <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <!--Font-->
  <link href="https://fonts.googleapis.com/css?family=Exo+2|Ubuntu" rel="stylesheet">
  <!-- Javascript -->
  <script src="js/root.js"></script>
  <script src="js/gamesdev.js"></script>

</head>
<body>
  <div class="pusher">
    <div id="page">
      <div class="ui container">
        <div class="slider">
          <div><h3>1</h3></div>
          <div><h3>2</h3></div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
        </div>
        <div class="slider-nav">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

I've cut out all the unnecessary code but here is the result

https://i.sstatic.net/7EiSo.png

I have no damn clue what's going wrong, I've combed through it for like an hour, maybe two.

Upvotes: 1

Views: 3146

Answers (1)

Mosh
Mosh

Reputation: 471

It's probably not working because of a syntax error. You have a comma instead of a colon

Change slidesToScroll, 1, to slidesToScroll: 1,

And change focusOnSelect, true to focusOnSelect: true

Upvotes: 2

Related Questions