aydinvivik

I missed it, I did it

I found exactly what I was looking for thank you, but do you have any idea how to make the active item in the middle of the top instead of on the right side? Like this;

I think I did but I'm not sure if I did it right, can you confirm? First I averaged the total number of slides with progress after the animation was completed. onComplete: function () { setActiveSlide(Math.floor(animation.progress() * numSlides)); } After that there was a problem that the last slide was taking the total slide value, I solved this with -1 if the index is equal to the total slide value. function setActiveSlide(index) { if (currentIndex !== index) { currentIndex = index === numSlides ? index - 1 : index; activeSlideInfo.innerText = currentIndex; } } This is how it works now, but I'm not sure if my method is correct. https://codepen.io/vivik/pen/YzdmXwd

@Rodrigo I have taken a lot of your time on this subject but I am in the process of learning, I have one last problem, I can't get the activeIndex correctly. https://codepen.io/vivik/pen/YzdmXwd

Thank you @mvaneijgen

Thank you for your support

Thank you @Rodrigo now I understand, only the animation is resetting but not back to the beginning, can I make it happen?

Hello, how can I reset the animation responsively on this work? For example, you came by dragging it to slide 3 and after resizing the browser to smaller than 768px, I need to reset the animation and make it start from the beginning. When I add the following code, the animation is reset, but then when I rewiden the browser, the animation and draggable do not work. const isMobile = window.matchMedia("(max-width: 768px)"); function resize() { //... if (isMobile.matches) { animation.progress(0).kill(); draggable.startProgress = animation.progress(); } } Codepen demo: https://codepen.io/vivik/pen/YzdmXwd

Hello again, how can I reset the animation responsively on this work? For example, you came by dragging it to slide 3 and after resizing the browser to smaller than 768px, I need to reset the animation and make it start from the beginning. When I add the following code, the animation is reset, but then when I rewiden the browser, the animation and draggable do not work. const isMobile = window.matchMedia("(max-width: 768px)"); function resize() { //... if (isMobile.matches) { animation.progress(0).kill(); draggable.startProgress = animation.progress(); } } Codepen demo: https://codepen.io/vivik/pen/YzdmXwd

Thank you very much for your feedback.

Yes, that's great, thank you. But how do I loop it. I mean, can I switch back to slide 1 after slide 10?

Hello, I want to use a slider made with Draggable Plugin from the examples in the forum with a few modifications. But I have a problem, if I drag the active slide halfway, it skips the next slide and moves to the next slide. As you can see in the codepen example below, if I drag the slide number 1 halfway, it goes to 3 when it should go to 2. https://codepen.io/vivik/pen/qBLzxVg

That's exactly what I want, thank you very much.

Thank you for your feedback and yes @PointC's example is the one I found but I have a problem with it. If I change the location of the boxes, the buttons run different boxes from the same index. You can see it in the example below. https://codepen.io/vivik/pen/OJrYVqx

Hello, I have 2 divs and 2 buttons to run them. I can create separate timelines for these two animations, but I don't want to rewrite the same code for the same animation. How can I make it work as 2 different divs and 2 different buttons over a single animation? Codepen demo is below. When I searched in the forum I found a similar example, but in that example it is run from the obj index, but since the location of the buttons and divs can change in me, this time the wrong animations can work with the wrong index. How can I make it work with data-attribute or more differently with button mapping? https://codepen.io/vivik/pen/OJrYVMX