@frost084/use-slider-hook
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

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

Option Type Default Description
autoScroll boolean false Enables automatic slide transition
loop boolean true Enables looping of slides
speed number 3000 Time in ms for each slide transition
totalSlides number 0 Total number of slides in the slider

Returned Values

Value Type Description
currentSlide number Index of the current slide
prevIndex number Index of the previous slide
nextIndex number Index of the next slide
nextSlide function Function to go to the next slide
prevSlide function Function to go to the previous slide
goToSlide function Function to go directly to a specified slide by index
slideTimeProgress number Progress of the current slide as a percentage (0 to 100)
totalProgress number Progress of the entire slider as a percentage (0 to 100)
loopProgress number Progress of the loop as a percentage, considering all slides in the loop
bulletProgress number Progress for bullets as a percentage based on the current slide
direction string Direction of the slide transition ("next" or "prev")
sliderRef ref Reference to the slider container for visibility tracking

License

This project is licensed under the MIT License.


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

Package Sidebar

Install

npm i @frost084/use-slider-hook

Weekly Downloads

6

Version

1.0.4

License

MIT

Unpacked Size

28.6 kB

Total Files

9

Last publish

Collaborators

  • frost084