@frost084/use-slider-hook v1.0.4

useSlider Hook

A custom React hook for creating sliders with auto-scroll, looping, and progress tracking, ideal for carousels and image galleries.

Features

• Auto-scroll with customizable speed
• Loop functionality to repeat slides
• Bullet and slide progress tracking
• Directional navigation (next/previous)
• Visibility detection to pause when the slider is out of view

Installation

You can install this hook via NPM:

npm install @frost084/use-slider-hook

Usage

Import the hook in your component and configure it with options as needed.

import { useSlider } from '@frost084/use-slider-hook'

const MySliderComponent = () => {
  const {
    currentSlide,
    prevIndex,
    nextIndex,
    nextSlide,
    prevSlide,
    goToSlide,
    slideTimeProgress,
    totalProgress,
    loopProgress,
    bulletProgress,
    direction,
    sliderRef
  } = useSlider({
    autoScroll: true,       // Enable automatic slide transition
    loop: true,             // Loop back to the first slide
    speed: 3000,            // Transition duration in milliseconds
    totalSlides: 5          // Total number of slides
  })

  return (
    <div ref={sliderRef}>
      <button onClick={prevSlide}>Previous</button>
      <button onClick={nextSlide}>Next</button>
      <div>Current Slide: {currentSlide}</div>
      <div>Slide Time Progress: {slideTimeProgress}%</div>
      <div>Total Progress: {totalProgress}%</div>
      <div>Loop Progress: {loopProgress}%</div>
      <div>Bullet Progress: {bulletProgress}%</div>
      <div>Direction: {direction}</div>
    </div>
  )
}

API

Hook Options

Returned Values

License

This project is licensed under the MIT License.

Developed by TheFrost - Creative Frontend Developer with contributions from ChatGPT (OpenAI).