How to put two carousel, next to each other with bootstrap [closed]

Closed. this question is out of scope and is not currently accepting answers.

want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 6 months ago .

improve this question

I am working with a responsive website with Bootstrap. I have an idea to put two carousel, next to each other, but I'm not getting, nor with float: left. Would post my code here but I'm a little ashamed of him because I'm starting yet. I know it's simple, but I couldn't. 

<!--nav-->
<nav class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top ">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Alterna navegação">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
    <div class="d-flex nav nav-pills nav-fill">
    <ul class="navbar-nav ">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(Página atual)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Destaques</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Preços</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Desativado</a>
      </li>
    </ul>
   </div> 
  </div>
</nav>

 <!--carousel 1--> 

<div class="col-md-5 col-lg-5 d-none d-sm-block">
  <div class="container-slider">
    <div class="divslider" style="background-color: black;">
      <div id="carouselExampleIndicators" data-interval="5000" 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 class="d-block w-100" src="imagem/img01.jpg" alt="Primeiro Slide">
            <div class="carousel-caption d-none d-md-block">
              <h5>Pães Frescos</h5>
              <p>pão</p>
            </div>
          </div>
           <div class="carousel-item">
            <img class="d-block w-100" src="imagem/img02.jpg" alt="Segundo Slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="imagem/img03.png" alt="Terceiro Slide">
          </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">Anterior</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">Próximo</span>
        </a>
      </div>
    </div>
  </div>
  </div>
</div>
Author: Sam, 2019-07-06
Source

1 answers

Put the two carousels inside a div.row, which is flexbox in Bootstrap 4, which will both stand side by side: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="row">
   <!--carousel 1--> 
   <div class="col-md-5 col-lg-5 d-none d-sm-block">
      <div class="container-slider">
         <div class="divslider" style="background-color: black;">
            <div id="carouselExampleIndicators" data-interval="5000" 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 class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Primeiro Slide">
                     <div class="carousel-caption d-none d-md-block">
                        <h5>Pães Frescos</h5>
                        <p>pão</p>
                     </div>
                  </div>
                  <div class="carousel-item">
                     <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Segundo Slide">
                  </div>
                  <div class="carousel-item">
                     <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Terceiro Slide">
                  </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">Anterior</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">Próximo</span>
               </a>
            </div>
         </div>
      </div>
   </div>

   <!--carousel 2--> 
   <div class="col-md-5 col-lg-5 d-none d-sm-block">
      <div class="container-slider">
         <div class="divslider" style="background-color: black;">
            <div id="carouselExampleIndicators2" data-interval="5000" class="carousel slide" data-ride="carousel">
               <ol class="carousel-indicators">
                  <li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li>
                  <li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
                  <li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
               </ol>  
               <div class="carousel-inner">
                  <div class="carousel-item active">
                     <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Primeiro Slide">
                     <div class="carousel-caption d-none d-md-block">
                        <h5>Pães Frescos</h5>
                        <p>pão</p>
                     </div>
                  </div>
                  <div class="carousel-item">
                     <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Segundo Slide">
                  </div>
                  <div class="carousel-item">
                     <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Terceiro Slide">
                  </div>
               </div>
               <a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Anterior</span>
               </a>
               <a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Próximo</span>
               </a>
            </div>
         </div>
      </div>
   </div>
</div>
 1
Author: Sam, 2019-07-07 03:29:04