> For the complete documentation index, see [llms.txt](https://hartans-organization.gitbook.io/hartan-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hartans-organization.gitbook.io/hartan-docs/hooks/usecarousel.md).

# useCarousel

The **useCarousel** hook is used inside the [Carousel](/hartan-docs/components/carousel.md) component. This hook handles the slider logic, inside the Carousel component.

{% hint style="warning" %}
This hook is an internal hook and is **not available** for the users since it's not exposed as a part of this library.
{% endhint %}

#### Code

{% code overflow="wrap" %}

```javascript
import { useState } from "react"

export default function useCarousel(initialValue, imageListLength){
    const [currentSlide, setCurrentSlide] = useState(initialValue);

    function handleLeftArrow() {
        currentSlide === 0 ? setCurrentSlide(imageListLength - 1) : setCurrentSlide(currentSlide - 1);
    }
    
    function handleRightArrow() {
        currentSlide === imageListLength - 1 ? setCurrentSlide(0) : setCurrentSlide(currentSlide + 1);
    }

    return [currentSlide, handleLeftArrow, handleRightArrow];
}
```

{% endcode %}

#### Explanation

* As you can see above it uses the [useState](https://react.dev/reference/react/useState) hook of the React internally for managing the state of slider on arrow click.
* It accepts two parameters - a `initialValue`, which is an integer (default value is zero) and `imagesListLength` - the array length containing source links for each image.
* It returns the following: 
  * `currentSlide` - index of the current slide.
  * `handleLeftArrow` - function to manage previous button click.
  * `handleRightArrow` - function to manage right button click.