Ttykuu

I got a bit of a strange JS issue that I could use help on if anyone has time…

Basically if you flick the slider just the wrong way then it'll spin infinitely rather than just settle on a slide and stop. It's a bit hard to get it to do that. I think it has something to do with spinning past the gap between the first/last slide, but I can't quite tell where the problem is.

Do you see anything wrong with the code that might be the cause of that behaviour?

Here’s a reduced case:
https://codepen.io/Julix/pen/xexawP
and proof that it still works:
https://www.youtube.com/watch?v=RQQwsAq5BQU

Here's the JS code from that reduced case:

// Flickity slider from external js: flickity.pkgd.js
// Prev- and next classes from external js: https://codepen.io/desandro/pen/wWQQwN.js 
"use strict";

var $carousel = $('.carousel-main').flickity(
 "wrapAround": true,
 "draggable": true,
 "prevNextButtons": false,
 "pageDots": false
);
var $nav = $('.carousel-nav').flickity(
 "on": 
 ready: choseCenterSlide,
 scroll: choseCenterSlide
 ,
 "asNavFor": ".carousel-main",
 "wrapAround": true,
 "percentPosition": false,
 "draggable": true,
 "pageDots": false,
 "prevNextButtons": false
);
;
var navDragging = false;
$nav.on('dragStart.flickity', function () 
 return navDragging = true;
);
$nav.on('settle.flickity', function () 
 return navDragging = false;
);
$nav.data('flickity').resize();

function choseCenterSlide() 
 // check if this.x is within slideableWidth
 var currentX = this.x > 0 ? -this.slideableWidth + this.x : this.x < -this.slideableWidth ? this.slideableWidth + this.x : this.x; // calculate closest slide

 var distances = this.slides.map(function (slide) 
 return -slide.target;
 );
 var closestDistance = distances.reduce(function (prev, curr) 
 return Math.abs(curr - currentX) < Math.abs(prev - currentX) ? curr : prev;
 );
 var closestSlideIndex = distances.indexOf(closestDistance); // early return

 if (closestSlideIndex == this.scrollSlideIndex) return; // register 

 if (this.scrollSlideIndex == null) this.scrollSlideIndex = this.selectedIndex; // change scrollSlide

 this.slides[this.scrollSlideIndex].cells.forEach(function (cell) 
 cell.element.classList.remove('is-closest');
 );
 this.slides[closestSlideIndex].cells.forEach(function (cell) 
 cell.element.classList.add('is-closest');
 ); // update state variable

 this.scrollSlideIndex = closestSlideIndex; // update selectedSlide

 if (navDragging) 
 this.select(this.scrollSlideIndex);

 if (this.navCompanion) 
 this.navCompanion.select(this.scrollSlideIndex);