How to place two Carousel, one next to the other with bootstrap

Asked

Viewed 669 times

3

I’m working with a responsive website with Bootstrap. I have an idea to put two carousel, side by side, but I’m not getting, nor with float: left. I would post my code here but I’m a little ashamed of it because I’m just getting started. 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>
twitter-bootstrap website responsive

  • Welcome Vitor, don’t be ashamed! We all went ( and we still are) beginners, edit your question and put your code, as strange as it is!

  • Okay, I edited it but I don’t know if it was, I’m trying to learn how it works, any mistake, I’m sorry.

1 answer

1


Place the two Carousel inside a div.row, which is flexbox in Bootstrap 4, which both will 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>

  • Thank you! It was very simple after all! I have to study more!

Browser other questions tagged twitter-bootstrap website responsive

You are not signed in. Login or sign up in order to post.