So far we've been scratching the surface of the possibilities offered by React Spring Carousel, covering all the basics. The library, though, tries to go beyond that, and that's when things start to become interesting. By default, the useSpringCarousel hook uses a fixed sliding type. This means that the hook will calculate the number of items the user wants to display in the viewport of the carousel (itemsPerSlide which defaults to 1), and N items will fit in the entire viewport.
By specifying slideType: fluid, the philosophy of the carousel completely changes and the concept of current active item disappears. This means that the scrolling type will be fluid and the items will be disposed occupying their intrinsic width space.
import { useSpringCarousel } from 'react-spring-carousel'
export function Component() {
const {
carouselFragment,
slideToPrevItem,
slideToNextItem
} = useSpringCarousel({
slideType: 'fluid' // -> Fluidity is the key,
items: mockedItems.map((i) => ({
id: i.id,
renderItem: (
<CarouselItem color={i.color} width={300}>
{i.title}
</CarouselItem>
),
})),
});
return (
<div>
<button onClick={slideToPrevItem}>Prev item</button>
{carouselFragment}
<button onClick={slideToNextItem}>Next item</button>
</div>
);
}
You may find that things start to beautifully work together; you can, for example, combine slideType: fluid and withLoop: true properties! 👉
import { useSpringCarousel } from 'react-spring-carousel'
export function Component() {
const {
carouselFragment,
slideToPrevItem,
slideToNextItem
} = useSpringCarousel({
slideType: 'fluid '// -> Fluidity is the key,
withLoop: true // -> together is better,
items: mockedItems.map((i) => ({
id: i.id,
renderItem: (
<CarouselItem color={i.color} width={300}>
{i.title}
</CarouselItem>
),
})),
});
return (
<div>
<button onClick={slideToPrevItem}>Prev item</button>
{carouselFragment}
<button onClick={slideToNextItem}>Next item</button>
</div>
);
}
By default, the library will pick the width of the first item and will use that value to decide the quantity of px the carousel will slide. Eventually, you can specify a custom value 😌
import { useSpringCarousel } from 'react-spring-carousel'
export function Component() {
const {
carouselFragment,
slideToPrevItem,
slideToNextItem
} = useSpringCarousel({
slideType: 'fluid',
slideAmount: 375,
items: mockedItems.map((i) => ({
id: i.id,
renderItem: (
<CarouselItem color={i.color} width={300}>
{i.title}
</CarouselItem>
),
})),
});
return (
<div>
<button onClick={slideToPrevItem}>Prev item</button>
{carouselFragment}
<button onClick={slideToNextItem}>Next item</button>
</div>
);
}
You can also enable the free scroll modality, which basically enables the default browser scroll (it enables the mouse - trackpad scroll behavior), powered by react-spring animations!
import { useSpringCarousel } from 'react-spring-carousel'
export function Component() {
const {
carouselFragment,
slideToPrevItem,
slideToNextItem
} = useSpringCarousel({
slideType: 'fluid',
slideAmount: 375,
freeScroll: true,
items: mockedItems.map((i) => ({
id: i.id,
renderItem: (
<CarouselItem color={i.color} width={300}>
{i.title}
</CarouselItem>
),
})),
});
return (
<div>
<button onClick={slideToPrevItem}>Prev item</button>
{carouselFragment}
<button onClick={slideToNextItem}>Next item</button>
</div>
);
}
and, if you want to, you can also combine default browser scroll + react spring carousel programmatically animations and dragging sliding! 🔥
import { useSpringCarousel } from 'react-spring-carousel'
export function Component() {
const {
carouselFragment,
slideToPrevItem,
slideToNextItem
} = useSpringCarousel({
slideType: 'fluid',
slideAmount: 375,
freeScroll: true,
enableFreeScrollDrag: true // -> yooo!,
items: mockedItems.map((i) => ({
id: i.id,
renderItem: (
<CarouselItem color={i.color} width={300}>
{i.title}
</CarouselItem>
),
})),
});
return (
<div>
<button onClick={slideToPrevItem}>Prev item</button>
{carouselFragment}
<button onClick={slideToNextItem}>Next item</button>
</div>
);
}