After some exploration, I believe I've cracked the code on this one. The key to solving this puzzle lies in recognizing that the carousel functions as an element with horizontal scrolling capabilities. To address this, one approach is to manually adjust the horizontal scroll using a custom Javascript function.

While the specifics may vary in Next.js, the general concept involves defining a function similar to this:

let carouselElement = . . .; // Identify and store the HTMLElement of the carousel here

function scrollCarousel(targetImageNumber) {
    let carouselWidth = carouselElement.clientWidth;

    // Image numbers range from 1 to 4, hence the subtraction by 1
    let targetImage = targetImageNumber - 1;

    let targetXPixel = (carouselWidth * targetImage) + 1;

    carouselElement.scrollTo(targetXPixel, 0);
}

To implement this solution, you can substitute <a> tags with <button> tags and include an onClick event handler that triggers manual scrolling on the Carousel HTML Element, like so:

<div class="flex justify-center w-full py-2 gap-2">
    <!-- Remember to pass the image number to the function -->
    <button onClick={scrollCarousel(1)} class="btn btn-xs">1</button> 
    <button onClick={scrollCarousel(2)} class="btn btn-xs">2</button> 
    <button onClick={scrollCarousel(3)} class="btn btn-xs">3</button> 
    <button onClick={scrollCarousel(4)} class="btn btn-xs">4</button>
</div>

I've put together an example in Stackblitz (using Svelte, my apologies) showcasing the solution here.

I encountered a similar issue, but managed to find a workaround by utilizing the element.scrollIntoView method.

Initially, it presented the same problem as the fragment approach mentioned by the original poster; however, when invoked with the following parameters:

slide2.scrollIntoView({ block: 'nearest', inline: 'center' })

, it smoothly scrolls horizontally without any vertical movement. For more information, refer to the MDN documentation.

In my view, this solution is somewhat simpler compared to calculating x-coordinates manually, although obtaining a reference to the adjacent slide element is still necessary. The method of doing so may vary based on the JavaScript framework being used, if any.

CLS Cumulative Layout Shift 🔗 https://web.dev/cls/

*ℹ️ Have not yet conducted any testing (currently focused on other tasks, will revisit this). The following list may provide some insights or leads to better understanding of the situation. It does not appear to require heavy scripting, there may be a more elegant solution available (potentially contrary to typical library practices where target-selectors for sidemenus are used without scripting).

Here are some initial thoughts, conjectures, experiences, investigations, links, and in my opinion, the root cause of why this issue occurs.

Let's begin:

1. Initially, it seems like anchor jumping by id, e.g. #slide1 jumps to element with id="slide1", using native anchor jumps, so preventDefault would halt everything (let's rule that out)

Suspecting the unknown width and height of the images as the root cause (necessitating safeNumbers, percentages, vw,vh in safeNumbers rather than just percentages etc. might work, but we require percentages 🥳).

2. Check if animation targets top, right, bottom, left and if so, use: `transform: translate()` instead. Just came to mind: DaisyUI and HeadlessUI could be ideal here.  

3. The issue could potentially be related to loading time:

img { max-width: 100%; height: auto; }

...but don't we typically preload images in carousels anyway? If so, then the dimensions of the image are known – unknown width/height of the image as the root cause – and useLayoutEffect() is where you can calculate and set px values before the render is painted to the screen, right?

4. Aspect Ratio Solution

good luck (will fix the typos another day ^^ when I pick up your end solution hehe)

If you're still facing this issue, here's a solution that worked for me in my React project:

const navigateTo = (event) => {
    event.preventDefault();
    const button = event.currentTarget;

    //Alternative approach
    //const gallery = document.querySelector('.gallery');
    //const gallery = button.parentElement!.parentElement!.parentElement!;
    const gallery = document.querySelector('#imageGallery');

    const link = button.getAttribute('href');
    const targetSlide = gallery.querySelector(link);
    const offsetLeftValue = targetSlide.offsetLeft;
    gallery.scrollTo({ left: offsetLeftValue });
}

<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
   <>
       <a onClick={navigateTo} href={"#slide" + previous} className="btn btn-circle">❮</a>
       <a onClick={navigateTo} href={"#slide" + next} className="btn btn-circle">❯</a>
   </>
</div>

I've provided the above code snippet for each anchor tag responsible for slide switching.

Make sure to adjust the id assigned to "#imageGallery" in the "navigateTo" function according to the daisy ui carousel id in your project. Add an id if necessary.

Although it's a bit tardy, here's a proven solution for this scenario:

import { useEffect, useRef, useState } from "react";

const ImageSlider = ({ images, slideDuration = 5000 }) => {
    const [currentSlide, setCurrentSlide] = useState(0);
    const [isAutoPlayEnabled, setIsAutoPlayEnabled] = useState(true);
    const imageSliderRef = useRef(null)

    const moveToSlide = (targetSlideNumber) => {
        let sliderWidth = imageSliderRef.current?.clientWidth;
        let targetXPos = (sliderWidth * targetSlideNumber) + 1
        imageSliderRef.current?.scrollTo(targetXPos, 0);
    }

    const goToNextSlide = () => {
        const nextIndex = (currentSlide + 1) % images.length;
        setCurrentSlide(nextIndex);
        moveToSlide(nextIndex)
    };

    const goToPreviousSlide = () => {
        const prevIndex = (currentSlide - 1 + images.length) % images.length;
        setCurrentSlide(prevIndex);
        moveToSlide(prevIndex)
    };
    
    useEffect(() => {
        if (!isAutoPlayEnabled) return; 
    
        const intervalId = setInterval(goToNextSlide, slideDuration);
    
        return () => clearInterval(intervalId);
      }, [currentSlide, isAutoPlayEnabled, slideDuration]);

    return <div className="image-slider w-full" ref={imageSliderRef}>
        {images.map((img, idx)=><div key={idx} id={`slide${idx}`} className={`image-slide relative w-full transition ease-in-out duration-700`}>
      <img src={img.url} className="w-full" />
      <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
        <a onClick={goToPreviousSlide} className="btn btn-circle">❮</a> 
        <a onClick={goToNextSlide} className="btn btn-circle">❯</a>
      </div> 
    </div> )}
  </div>
  
}

export default ImageSlider