Not Working Properly on Nexjs 13 app router

[NzakiCodes]

Not Working Properly on Nexjs 13 app router:

It creates a fake slide 1 and hides it then counts from 2 when it reaches 1 it shows empty slate

[rmolinamir]

Hi @NzakiCodes, thanks for submitting the issue. Do you happen to have a quick reproducible example? Maybe a fork, I know it's annoying but I'd really appreciate it. Also wanted to confirm, does it break even if you put the slider inside a client component? i.e. using the use client directive.

[jay-guro]

Hey there! Love this package. Issue is still ongoing. I just tried implementing this moments ago and saw the same as @NzakiCodes. First slide is blank (skipped over). If you add SideNav component, slide counter will start at 2, not 1.

next v14.0.0 hero-slider v3.2.0

Here is the code that i've added to my @app/page.tsx to produce a minimal working example for my use case:

'use client'
import HeroSlider, { Nav, Slide } from 'hero-slider'
import img1 from '/public/assets/hero/img-1.webp'
import img2 from '/public/assets/hero/img-2.webp'
import img3 from '/public/assets/hero/img-3.webp'
import img4 from '/public/assets/hero/img-4.webp'

export default function Slider() {
    return (
        <HeroSlider
            className='py-[5vh]'
            height={'90vh'}
            autoplay={{
                autoplayDuration: 4000,
                autoplayDebounce: 2000,
            }}
            accessibility={{
                shouldDisplayButtons: false,
            }}
            animations={{
                slidingAnimation: 'fade',
                sliderFadeInDuration: 100,
            }}
            controller={{
                initialSlide: 0,
                slidingDuration: 500,
                slidingDelay: 200,
            }}
        >
            <Slide background={{ backgroundImageSrc: img1.src }} />
            <Slide background={{ backgroundImageSrc: img2.src }} />
            <Slide background={{ backgroundImageSrc: img3.src }} />
            <Slide background={{ backgroundImageSrc: img4.src }} />
            <Nav />
        </HeroSlider>
    )
}

Note: I also use this package (v3.2.0) in another NextJS project of mine that is built on version 13.4.19 (also app dir) so I replaced my code there temporarily with the above code to see if it'll work properly and after doing that, I don't see this issue anymore. So i've since downgraded the next version in my new project to version 13.4.19 which fixed the issue for me. I proceeded to try to test which next version broke this package. I only had to upgrade to the next available non-canary version, version 13.5.1, (since 13.5.0) didn't want to install. After upgrading to v13.5.1, the issue appeared again. This version had a ton of core changes. I upgraded the older project to 13.5.1 when it came out and had to immediately revert due to tons of breaking changes and never bothered upgrading since.

Hope the above helps @NzakiCodes and points @rmolinamir in the right direction. Would love to see this fixed in newer Next versions!

Here are the release notes for Next v13.5.1 defining the core changes: https://github.com/vercel/next.js/releases/tag/v13.5.1

[eftechnology]

Same Problem in Next v13.5.6

[rick427]

Having this same issue as well on Next v14.0.2

[rmolinamir]

Thank you all for the feedback! Appreciate all the details @jay-guro, and sorry for being MIA.

I will look into this issue during the weekend to add support for Next.js (particularly v14).

[jay-guro]

Let me know if you need me to do some more testing after you implement support. I've noticed another problem that may be due to NextJS but I'm still uncertain of that. Will most likely create another issue for this later today. Might be a react issue and not a Next specific issue, will have to test further before anything else.

[rmolinamir]

Hi all.

I worked on making hero-slider compatible with RSC environments, please find an example here and further documentation here.

Closing the issue, please let me know if you encounter any problems.