CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modalbootstrap-5
Jomeb
Jomeb

Reputation: 23

Modal carousel Bootstrap 5 not showing right image

I'm having an issue with implementing a modal carousel for my images. It's currently mostly functional, and it lacks styling and responsiveness, but that isn't really my issue at the moment.

problem: Once you click on an image, the carousel does appear, but sometimes the actual image that you click will not appear, and instead, it would be either the first image in the carousel or the last image that you opened in the carousel. Ex: When you click on the third image, the carousel will open up with the first image open. Suppose the third image does open up in the carousel. Once it closes(clicking outside the image in the carousel since I didn't put on an actual close button) and you click on another image, the image that would appear in the carousel would be the third one.

I'm wondering if this is an issue in the code or if I am supposed to supplement everything with javascript(by maybe using an event listener and such).

Link to the example I'm talking about:

https://codepen.io/jmbuhian/pen/LYWOGEe

<main class="row">
  <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
    <a data-bs-toggle="modal" data-bs-target="#exampleModal">
      <div class="card">
        <img src="https://images.unsplash.com/photo-1622222298089-042b5e973333?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=632&q=80" alt="">
      </div>

    </a>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
    <a data-bs-toggle="modal" data-bs-target="#exampleModal">
      <div class="card">
        <img src="https://images.unsplash.com/photo-1622227614434-a7a26021879f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="d-block w-100" alt="...">
      </div>

    </a>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
    <a data-bs-toggle="modal" data-bs-target="#exampleModal">
      <div class="card">
        <img src="https://images.unsplash.com/photo-1622115168398-af384a2b4d85?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" class="d-block w-100" alt="...">
      </div>

    </a>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">

        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://images.unsplash.com/photo-1622222298089-042b5e973333?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=632&q=80" alt="">
            </div>
            <div class="carousel-item">
              <img src="https://images.unsplash.com/photo-1622227614434-a7a26021879f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://images.unsplash.com/photo-1622115168398-af384a2b4d85?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" class="d-block w-100" alt="...">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>

</main>

Upvotes: 2

Views: 2582

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362770

You would need to hook into the Modal show event, and then call the Carousel to method...

var myCarousel = document.querySelector('#carouselExampleControls')
var myModalEl = document.getElementById('exampleModal')

myModalEl.addEventListener('show.bs.modal', function (event) {
    const trigger = event.relatedTarget
    var bsCarousel = bootstrap.Carousel.getInstance(myCarousel)
    bsCarousel.to(trigger.dataset.bsSlideTo)
})

Codeply demo

Upvotes: 2

Related Questions