html – Multiple Bootstrap Modal carousels on same page, is not working-ThrowExceptions

Exception or error:

I have a portfolio-page, lasting 12 projects. When one of the projects is clicked a modal pop-up and you can click so as too see an image gallery, where I use bootstrap carousel.

For each project I have a modal with a carousel. And for project 1 that works just fine. But as soon as I use the same piece of code for project 2, and change some of the id’s specific to project 2, the carousel does not work – the images simply don’t slide. I have tried changing id “demo” so that it is unique per carousel. But unfortunately it has still not worked.

Apart from this, I am really happy with how my bootstap modal acts/look, and I would like to keep it.

 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


</head>



<body>


<div class="content">

        <div id="contact">
                <a href="">About</a>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact: c.thornval@live.dk &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0045 &nbsp;7158&nbsp;0488
               <br>
               <br>
        </div>

    <ul style="list-style: none;">



        <li class="Project" data-modal="myModal_1">

                    <span id="myBtn_1">
                        Wer Baut Der Stadt
                    </span>

                    <span id="year">
                        2019
                    </span>

                    <div class="Describtion">
                        <p style="display:none;">
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                    </div>

                
                    <div id="myModal_1" class="modal">
                     <div class="modal-content">

                    <div id="demo" class="carousel slide" data-ride="carousel">
                          
                          <!-- The slideshow -->
                          <div class="carousel-inner">

                            <div class="carousel-item active">    
                            <img src="Images/CAFX/IMG_0546 (1)_Cafx_3-kopi.png" width="100%">
                            </div>
                            <div class="carousel-item">
                              <img src="Images/CAFX/IMG_0546 (1)_Cafx_3-kopi.png" width="100%">
                            </div>
                          
                          
                          <!-- Left and right controls -->
                          <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                          </a>
                          <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                          </a>
                          </div>

                         <p>Some text in the Modal..1
                        </p>
                    </div>
        </li>
              


            <li class="Project" data-modal="myModal_2">

                    <span id="myBtn_2">
                        Hans Oscar Carlsson
                    </span>

                    <span id="year">
                        2019
                    </span>

                    <div class="Describtion">
                        <p style="display:none;">
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                    </div>

                     <div id="myModal_2" class="modal">
                     <div class="modal-content">

                    <div id="demo" class="carousel slide" data-ride="carousel">
                          
                          <!-- The slideshow -->
                          <div class="carousel-inner">

                            <div class="carousel-item active">    
                            <img src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="100%">
                            </div>
                            <div class="carousel-item">
                              <img src="Images/WER BAUT 2018/poster_mockup_MD1 kopi 2-kopi.jpg" width="100%">
                            </div>
                          
                          
                          <!-- Left and right controls -->
                          <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                          </a>
                          <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                          </a>
                          </div>

                         <p>Some text in the Modal..1
                        </p>
                    </div>
        </li>
How to solve:

There were multiple error in your code :

  1. you had two jquery.min.js
  2. there were multiple unfinished tags
  3. and you had same id-"demo" for both carousel
window.onload = function() {
  list = document.querySelectorAll(".Project");
  document.querySelectorAll(".Project").forEach(LIelm => {
    LIelm.addEventListener('click', showHideModal);
  });
};

function showHideModal(e) {
  if (!e.target.parentNode.matches('.Project , .modal-content'))
    return;
  e.preventDefault();
  let currentParent = e.target.parentNode;
  if (currentParent.matches('.Project')) {
    document.getElementById(currentParent.dataset.modal).style.display = "block";
  } else {
    currentParent.parentNode.style.display = "";
  }
}
var myModal_1 = document.getElementById("myModal_1");
var myModal_2 = document.getElementById("myModal_2");
window.onclick = function(event) {
  if (event.target === myModal_1) {
    myModal_1.style.display = "none";
  }
  if (event.target === myModal_2) {
    myModal_2.style.display = "none";
  }

};
@font-face {
  font-family: 'Lirma';
  src: url('Lirma.woff') format('woff2'), url('Lirma.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

ul {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 85vh;
  text-align: left;
}

a {
  margin-left: 40px;
  font-size: 30px;
  color: black;
  text-decoration: none;
}

#contact {
  font-size: 30px;
}

.Describtion {
  font-family: 'Helvetica Neue';
  font-size: 30px;
}

li {
  padding-top: 40px;
}

body {
  font-family: 'Helvetica Neue';
  font-size: 45px;
}

.Project {
  font-family: 'Lirma';
}

.Project:hover {
  cursor: default;
  text-decoration: underline;
}

#year {
  margin-right: 400px;
  float: right;
}

p {
  display: inline-block;
  text-align: left;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 30px;
  width: 700px;
}


/* The Modal (background) */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  overflow: auto;
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 1200px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="content">
  <div id="contact">
    <a href="">About</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact: c.thornval@live.dk &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0045 &nbsp;7158&nbsp;0488
    <br>
    <br>
  </div>
  <ul style="list-style: none;">
    <li class="Project" data-modal="myModal_1">
      <span id="myBtn_1">
                        Wer Baut Der Stadt
                    </span>
      <span id="year">
                        2019
                    </span>
      <div class="Describtion">
        <p style="display:none;">
          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
        </p>
      </div>
      <div id="myModal_1" class="modal">
        <div class="modal-content">
          <div id="demo" class="carousel slide" data-ride="carousel">
            <!-- The slideshow -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://via.placeholder.com/350x150.png?text=replace+this+image+with+your+image" style="width:100%" alt="img">
              </div>
              <div class="carousel-item">
                <img src="https://via.placeholder.com/350x150.png?text=replace+this+image+with+your+image" style="width:100%" alt="img">
              </div>
              <!-- Left and right controls -->
              <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
              </a>
            </div>
            <p>Some text in the Modal..1</p>
          </div>
        </div>
      </div>
    </li>
    <li class="Project" data-modal="myModal_2">
      <span id="myBtn_2">
                        Hans Oscar Carlsson
                    </span>
      <span id="year">
                        2019
                    </span>
      <div class="Describtion">
        <p style="display:none;">
          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
        </p>
      </div>
      <div id="myModal_2" class="modal">
        <div class="modal-content">
          <div id="demo1" class="carousel slide" data-ride="carousel">
            <!-- The slideshow -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://via.placeholder.com/350x150.png?text=replace+this+image+with+your+image" style="width:100%" alt="img">
              </div>
              <div class="carousel-item">
                <img src="https://via.placeholder.com/350x150.png?text=replace+this+image+with+your+image" style="width:100%" alt="img">
              </div>
              <!-- Left and right controls -->
              <a class="carousel-control-prev" href="#demo1" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#demo1" data-slide="next">
                <span class="carousel-control-next-icon"></span>
              </a>
            </div>
            <p>Some text in the Modal..1</p>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

###

Thank you so much for your elaborate and thorough reply.I finally made it work! However, I am not using the javascript code, that you posted, since I made it work without, and there was no effect when I used the javascript.

Leave a Reply

Your email address will not be published. Required fields are marked *