CODEWITHSUNDEEP
javascriptslick.js
mcaidans
mcaidans

Reputation: 67

Javascript slick.js carousel dragging more than one slide backwards past first element not working

using Swift.js I have a carousel with infinite scrolling=true that works perfectly aside from one issue:

When viewed as 1 | 2 | 3 dragging to the right anything greater than one slide does not work and resets position to previous.

Here is swift documentation: http://kenwheeler.github.io/slick/

Here is an example: https://jsfiddle.net/mcaidans/xk4w8mdc/5/

Try dragging from 1 | 2 | 3 to 6 | 7 | 1.

$(document).ready(function() {
  $('.carousel-slick').slick({
    infinite: true,
    slidesToShow: 3,
    swipeToSlide: true,
    slidesToScroll: 1,
    cssEase: 'ease-out',
    nextArrow: '<i class="slick-btn-next fas fa-arrow-alt-circle-right"></i>',
    prevArrow: '<i class="slick-btn-prev fas fa-arrow-alt-circle-left"></i>',

  });
  /*.on('beforeChange', (event, slick, currentSlide, nextSlide) => {
              if (currentSlide !== nextSlide) {
                  document.querySelectorAll('.slick-center + .slick-cloned').forEach((next) => {
                      // timeout required or Slick will overwrite the classes
                      setTimeout(() => next.classList.add('slick-current', 'slick-center'));
                  });
              }
          });*/
});
.box {
  display: block;
  height: 100px !important;
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

  </head>

  <body>
    <div class="carousel-slick">
      <a class="box">
        <p>1</p>
      </a>
      <a class="box">
        <p>2</p>
      </a>
      <a class="box">
        <p>3</p>
      </a>
      <a class="box">
        <p>4</p>
      </a>
      <a class="box">
        <p>5</p>
      </a>
      <a class="box">
        <p>6</p>
      </a>
      <a class="box">
        <p>7</p>
      </a>
    </div>
  </body>

</html>

Upvotes: 3

Views: 2298

Answers (1)

guijob
guijob

Reputation: 4488

Slick has not been maintained for almost a year, so I suggest you using another tool for this while this bug hasn't fixed: flickity

https://jsfiddle.net/tz83oL7s/2/

$(document).ready(function() {
        $('.carousel').flickity({
          // options
          cellAlign: 'left',
          contain: true,
          pageDots: false,
        });
    });
.carousel-cell {
  width: 33%;
  height: 100px!important;
  border: 1px solid black;
}
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
				
</head>

<body>
<div class="carousel js-flickity"
  data-flickity='{ "contain": true, "prevNextButtons": false, "pageDots": false, "wrapAround": true, "initialIndex": 0, "cellAlign": "left"  }'>
<a class="carousel-cell"><p>1</p></a>
<a class="carousel-cell"><p>2</p></a>
<a class="carousel-cell"><p>3</p></a>
<a class="carousel-cell"><p>4</p></a>
<a class="carousel-cell"><p>5</p></a>
<a class="carousel-cell"><p>6</p></a>
<a class="carousel-cell"><p>7</p></a>
</div>
</body>
</html>

Upvotes: 3

Related Questions