Pause and play remaining seconds

[kanaganraj]

Assume we given 6000ms for autoplayspeed. Here, when we hover on the banner its pausing and when mouse leave again the timer is running 6000ms again and moving to next slide. Actually it should like, if we mouse hover on 3rd sec and keep some more seconds and leave then, the remaining 3 seconds only should stop and play the next slide. How to achieve this in slick slider please.

That is the meaning of pause, its not stop an start.

[kanaganraj]

Finally done in React slick slide

We need to consider the mouse in and out time and calculate the remaining time (even in multiple time if the user did the mouse in and out)

In slick slide there is a option, afterChange and init

init: () => {
  setSliderInitialized(true)
  addTimeStamp()
},
afterChange: index => {
  setCurrentSlide(index)
  setAutoplaySpeed(parseInt(props.timer)) // props.timer is pause time which is from JSON
  //setAutoplaySpeed(6000) -  6 sec  
  setTimeStamps([new Date()])
},

and have to consider the mouse in and out time, for this from React can import useEffect

  import React, { useEffect, useRef, useState } from "react"
  const slider = useRef()
  const [hovered, setHovered] = useState(false)
  const previousHovered = usePrevious(hovered)
  const [currentSlide, setCurrentSlide] = useState(-1)
  const [autoplaySpeed, setAutoplaySpeed] = useState(parseInt(props.timer))
  const [timeStamps, setTimeStamps] = useState([])
  const [sliderInitialized, setSliderInitialized] = useState(false)
  const addTimeStamp = () => setTimeStamps([...timeStamps, new Date()])

need to use the time stamp

const getElapsedTime = () => {
let elapsedTime = 0

for (let i = 0; i < timeStamps.length; i += 2) {
  const start = timeStamps[i]
  const stop = timeStamps[i + 1]
  elapsedTime += stop - start
}

return elapsedTime

}

useEffect(() => { if (previousHovered === false && hovered === true) { addTimeStamp() }

if (previousHovered === true && hovered === false) {
  addTimeStamp()
  const elapsedTime = getElapsedTime()
  let remainingTime = parseInt(props.timer) - elapsedTime  // props.timer - 6000ms
  setAutoplaySpeed(remainingTime ? remainingTime : parseInt(props.timer))
}

}, [hovered]) When the slider initialized (init) and changed afterChange - pass the timer.

When mouse hover store the current time and and mouse out store the time in array

By iterating the array and subtract we can get the elapsedTime. And we need to change the pause time from 6000ms to elapsed Time. and when slider change again we need to set the 6000ms.