SlickBackwards

When sliding from conf 1 | 2 | 3 does not work if slide back more than 1

by bizamajig

HTML

<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 xxx-js-flickity"
  data-xxx-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>

CSS

.carousel-cell {
  width: 300px;
  height: 100px!important;
  border: 1px solid black;
}

JavaScript

$(document).ready(function() {
      $('.carousel').flickity({

          //Setup
          //cellSelector: undefined,
          accessibility: true,
//          setGallerySize: true,
          resize: true,

          //Cell Position
          cellAlign: 'left',
          contain: true,
          pageDots: false,
          imagesLoaded: true,
          wrapAround: true,
          initialIndex: 0, // Zero-based index, 0, 1, 2...
          percentPosition: true,
          rightToLeft: false,


          //Behavior
          draggable: true,
          dragThreshold: 25,
          selectedAttraction: 0.1,
          friction: 0.5,
          freeScroll: true,
          freeScrollFriction: 0.1,
          wrapAround: true,
          groupCells: false,
          lazyLoad: false,
          bgLazyLoad: false,
          autoPlay: true,
          adaptiveHeight: false,
//				!IMPORTANT - Explicitly setting watchCSS to false, it is default, too
					watchCSS: false,
					asNavFor: false,

					//UI
          prevNextButtons: true,
          pageDots: false,
          arrowShape: {
            x0: 10,
            x1: 60, y1: 50,
            x2: 70, y2: 40,
            x3: 30
          }

			});
});