CODEWITHSUNDEEP
javascriptjqueryhtmlcarousel
Burrich
Burrich

Reputation: 1304

Issues with Slick carousel incorporation

I want to use Slick carousel on my website but i can't make the first example (single item) from kenwheeler.github.io/slick/ to work. Maybe i forgot something but i cannot find what.

Here is my code (also on jsfiddle) :

HTML

<div class="slider single-item slick-initialized slick-slider">
  <div class="slick-list draggable" tabindex="0">
    <div class="slick-track" style="opacity: 1; width: 4480px; transform: translate3d(-560px, 0px, 0px);">
      <div class="slick-slide slick-cloned" index="-1" style="width: 560px;"><h3>6</h3></div>
      <div class="slick-slide slick-active" index="0" style="width: 560px;"><h3>1</h3></div>
      <div class="slick-slide" index="1" style="width: 560px;"><h3>2</h3></div>
      <div class="slick-slide" index="2" style="width: 560px;"><h3>3</h3></div>
      <div class="slick-slide" index="3" style="width: 560px;"><h3>4</h3></div>
      <div class="slick-slide" index="4" style="width: 560px;"><h3>5</h3></div>
      <div class="slick-slide" index="5" style="width: 560px;"><h3>6</h3></div>
      <div class="slick-slide slick-cloned" index="6" style="width: 560px;"><h3>1</h3></div>
    </div>
  </div>

  <button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>
  <button type="button" data-role="none" class="slick-next" style="display: block;">Next</button>
  <ul class="slick-dots" style="display: block;">
    <li class="slick-active"><button type="button" data-role="none">1</button></li>
    <li><button type="button" data-role="none">2</button></li>
    <li><button type="button" data-role="none">3</button></li>
    <li><button type="button" data-role="none">4</button></li>
    <li><button type="button" data-role="none">5</button></li>
    <li><button type="button" data-role="none">6</button></li>
  </ul>
</div>

jQuery

$(document).ready(function() {
  $('.single-item').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  });
});

Thanks.

Edit : When i check event listeners on buttons with the developper tools, i've nothing, contrary to the same carousel on slick documentation (http://kenwheeler.github.io/slick/#demos).

On the Slick website, there is a click event listener on the next arrow button, as you can see on the screen : event listeners

I don't know why this event listener doesn't exist in local (jquery is correctly loaded by the way).

Upvotes: 0

Views: 10126

Answers (1)

Jason
Jason

Reputation: 848

Many mistakes on your jsfiddle

  • Your HTML was a copy-paste that is already marked up by the library
  • You need to load jQuery before slick
  • You included a 1.12 jquery that doesnt exist(didn't matter but worth pointing out)

HTML:

<section id="features" class="blue">
    <div class="content">
        <div class="single-item">
            <div><h3>1</h3></div>
            <div><h3>2</h3></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
            <div><h3>5</h3></div>
            <div><h3>6</h3></div>
        </div>
    </div>
</section>

JS: 

$(document).ready(function() {
    $('.single-item').slick({
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    });
});

Here's a jsfiddle.

Upvotes: 4

Related Questions