I'm working on a circular carousel based on an Adobe XD wireframe.
The carousel "slides" are arranged using an auto-generated CSS Grid template. Each grid-item is assigned a slide position classon page load.
The navigation using the buttons work correctly.
the fun begins when I implement drag functionality to the top three slides. The dropped slide is positioned incorrectly and the incorrect positioning continues through it's placement throughout the carousel.
I attempted to retrieve the "Preview Slide" offset ( $(<grid-item>).position() in Draggable.onPressInit(...) and apply the new position in Draggable.onDragend(...) before updating the slide's class.
Example:
<main>
<grid-container>
<grid-item id="slide0" class="slide">Slide 1</grid-item>
<grid-item id="slide1" class="slide">Slide 2</grid-item>
<!-- Additional grid-items -->
</grid-container>
</main>
Draggable.create({
type:'x'
,overshootTolerance: 0
, minimumMovement: 10
,onPressInit: function(e) {
previewPosition=$(previewSlide).position();
lastPosX= this.x;
lastPosY= this.y;
}
,onDragEnd:function(e) {
if (this.hitTest(previewSlide, overlapThreshold)) {
tl.to(this.target,1,{x:previewPosition.left});
moveNext(0);
}else{
//return to original position
tl.to(this.target,1,{x:lastPosX,y:lastPosY});
}
}
});
Is my logic just off, or, am I missing something in the using GSAP and getting the correct grid-item's position?
CodePen: https://codepen.io/aGeekonaBike/pen/eYOVOaM