A custom React hook for creating sliders with auto-scroll, looping, and progress tracking, ideal for carousels and image galleries.
- 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
You can install this hook via NPM:
npm install @frost084/use-slider-hook
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>
)
}
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 |
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 |
This project is licensed under the MIT License.
Developed by TheFrost - Creative Frontend Developer with contributions from ChatGPT (OpenAI).