javascript - Issues with Slick carousel incorporation - Stack Overflow

admin管理员组

文章数量:1387360

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 ().

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

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

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 :

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

• javascript
• jquery
• html
• carousel

Share Improve this question Follow edited Nov 20, 2014 at 21:21 Burrich asked Nov 20, 2014 at 15:38 BurrichBurrich 1,30433 gold badges1717 silver badges1616 bronze badges 2

• What do you mean doesn't work? Are there any javascript errors on the page? That jsFiddle is in bits by the way. There are 404 errors amongst other things. – user1017882 Commented Nov 20, 2014 at 15:48
• I means that when i click on the chevrons or dots buttons, there is not any animation and image change. Furthermore, in the developper tools console, nothing is wrong, no errors. – Burrich Commented Nov 20, 2014 at 17:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.

本文标签： javascriptIssues with Slick carousel incorporationStack Overflow