Auto Move #452

Activity

1. h9ee commented on Sep 5, 2026

   

   h9ee

   on Sep 5, 2026

   Last edited by h9ee

   More actions

   import * as React from "react"
   import "./styles.css"
   import { useKeenSlider } from "keen-slider/react"
   import "keen-slider/keen-slider.min.css"
   
   const animation = {
     duration: 5000,
     easing: (t: number) => t,
   }
   
   export default function App() {
     const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
       loop: true,
       renderMode: "performance",
       drag: false,
   
       created(s) {
         s.moveToIdx(5, true, animation)
       },
   
       updated(s) {
         s.moveToIdx(s.track.details.abs + 5, true, animation)
       },
   
       animationEnded(s) {
         s.moveToIdx(s.track.details.abs + 5, true, animation)
       },
     })
   
     const pauseSlider = () => {
       instanceRef.current?.animator.stop()
     }
   
     const resumeSlider = () => {
       const slider = instanceRef.current
       if (!slider) return
   
       slider.moveToIdx(
         slider.track.details.abs + 5,
         true,
         animation
       )
     }
   
     return (
       <div
         ref={sliderRef}
         className="keen-slider"
         onMouseEnter={pauseSlider}
         onMouseLeave={resumeSlider}
       >
         <div className="keen-slider__slide number-slide1">1</div>
         <div className="keen-slider__slide number-slide2">2</div>
         <div className="keen-slider__slide number-slide3">3</div>
         <div className="keen-slider__slide number-slide4">4</div>
         <div className="keen-slider__slide number-slide5">5</div>
         <div className="keen-slider__slide number-slide6">6</div>
       </div>
     )
   }
   

   you can use pauseSlider and resumeSlider for stop auto move