Scroll back to first element of a carousel

[carla]

Hello

I have a carousel with about 60 images. I want to create a button to scroll back to the first element of the carousel. Is there an easy way to do this?

Here is the link to my website: https://carlatest321.ch/loocl/work-copy5/

I have already created an apricot colored button on the left side.

Thanks for your help.
Best, Carla

[arminunruh]

create a text element that says "go back"

or sth

then right click it and "set html class and id" set the class: carouselbutton

then in lay options → custom head content:

<script>
	jQuery(document).on("click", ".carouselbutton", function(e){
		e.preventDefault();
		e.stopPropagation();
		var $carousel = jQuery(".lay-carousel-wrap").first();
		if( $carousel.length > 0 ) {
			var mySwiper = $carousel.data('myswiper');
			// index, speed
			mySwiper.slideTo(0, 300);
		}
	})
</script>

does it worx?
havent tried this code, should work i think

[arminunruh]

lmk when u release the website its prtty cool i want to add it to laytheme.com

[carla]

@arminunruh
Hello Armin
Thank you very much for your help. It works, but there is still one thing that is not quite round yet. For example, when I am at image 10 and press the button, it goes back to position 0 and does an extra round right away. That wouldn't be too tragic, but it would be great to see the images during that. It would be nice if it looked like you were scrolling back yourself. Can you help me with this?

[carla]

@arminunruh
and yes, I'll be sure to let you know. I'm happy, you like the site :-)

[arminunruh]

and does an extra round right away.

what do u mean i dont understand the sentence

// index, speed
mySwiper.slideTo(0, 300);

300 is the speed which it takes to go to the first slide, maybe u can increase it to like 1000

[carla]

@arminunruh

I've formulated it a bit complicated. Here is a new attempt: At the moment the carousel rotates forward until it is back at 0. The first and the last frames are visible, in between I see the yellow background.

Is it possible to reverse the direction, so it looks like rewinding / fast scrolling back? And, is it possible that the images in between are also displayed?

Thanks for your help.

[arminunruh]

no sorry not possible :/

[carla]

This post is deleted!

[carla]

@arminunruh

No problem.. A friend was able to help me, now everything works as desired. Thanks anyway for your support. And by the way: The website is now online: www.lucaschenardi.ch

One more question: you asked via Instagram a few months ago what could be useful features. I often wished I could "lock" elements / text frames as an administrator, so they can't be moved by the editors.... maybe this is possible in the future :-)

Best regards, Carla

[arminunruh]

thanks

ok!
very nice website congratz

[Alex F]

@carla Hi Carla, your created Website is very inspiring. Thank you for sharing your work. Just one question: how did your friend solve the problem you issued with your button?

[arminunruh]

here are all of the swiper methods:

https://swiperjs.com/swiper-api

you can just look at the code of his website, he used this js

<script>
	jQuery(document).on("click", ".carouselbutton", function(e){
		e.preventDefault();
		e.stopPropagation();
		var $carousel = jQuery(".lay-carousel-wrap").first();
		if( $carousel.length > 0 ) {
			var mySwiper = $carousel.data('myswiper');
			// index, speed
			
			var currentIndex = mySwiper.activeIndex - mySwiper.loopedSlides;
			
			var goToStart = 0;
			
			if(currentIndex > mySwiper.loopedSlides / 2) {
    			goToStart = mySwiper.loopedSlides;
			}
			
			mySwiper.slideToLoop(goToStart, 2000, 'easeInOutExpo');


		}
	});
</script>