Question 60928 in Javascript Question posted in
A very good W3school tutorial can be found here.

Mapping is not working inside react-bootstrap-carousel – Javascript

I am using react bootstrap carousel . And I wanted to use mapping inside it. But it is not working. Can someone help me with that

import React from "react";
import "../../styles/Banner.css";
import Carousel from "react-bootstrap/Carousel";

const data = [
  "https://rukminim1.flixcart.com/flap/1680/280/image/1defb861e409319b.jpg?q=50",
  " https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/8d4150cc4f3f967d.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
];

const Banner = () => {
  return (
    <Carousel className="carasousel">
      <Carousel.Item>
        {data.map((imag, i) => {
          return (
            <>
              <img src={imag} alt="img" key={i} className="banner_img" />
            </>
          );
        })}
      </Carousel.Item>
    </Carousel>
  );
};

export default Banner;

It supposed to show one item at a time but it is showing all four together.

Another Issue:
And I also wanted to remove the lower slide indicator from the carousel . Is there any way to remove it.

Wanted to remove this indicator

Tags:

2

Answers


  1. 0

    You may try:

      {data.map((imag, i) => (
      
          <img src={imag} alt="img" key={i} className="banner_img" />
      
    ))}
    Login or Signup to reply.
  2. 0

    You can move the map function outside of the Carousel.Item component and map over the data to create an array of Carousel.Items. Each Carousel.Item component will only render one image.

    To remove the lower slide indicator, you can set the indicators prop to false.

    Try the following:

    import React from "react";
import "../../styles/Banner.css";
import Carousel from "react-bootstrap/Carousel";

const data = [
  "https://rukminim1.flixcart.com/flap/1680/280/image/1defb861e409319b.jpg?q=50",
  " https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/8d4150cc4f3f967d.jpg?q=50",
  "https://rukminim1.flixcart.com/flap/1680/280/image/685712c6cefb3c02.jpg?q=50",
];

const Banner = () => {
  const carouselItems = data.map((imag, i) => (
      <Carousel.Item key={i}>
        <img src={imag} alt="img" className="banner_img" />
      </Carousel.Item>
  ));

  return (
    <Carousel className="carasousel" indicators={false}>
      {carouselItems}
    </Carousel>
  );
};

export default Banner;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search