Bootstrap v4.0.0-beta.3 - carousels

Bootstrap Studio Help
1

Hello.

I'm trying to place 2 carousels on the same page and, even though I put 2 ids for the carousels I can only go through the first one (the 2nd one has the indicators and the prev/next buttons, but they do nothing).

I added the following script to my .htm:

<script>$('.carousel-1').carousel({  interval: 2000 }) $('.carousel-2').carousel({   interval: 2000 }) </script>

and for the carousels I used the following: (for carousel_2 i changed carousel_1 with carousel_2):

<div class="container"> <div id="carousel-1" class="carousel slide"> <ol> <li data-target="#carousel-1" data-slide-to="0" class="active"> /li> <li data-target="#carousel-1" data-slide-to="1"></li> <li data-target="#carousel-1" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="img/photo_1.jpg" /> </div> <div class="carousel-item"> <img src="img/photo_2.jpg" /> </div> <div class="carousel-item">  <img src="img/photo_3.jpg" /> </div> </div> <a href="#carousel-1"> <span></span> <span>Previous</span> </a> <a href="#carousel-1"> <span></span> <span>Next</span> </a> </div> </div>

What am I doing wrong? Can someone help me sort this out? I use Bootstrap v4.0.0-beta.3.

Thank you!

2

Doesn't look like you built the carousel(s) using the Bootstrap Studio app this forum is for. Had you used the app and drag/dropped the Carousel Component "twice" the second Carousel would have been automatically configured to handle it's self separately from the first carousel.

So first off, your carousel should be built more like https://getbootstrap.com/docs/4.0/components/carousel/#with-indicators based on the code you provided. If you had copy/pasted the first carousel for the second carousel, you have to not only change the ID of the second carousel but also the hrefs for the next/prev links and where data-targets are of the second carousel as well.

Your script is referencing classes when they should be referencing IDs.

<script>$('#carousel-1').carousel({  interval: 2000 }) $('#carousel-2').carousel({   interval: 2000 }) </script>

Also Bootstrap v4 stable has been released a few weeks ago, it's no longer in beta.

Saj

3

I just noticed that on the 2nd carousel I put to the ID an # and this was causing the blockage. Thank you for letting me know about the stable version; I downloaded it and changed the css and js.

Now everything works just fine, except for my scroll to top button which no longer appears after I changed the bootstrap version. Any ideas why?

4

Solved this as well. I added a script with scroll function and top function at the end of the .htm code and now is working.