express-labs / pure-react-carousel

A highly impartial suite of React components that can be assembled by the consumer to create a carousel with almost no limits on DOM structure or CSS styles. If you're tired of fighting some other developer's CSS and DOM structure, this carousel is for you.
https://express-labs.github.io/pure-react-carousel/
MIT License
1.67k stars 162 forks source link

When creating a carousel, no flex is created in the Slider Component. #418

Open Tchaikovsky1114 opened 1 year ago

Tchaikovsky1114 commented 1 year ago
        <CarouselProvider className="" naturalSlideWidth={400} naturalSlideHeight={400} totalSlides={selectedImage.length} orientation="horizontal">
        <Slider className='' >

          {selectedImage.map((item,index) => (
            <Slide key={index + ''} index={index} className="" tabIndex={index}>
              <img className='mx-auto w-full max-h-[300px] h-[100%] object-contain' src={item} alt="" />
              </Slide>
          ))}

        </Slider>
        </CarouselProvider>

result :

no flex

Conor-Hinchee commented 1 year ago

You seem to be missing the global CSS classes could you please try again with import 'pure-react-carousel/dist/react-carousel.es.css';

https://github.com/express-labs/pure-react-carousel#-tutorial step #3 on the README

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

lokinmodar commented 1 year ago

i'm importing the necessary css file but it still does not create the display: flex....

react-carousel

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

SaerwenLis commented 1 year ago

image can you fix this?

stale[bot] commented 11 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.