Slider / jump

[akiarostami]

In the Carousel component, when we change slides using prev/next or using the indicators, there is a sudden jump in the scroll location to make the Carousel the top component of the page. It would be ideal to change the page without any change in the page scroll position.

[saadeghi]

@akiarostami daisyUI's Carousel is working with anchor links and as far as I know, this is the cleanest way to make it work with CSS (without JS).
And because it's an anchor link, browser automatically scrolls to the top of target.
You can make the scroll smoother by adding scroll-behavior: smooth to the body. But I'm not sure if there's a way to disabling vertical scroll but keeping the horizontal scroll that we need.

[akiarostami]

Thank you @saadeghi for the promp response. You are correct, I can't think of any way of doing this without javascript. Your work with CSS alone is so impressive I forget you don't have / use JS!
And thanks for the top re: scroll-behavior: smooth. Unfortunately it didn't help me though. Perhaps I'm missing something. I'll try again later.
You can close this issue.

[Vermorxt]

Faced the same issue and was not able to find a css fix, but with js on btn click I was able to handle the behaviour like expected:

scrollIntoView({ behavior: 'smooth', block: 'nearest' })

[BBSCDigital]

First thanks! DaisyUI is amazing.

I'm leaving here my solution for anyone interested in solving this little limitation

const goTo = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
        event.preventDefault()
        const btn = event.currentTarget                        

        //Equivalent
        //const carousel = document.querySelector('.carousel')
        //const carousel = document.querySelector('#carouselId')
        const carousel = btn.parentElement!.parentElement!.parentElement!
                
        const href = btn.getAttribute('href')!
        const target = carousel.querySelector<HTMLDivElement>(href)!
        const left = target.offsetLeft
        carousel.scrollTo({left: left})
    }

<a onClick={goTo} href='#idToCarouselItem' className="btn btn-circle opacity-40">❯</a>

ps: I'm using DaisyUI in ReactJS with typescript

[Markkop]

Thank you for sharing this solution!
I'd like to add that when using two carousels side-by-side, make sure to add the relative tailwind class name to the carousel parent element so this offset workaround work properly.
That's because the offsetLeft value will be relative to the document's page instead of its parent if the parent has a static position (default) as stated on https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent

[vasquezjesus2710]

BBSCDigital solution worked like a charm

[joaquimnetocel]

Here is what worked for me in svelte:

<script lang="ts">
	const goTo = (event: Event) => {
		event.preventDefault();
		const btn = event.currentTarget as HTMLSelectElement;
		const carousel = btn.parentElement!.parentElement!.parentElement!;
		// EQUIVALENT: const carousel = document.querySelector('.carousel')
		const href = btn.getAttribute('href')!;
		const target = carousel.querySelector<HTMLDivElement>(href)!;
		const left = target.offsetLeft;
		carousel.scrollTo({ left: left });
	};
</script>

<div class="w-full carousel">
	<div id="slide1" class="relative w-full carousel-item">
		<img
			alt="alt"
			src="https://s3.ap-south-1.amazonaws.com/litekart.in/img/untitled-design-htiheqvawifr.png"
			class="w-full"
		/>
		<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
			<a on:click={goTo} href="#slide4" class="btn btn-circle">❮</a>
			<a on:click={goTo} href="#slide2" class="btn btn-circle">❯</a>
		</div>
	</div>
	<div id="slide2" class="relative w-full carousel-item">
		<img
			alt="alt"
			src="https://s3.ap-south-1.amazonaws.com/litekart.in/img/untitled-360-190px-1500-380px-vzlc6ffmy4ej.png"
			class="w-full"
		/>
		<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
			<a on:click={goTo} href="#slide1" class="btn btn-circle">❮</a>
			<a on:click={goTo} href="#slide3" class="btn btn-circle">❯</a>
		</div>
	</div>
	<div id="slide3" class="relative w-full carousel-item">
		<img
			alt="alt"
			src="https://s3.ap-south-1.amazonaws.com/litekart.in/img/untitled-360-190px-1500-380px-vzlc6ffmy4ej.png"
			class="w-full"
		/>
		<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
			<a on:click={goTo} href="#slide2" class="btn btn-circle">❮</a>
			<a on:click={goTo} href="#slide4" class="btn btn-circle">❯</a>
		</div>
	</div>
	<div id="slide4" class="relative w-full carousel-item">
		<img
			alt="alt"
			src="https://s3.ap-south-1.amazonaws.com/litekart.in/img/untitled-360-190px-1500-380px-vzlc6ffmy4ej.png"
			class="w-full"
		/>
		<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
			<a on:click={goTo} href="#slide3" class="btn btn-circle">❮</a>
			<a on:click={goTo} href="#slide1" class="btn btn-circle">❯</a>
		</div>
	</div>
</div>