Bootstrap 4 carousel stopped working when running a js script

user_14230840 0
Viewed 77

I am using bootstrap 4 with CDN.

The problem is that I have a boostrap4 carousel (taken from their official site) and it works great, but when I run a js code the carousel images disappear.

this is the carousel code and it works great

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class='col-7 mx-auto'>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-yiYswFmMD0pScf5VgsHoOmITBngv2NlYeg&usqp=CAU" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRs8rzKLMYWBvde8Rv7xpJszIb3bvcOd7N4eQ&usqp=CAU" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://blog.es.playstation.com/tachyon/sites/14/2020/09/50375482006_7c978f60f7_o.jpg?resize=1088,612&crop_strategy=smart" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>






<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

But when I click on a button in another div, the carousel images disappear and only the arrows remain on the sides

This is what the other code does:

var jsaccordion = {
  init: function(target) {
    var headers = $("." + target + " .accordion-btn");
    if (headers.length) {
      headers.on('click', jsaccordion.select);
    }
  },

  select: function() {
    var tar = $(this).closest('.accordion-container');
    $('#shared-container').remove();
    if (tar.hasClass('active')) {
      tar.removeClass('active')
    } else {
      $('.active').removeClass('active')
      tar.addClass('active');
      var targText = tar.find('.accordion-text').html();
      var sharedCont = "<div id='shared-container'>" + targText + "</div>";
      if($('body').width() > 768){
        tar = tar.parent();
      }
      tar.after(sharedCont);
    }
  }
}

window.addEventListener('load', function() {
  jsaccordion.init("accordion-container");
});
body {
  max-width: 90%;
  margin: 0 auto;
}

.accordion-container {
  position: relative;
}

.accordion-container button::before {
  content: '+' !important;
}

.accordion-container.active button::before {
  content: '-' !important;
}

.accordion-container.active::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid orange;
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  color: orange;
  z-index: 100;
  font-size: 3rem;
  line-height: 1;
}

.accordion-container .accordion-text {
  display: none;
  color: #808080;
  padding: 15px;
  border: 1px solid #ffcc4b;
}

#shared-container {
  margin-top: 2rem;
  display: block;
  width: 100%;
  padding: 2rem;
  border: 1px solid orange;
  text-align: center;
}

#shared-container p {
  margin: 0;
}

@media (max-width : 768px){
  .col-6{
    max-width: 100%;
    min-width: 100%;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <h1>Testing testing testing</h1>

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

  <div class='row'>
    <div class='col-6 accordion-container'>
      <div class="my-3">
        <h3 class=" text-center">First one</h3>
        <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
        <div class="accordion-text">
          <p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis
            convallis tellus id interdum velit laoreet. </p>
        </div>
      </div>
    </div>

    <div class='col-6 accordion-container'>
      <div class="my-3">
        <h3 class='text-center'>second one</h3>
        <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>

        <div class="accordion-text">
          <p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
        </div>
      </div>
    </div>
  </div>

I tried with the js code in the same file and also from another file, but the same thing keeps happening

bootstrap-4 twitter-bootstrap html jquery javascript
1 Answers

The problem is that I have a boostrap4 carousel (taken from their official site) and it works great, but when I run a js code the carousel images disappear.

Firstly you need to include boostrap libs, not only the css.

Instantiate the carousel with:

$('.carousel').carousel();

Finally, if you need to toogle active between the accordions this line:

$('.active').removeClass('active')

needs to be changed in:

tar.siblings().removeClass('active');  // toogle active state....

The snippet:

$(function () {

    $('.carousel').carousel();

    var jsaccordion = {
        init: function (target) {
            var headers = $("." + target + " .accordion-btn");
            if (headers.length) {
                headers.on('click', jsaccordion.select);
            }
        },

        select: function () {
            var tar = $(this).closest('.accordion-container');
            $('#shared-container').remove();
            if (tar.hasClass('active')) {
                tar.removeClass('active')
            } else {
                tar.siblings().removeClass('active');
                tar.addClass('active');
                var targText = tar.find('.accordion-text').html();
                var sharedCont = "<div id='shared-container'>" + targText + "</div>";
                if ($('body').width() > 768) {
                    tar = tar.parent();
                }
                tar.after(sharedCont);
            }
        }
    }

    jsaccordion.init("accordion-container");
});
body {
    max-width: 90%;
    margin: 0 auto;
}

.accordion-container {
    position: relative;
}

.accordion-container button::before {
    content: '+' !important;
}

.accordion-container.active button::before {
    content: '-' !important;
}

.accordion-container.active::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid orange;
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    color: orange;
    z-index: 100;
    font-size: 3rem;
    line-height: 1;
}

.accordion-container .accordion-text {
    display: none;
    color: #808080;
    padding: 15px;
    border: 1px solid #ffcc4b;
}

#shared-container {
    margin-top: 2rem;
    display: block;
    width: 100%;
    padding: 2rem;
    border: 1px solid orange;
    text-align: center;
}

#shared-container p {
    margin: 0;
}

@media (max-width: 768px) {
    .col-6 {
        max-width: 100%;
        min-width: 100%;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class='col-7 mx-auto'>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-yiYswFmMD0pScf5VgsHoOmITBngv2NlYeg&usqp=CAU"
                     class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRs8rzKLMYWBvde8Rv7xpJszIb3bvcOd7N4eQ&usqp=CAU"
                     class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://blog.es.playstation.com/tachyon/sites/14/2020/09/50375482006_7c978f60f7_o.jpg?resize=1088,612&crop_strategy=smart"
                     class="d-block w-100" alt="...">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" 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='row'>
    <div class='col-6 accordion-container'>
        <div class="my-3">
            <h3 class=" text-center">First one</h3>
            <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
            <div class="accordion-text">
                <p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas
                    pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis
                    natoque penatibus et magnis. Duis convallis
                    convallis tellus id interdum velit laoreet. </p>
            </div>
        </div>
    </div>
    <div class='col-6 accordion-container'>
        <div class="my-3">
            <h3 class='text-center'>second one</h3>
            <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
            <div class="accordion-text">
                <p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet.
                    Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium
                    lectus quam id leo.</p>
            </div>
        </div>
    </div>
</div>

user_38805850
Related