CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
cheveuxdelin
cheveuxdelin

Reputation: 145

React bootstrap Carousel not working properly

I'm new using react bootstrap, and I'm trying to use a Carousel, however it's giving me this bug of the last slide disappearing when changing slide:

enter image description here

Here I'm sliding and that happens, also the slide is delayed, here's my code:

import React from "react";
import {Carousel} from "react-bootstrap";
import perro from "../perro.jpg";
const CarouselContainer = props => {
    return (
        <Carousel>
            <Carousel.Item>
                <img
                className="d-block w-100"   
                src={perro}
                alt="First slide"
                />
                <Carousel.Caption>
                <h3>First slide label</h3>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </Carousel.Caption>
            </Carousel.Item>
            <Carousel.Item>
                <img
                className="d-block w-100"
                src={perro}
                alt="Second slide"
                />
                <Carousel.Caption>
                <h3>Second slide label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </Carousel.Caption>
            </Carousel.Item>
        </Carousel>
    );
}

Upvotes: 1

Views: 7244

Answers (3)

Kishor Admane
Kishor Admane

Reputation: 69

import bootstrap CSS in page, then it will work.

import 'bootstrap/dist/css/bootstrap.min.css';

Upvotes: 3

tlarson
tlarson

Reputation: 473

This happened to me too when I added my own indicators to the carousel. I also had a dynamic array of items that had to be presented in the carousel. It seems it happened to you for some reason too. In my case, react-bootstrap's carousel overran the list of items when it was sliding. I handled it controlling the sliding using the activeIndex and onSelect properties for the Carousel component.

In your case, you can try something like this:

import React from "react";
import {Carousel} from "react-bootstrap";
import perro from "../perro.jpg";

function CarouselContainer() {
  //critical to set initial state to zero
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    //adjust index to 0 if greater than index of last slide or less than zero
    //slide indexes are zero-based so yourLasSlideIndex would be 1 I guess
    if (selectedIndex >= yourLastSlideIndex+1 || selectedIndex < 0 ){
            this.setIndex(0);
        } else if (selectedIndex !== index) {
            setIndex(selectedIndex);
        }
  };

  return (
    <Carousel activeIndex={index} onSelect={handleSelect}>
      <Carousel.Item>
                <img
                className="d-block w-100"   
                src={perro}
                alt="First slide"
                />
                <Carousel.Caption>
                <h3>First slide label</h3>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </Carousel.Caption>
            </Carousel.Item>
            <Carousel.Item>
                <img
                className="d-block w-100"
                src={perro}
                alt="Second slide"
                />
                <Carousel.Caption>
                <h3>Second slide label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </Carousel.Caption>
            </Carousel.Item>
    </Carousel>
  );
}

render(<CarouselContainer />);

You might also be able to control it using the onSlid or onSlide callback properties, but not sure.

Upvotes: 0

Tomas1802
Tomas1802

Reputation: 1

I'm not sure if this answer is going to help you, but i have the same issue with react bootstrap, and the error was in my css when the elements inside the carousel had a flex display. For any reason that property causes that blank slide just before the scroll effect. If that doesn't solve the problem, you can try changing the react-bootstrap carousel to the only bootstrap carousel.

First import the bootstrap.bundle.min.js script in your index.html:

<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Note that this bootstrap script is for 5.1 version, so if you are using another version, just search the script in the documentation for that version.

Then, put your bootstrap carousel into your component and keep in mind that the flex display causes the error.

I hope i've helped. Sorry if it wasn't clear, but is my first time answering here :D

Upvotes: 0

Related Questions