https://github.com/timelessco/js-carousel
https://github.com/timelessco/js-carousel
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/timelessco/js-carousel
- Owner: timelessco
- License: mit
- Created: 2023-04-18T13:07:18.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2026-01-15T11:50:57.000Z (5 months ago)
- Last Synced: 2026-01-15T16:29:57.366Z (5 months ago)
- Language: HTML
- Homepage: https://js-carousel-theta.vercel.app/
- Size: 8.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Js Carousel:
A pure Js customisable carousel, that snaps! uses CSS scroll snap on mobile.
## Features:
- Supports snapping of carousel.
- Supports autoplay with a specified interval.
- Supports scrolling and dragging.
- Direction is alterable.
- Alignment is alterable.
## Dependencies:
- Use Gesture: https://use-gesture.netlify.app/docs/#vanilla-javascript
- Anime js: https://animejs.com/
## Props:
### parent:
A selector for an existing DOM element that wraps all the carousel
elements/items. This is a required prop.
> Type: string
> Example: '.parent' || '#parent'
### child:
A selector for each carousel element sharing the same class, wrapped by the
parent element. This is a required prop.
> Type: string
> Example: '.child'
### dragActive:
This prop decides whether the carousel is draggable or not.
> Type: boolean
> Default: true
### scrollActive:
This prop decides whether the carousel is scrollable or not.
> Type: boolean
> Default: true
### slidesToScroll:
Depicts the number of slides that would scroll together.
> Type: number
> Default: 1
### axis:
Depicts the axis in which the carousel would scroll.
> Type: string
> Default: 'x'
### dragFree:
This boolean is used to decide whether to stop at the snappoint or not. when
true, this prop allows free dragging without stopping at snappoints.
> Type: boolean
> Default: false
### alignment:
Decides the alignment of each child of the carousel. Alignment: 'center' allows
the carousel to snap at the center of each child of the carousel.
> Type: string
> Options: 'start'||'center'||'end' Default: 'start'
### direction:
Decides the direction of the carousel's movement which would be from 'left to
right' or 'right to left'.
> Type: string
> Options: 'ltr' || 'rtl'
### startIndex:
The child index at which the carousel begins.
> Type: number
> Default: 1
### autoplay:
Boolean that decides whether the carousel progresses automatically or not at a
specified interval.
> Type: Boolean
> Default: false
### autoplayTimeout:
The interval between the automatic progression of each slide in the carousel.
> Type: number (in ms)
> Default: 2000
### springConfig:
The spring animation value is configurable using this prop.
> Type: string
> Default: `spring(1,90,20,13)` which is
> `spring(mass, stiffness, damping, velocity)`
### selectedState:
Boolean that decides whether a selected state exists - one slide is highlighted
at a time, while scrolling of the carousel.
> Type: boolean
> Default: false
### selectedScrollClassName:
The classname that would be added to the particular slide that is highlighted.
> Type: string
> Default: 'selected'
### selectedScrollSnapIndex:
The index of the selected/ highlighted slide is decided by this prop.
> Type: number
> Default: 0 (starts from the 1st slide)
### breakpoints:
This prop is helpful in altering props at different breakpoints.
eg:
```
Carousel({
dragActive: true,
breakpoints: {
'max-width: 768px': { dragActive: false },
},
})
```
### displayDots:
Boolean to decide whether or not to display the carousel indicators
> Type: boolean
> Default: false
### dotsHtml:
HTML element that would be displayed instead of each dot - Number of dots are
calculated based on the number of slides.
> Type: HTML element as a string
> Default:
```
```
## Lifecycle methods
### whileScrolling:
This callback function can be used to perform operations while scrolling the
carousel.
> Type: function
eg:
```
Carousel({
whileScrolling: (scrollProgress, currentSlideIndex, currentSlidePos) => {
// scrollProgress - returns progress value of the carousel from 0 to 1
// currentSlideIndex - the index of current slide
// currentSlidePos - position of current slide
},
})
```
### whileDragging:
This callback function can be used to perform operations while Dragging the
carousel.
> Type: function
eg:
```
Carousel({
whileDragging: (scrollProgress, currentSlideIndex, currentSlidePos) => {
// scrollProgress - returns progress value of the carousel from 0 to 1
// currentSlideIndex - the index of current slide
// currentSlidePos - position of current slide
},
})
```
### onInit:
This callback function can be used to perform operations during the
initialization of the carousel.
### onClicking:
This callback function can be used to perform operations while clicking on each
carousel.
### watchResize:
The callback function can be used to perform operations while resizing the
window
### watchSlides:
The callback function can be used to perform operations while the child list of
the carousel is altered.