Keen Slider Issue

[wanton fossil]

Hi @autumn sleet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the knowledge sources provided, there is no direct mention of Keen Slider or its integration with Next.js. However, there are relevant patterns and best practices for using third-party client-only libraries (like sliders) in Next.js App Router.

Key points from the docs:

• When using a third-party component that relies on client-only features (like DOM access, hooks, etc.), you must wrap it in a Client Component using the "use client" directive at the top of the file. You have already done this, which is correct Server and Client Components: Third-party components.
• All imports and child components of a file marked with "use client" are considered part of the client bundle, so you do not need to add "use client" to every child component Server and Client Components: Examples.

Potential Issues in Your Code:

1. Incorrect Usage of idx in the Button:
   In your code, you have:

   <button
     onClick={() =>
       instanceRef.current?.moveToIdx(idx)
     }
     className={
       'mx-1 h-2 rounded-full transition-all ' +
       (currentSlide
         ? 'w-6 bg-blue-500'
         : 'w-2 bg-gray-300')
     }
   ></button>
   

   But idx is not defined anywhere in your code. You likely want to render a button for each slide and use the index of the slide as idx.

2. Missing Mapping for Dots:
   You need to map over the number of slides to render the navigation dots/buttons. For example:

   {Array.from({ length: 5 }).map((_, idx) => (
     <button
       key={idx}
       onClick={() => instanceRef.current?.moveToIdx(idx)}
       className={
         'mx-1 h-2 rounded-full transition-all ' +
         (currentSlide === idx
           ? 'w-6 bg-blue-500'
           : 'w-2 bg-gray-300')
       }
     ></button>
   ))}
   

Fixed Example:

'use client'

import { useState } from 'react'
import 'keen-slider/keen-slider.min.css'
import { useKeenSlider } from 'keen-slider/react'

const KeenSlider = () => {
  const [currentSlide, setCurrentSlide] = useState(0)
  const [loaded, setLoaded] = useState(false)

  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
    loop: false,
    slides: {
      origin: 'auto',
      perView: 1,
      spacing: 15,
    },
    breakpoints: {
      '(min-width: 640px)': {
        slides: {
          origin: 'auto',
          perView: 2,
          spacing: 15,
        },
      },
      '(min-width: 930px)': {
        slides: {
          origin: 'auto',
          perView: 3,
          spacing: 15,
        },
      },
      '(min-width: 1270px)': {
        slides: {
          origin: 'auto',
          perView: 4,
          spacing: 15,
        },
      },
    },
    initial: 0,
    slideChanged(slider) {
      setCurrentSlide(slider.track.details.rel)
    },
    created() {
      setLoaded(true)
    },
    destroyed() {
      setLoaded(false)
    },
  })

  const slides = [1, 2, 3, 4, 5]

  return (
    <div className='h-screen flex-center flex-col'>
      <div ref={sliderRef} className='keen-slider'>
        {slides.map((slide) => (
          <div key={slide} className='keen-slider__slide'>{slide}</div>
        ))}
      </div>

{loaded && instanceRef.current && (
<div>
{slides.map((_, idx) => (
<button
key={idx}
onClick={() => instanceRef.current?.moveToIdx(idx)}
className={
'mx-1 h-2 rounded-full transition-all ' +
(currentSlide === idx
? 'w-6 bg-blue-500'
: 'w-2 bg-gray-300')
}
></button>
))}
</div>
)}
</div>
)
}

export default KeenSlider

**Summary:**  
- Make sure to map over your slides to render navigation dots.
- Use the slide index (`idx`) for navigation.
- Keep the `"use client"` directive at the top.

This approach follows the recommended pattern for using third-party client-only components in Next.js App Router [Server and Client Components: Third-party components](<https://nextjs.org/docs/app/getting-started/server-and-client-components#third-party-components>).

If you still encounter issues, please check for any console errors or issues with the Keen Slider library itself, as the Next.js integration pattern above is correct.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------