CODEWITHSUNDEEP
jqueryhtmlslick.js
QIWEN HU
QIWEN HU

Reputation: 249

Initializing issue when using Slick.js

I'm trying to initialize slick.js function in my webpage and I followed the instructions on http://kenwheeler.github.io/slick/ and copied the "center mode" function as my Jquery function. But I didn't get any arrows/buttons and nav-docs generated in my slide show.

Here's my jsFiddle:

https://jsfiddle.net/woodmanhu/cL0yuaze/

Here's code:

<div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

 $(document).ready(function(){
     $('.your-class').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
    });

CDN I used:

//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js

//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js

//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css

//cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css

Anyone can help me where I missed or I did wrong?

Thank you

Upvotes: 3

Views: 10212

Answers (1)

Kevin
Kevin

Reputation: 2802

You were close. I usually include jquery through the fiddle UI, but since you were importing it, it should have still worked (I think).

One of the other problems was that you had it set to show 3 slides, but only included 3 slides in the content (so there was nothing else to show). I also set a max width on the container to make the scrollable area easier to demo. The next/prev buttons don't show up very well, but that has something to do with the theme you're using.

Either way, here's an updated fiddle with your demo working.

edit: I added a blue background so you can see the next/prev buttons -- this is something you'll have to change in the template. If you want to see the dots below the image, then you'll need to set the dots property to true.

https://jsfiddle.net/cL0yuaze/5/

$(document).ready(function() {
  $('.your-class').slick({
    dots: true,
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    responsive: [{
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    }, {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }]
  });
});
.container
{
  width: 500px;
  margin-left:auto;
  margin-right:auto;
}

body
{
  background: #3498db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet" />

<div class='container'>
  <div class="your-class">
    <div>your content1</div>
    <div>your content2</div>
    <div>your content3</div>
    <div>your content4</div>
    <div>your content5</div>
    <div>your content6</div>
    <div>your content7</div>
    <div>your content8</div>
    <div>your content9</div>
    <div>your content10</div>
    <div>your content11</div>
    <div>your content12</div>
  </div>
</div>

Upvotes: 0

Related Questions