how to create a a bootstrap Carousel with dynamic image source

Question

i want to make a product detail page with image slider containing all images of a product , i have read the directory and got all images of a product now the slider is not moving and only showing the first image :

here is the code, check the code inside caraousel-inner

the files contain array of images names

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>

  <div class="carousel-inner">


      {files.map(eachFile=>{
          return  <div class="carousel-item active">
      <img src={`/products/galleryimages/${product._id}/${eachFile}`} class="d-block img-fluid  w-100 " style={{height:"200px",width:"350px",objectFit:"cover"}} alt="..."/>
    </div>
      })}
 
    
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Answer 1

the first image in bootstrap carousel requires it to be active so just put a ternary operator to check for index and if index is zero then its className is carousel-item active else carousel-item

code:

{files.map((eachFile,index)=>{
      return  <div  className={index===0?"carousel-item active":"carousel-item "} key={`${eachFile}img`}>
  <img src={`/yourdirectoryPath/${eachFile}`} class="d-block img-fluid  w-100 " style={{height:"200px",width:"350px",objectFit:"cover"}} alt="..."/>
</div>
  })}
 

2: the other problem that you will encounter is that there are only three buttons indicators to change image so this means you can not click next to another image after first three so you have to create these buttons also dynamically , here is the complete code !

rememeber the files in files.map is an array containing images names

bootstrap-react dynamic carousel slider

  <div
                      id="carouselExampleIndicators"
                      class="carousel slide"
                      data-bs-ride="carousel"
                    >
                      <div class="carousel-indicators">
                        {files.map((eachFile, index) => {
                          return (
                            <button
                              type="button"
                              data-bs-target="#carouselExampleIndicators"
                              data-bs-slide-to={index}
                              class="active"
                              aria-current="true"
                              aria-label={`Slide ${index + 1}`}
                            ></button>
                          );
                        })}
                      </div>

                      <div class="carousel-inner">
                        {files.map((eachFile, index) => {
                          return (
                            <div
                              className={
                                index === 0
                                  ? "carousel-item active"
                                  : "carousel-item "
                              }
                              key={`${eachFile}img`}
                            >
                              <img
                                src={`/youdirectoryPath/${eachFile}`}
                                class="d-block img-fluid  w-100 "
                                style={{
                                  height: "200px",
                                  width: "350px",
                                  objectFit: "cover",
                                }}
                                alt="..."
                              />
                            </div>
                          );
                        })}
                      </div>

                      <button
                        class="carousel-control-prev"
                        type="button"
                        data-bs-target="#carouselExampleIndicators"
                        data-bs-slide="prev"
                      >
                        <span
                          class="carousel-control-prev-icon"
                          aria-hidden="true"
                        ></span>
                        <span class="visually-hidden">Previous</span>
                      </button>
                      <button
                        class="carousel-control-next"
                        type="button"
                        data-bs-target="#carouselExampleIndicators"
                        data-bs-slide="next"
                      >
                        <span
                          class="carousel-control-next-icon"
                          aria-hidden="true"
                        ></span>
                        <span class="visually-hidden">Next</span>
                      </button>
                    </div>