Modal data-target opening two carousels instead of one #31869

BillaGit · 2020-10-12T09:44:47Z

BillaGit
Oct 12, 2020

I'm working on a gallery which has multiple links. Each link on click display same modal with different carousel. I tried to pass id into data-target of link but when open modal, it displays two carousels instead of only selected carosuel. I'm trying to figure out what is going wrong, but I don't know, have you any suggestion?Thanks.

<!doctype html>

<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="row" id="gallery">
  <div data-toggle="modal" data-target="#exampleModal" class="col-12 col-sm-6 col-lg-3 d-flex align-self-center bg-info justify-content-center"> <a href="" data-target="#carouselExample1" data-slide-to="0">
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-asterisk" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" />
    </svg>
    </a> </div>
  <div data-toggle="modal" data-target="#exampleModal" class="col-12 col-sm-6 col-lg-3 d-flex align-self-center bg-info justify-content-center"> <a href="" data-target="#carouselExample1" data-slide-to="1">
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-asterisk" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" />
    </svg>
    </a> </div>
  <div data-toggle="modal" data-target="#exampleModal" class="col-12 col-sm-6 col-lg-3 d-flex align-self-center bg-info justify-content-center"> <a href="" data-target="#carouselExample2" data-slide-to="5">
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-asterisk" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" />
    </svg>
    </a> </div>
  <div data-toggle="modal" data-target="#exampleModal" class="col-12 col-sm-6 col-lg-3 d-flex align-self-center bg-info justify-content-center"> <a href="" data-target="#carouselExample2" data-slide-to="6">
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-asterisk" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" />
    </svg>
    </a> </div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
      </div>
      <div class="modal-body">
        <div id="carouselExample1" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExample" data-slide-to="1"></li>
            <li data-target="#carouselExample" data-slide-to="2"></li>
            <li data-target="#carouselExample" data-slide-to="3"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1599472566844-691ad0ac7e41?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="First slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1599442996649-9aaa85137482?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Second slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1546111380-cfca9a43dd85?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Third slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1547288242-f3d375fc7b5f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Fourth slide"> </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
        <div id="carouselExample2" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExample" data-slide-to="4" class="active"></li>
            <li data-target="#carouselExample" data-slide-to="5"></li>
            <li data-target="#carouselExample" data-slide-to="6"></li>
            <li data-target="#carouselExample" data-slide-to="7"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1600497299298-9d99c0db6154?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="First slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1601682633973-a76aa17a7844?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Second slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1546111380-cfca9a43dd85?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Third slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1547288242-f3d375fc7b5f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Fourth slide"> </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
<script>
        $("#exampleModal").on("show.bs.modal", function (event) {
  var a = $(event.relatedTarget); // Button that triggered the modal
  var recipient = a.data("div"); //  Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this);
  modal.find("#id").attr(".carousel");
  modal.find(".modal-body div");
});

        </script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Modal data-target opening two carousels instead of one #31869

{{title}}

Replies: 0 comments

Select a reply

Bootstrap

Modal data-target opening two carousels instead of one #31869

BillaGit Oct 12, 2020

Replies: 0 comments

BillaGit
Oct 12, 2020