React-responsive-carousel: Displaying multiple slides at once

[thlee1122]

Is there an attribute that I can use to display multiple slides at once?
For example, show 3 slides in the beginning and show next 3 slides when the arrow button is clicked.

[leandrowd]

Hi @thlee1122, the slider itself was not designed for what you are looking for but I believe you might be able to achieve it using the Thumbs component... I never tested it without the main slider though...

[leandrowd]

Hi @thlee1122, thanks to @khanhfumaster you now can set centerMode and define the max size of the center slide. If you set it to 33.3% you should achieve what you want. Have a look at the storybooks for more details. Please close this issue if you don't have more questions...

[rabbittheory]

Hi,
Any workaround for vertical mode?

[amitchauhanKN]

but when click on next arrow it did not slide to next three images but just slide very little bit how to resolve that ?

[BertelBB]

@amitchauhanKN you need to take control of the slider position by setting _selectedItem_ manually.
As far as I can tell, you need to disabled the default arrows and use your own

import React, { useState } from 'react'

import MySlideItem from './MySlideItem'
import NextButton from './NextButton'
import PrevButton from './PrevButton'
...

const displayCount = 3

const MyCarousel = ({ slides }) => {
    const [currentIndex, setSlide] = useState(0)

    return (
        <div className='MyCarousel'>
            // currentIndex - 3 + slides.length to jump three slides back
            <PrevButton onClick={() => setSlide((currentIndex - 3 + slides.length) % slides.length)} />
            <Carousel
                ...
                centerMode
                centerSlidePercentage={100 / displayCount}
                selectedItem={currentIndex}
                showArrows={false}
            >
                {slides.map(x => <MySlideItem {...x} />)}
            </Carousel>
            // currentIndex + 3 to jump three slides forward
            <NextButton onClick={() => setSlide((currentIndex + 3) % slides.length)} />
        </div>
    )
}