CODEWITHSUNDEEP
cssreactjs
Spirit Yang
Spirit Yang

Reputation: 97

react js carousel and positions

Hello i have a carousel but i have a problem leaving the image 100% according to the size of my carousel

const ImageCarousel = () => (
  <CarouselProvider
  totalSlides={3}
  naturalSlideWidth={1}
  naturalSlideHeight={1.25}
  dragEnabled={false}
  touchEnabled={false}
  style={{ height: "500",position: "relative"}}
  >
    <Slider style={{maxHeight:'500px', width:'100%'}}>
      <Slide tag="a" index={0}>
        <Image  src="https://lorempixel.com/800/800/cats/0" />
      </Slide>
      <Slide tag="a" index={1}>
        <Image src="https://lorempixel.com/800/800/cats/1" />
      </Slide>
      <Slide tag="a" index={2}>
        <Image src="https://lorempixel.com/800/800/cats/2" />
      </Slide>
    </Slider>
    <Container style={{position: 'relative', backgroundColor:'#000'}}>
    <ButtonBack style={{position: 'absolute', transform: 'translate(-50%,-50%)', backgroundColor: 'transparent', border: 0}}><Icon fitted name='arrow right' size='big' /></ButtonBack>
    <ButtonNext style={{position: 'absolute', transform: 'translate(-50%,-50%)', backgroundColor: 'transparent', border: 0}}><Icon fitted name='arrow left' size='big' /></ButtonNext>
    </Container>
  </CarouselProvider>
);

now i have this:

enter image description here

Upvotes: 0

Views: 606

Answers (1)

Gaspar Teixeira
Gaspar Teixeira

Reputation: 1267

Hi This container should have a witdth.

1- Crate a css file called "ImageCarousel.css" in the same folder of ImageCarousel.js and place the code below: 

.innterClass {
    height: 500px !important;
}

2- Import the code ImageCarousel.js

import "./ImageCarrousel.css";

3- Here is the code you should have in your ImageCarousel component:

const ImageCarousel = () => (
  <CarouselProvider
  totalSlides={3}
  naturalSlideWidth={1}
  naturalSlideHeight={1.25}
  dragEnabled={false}
  touchEnabled={false}
  style={{ height: "500",position: "relative"}}
  >
    <Slider style={{maxHeight:'500px'}}>
      <Slide innerClassName="innterClass" index={0}>
        <Image style={{objectFit: "cover"}}  src="https://lorempixel.com/800/800/cats/0" />
      </Slide>
      <Slide innerClassName="innterClass" index={1}>
        <Image style={{objectFit: "cover"}}  src="https://lorempixel.com/800/800/cats/1" />
      </Slide>
      <Slide innerClassName="innterClass" index={2}>
        <Image style={{objectFit: "cover"}}  src="https://lorempixel.com/800/800/cats/2" />
      </Slide>
    </Slider>
    <ButtonBack style={{position: 'absolute',top:'50%',left:'30%' ,transform: 'translate(-50%,-50%)', backgroundColor: 'transparent', border: 0}}><Icon fitted name='arrow right' size='big' /></ButtonBack>
    <ButtonNext style={{position: 'absolute', right:'30%', top: "50%", transform: 'translate(-50%,-50%)', backgroundColor: 'transparent', border: 0}}><Icon fitted name='arrow left' size='big' /></ButtonNext>

  </CarouselProvider>
);

Upvotes: 1

Related Questions