Vous avez besoin de plusieurs carrousels bootstrap sur la même page ou le même site, mais ils doivent avoir des dimensions différentes.

-1

Utilisation de Bootstrap. Par exemple 1 serait h380 x w600, un autre h285 x w450m et ainsi de suite. Je suis novice et j'ai besoin de HTML, JS et CSS.Vous avez besoin de plusieurs carrousels bootstrap sur la même page ou le même site, mais ils doivent avoir des dimensions différentes.

J'ai fait des recherches et trouvé des solutions pour placer plusieurs carrousels de même taille.

Source

2017-08-17 Bazaboo

Voici carrousels avec différentes tailles: CodePen Demo ou exécutez l'extrait ci-dessous.

.row { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    padding-top: 1rem; 
 
    padding-bottom: 1rem; 
 
} 
 

 
h1, 
 
h3 { 
 
    text-align: center; 
 
    font-family: Verdana, sans-serif; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    padding-top: 1rem; 
 
    padding-bottom: 1rem; 
 
} 
 

 
h1, 
 
h3 { 
 
    text-align: center; 
 
} 
 

 
@media (min-width: 638px) { 
 
    h1 { 
 
    display: none; 
 
    } 
 
}

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

 
<div class="container"> 
 
    <div class="row" id="row1"> 
 
    <h1>400x400</h1> 
 
    <div class="bd-example"> 
 
     <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> 
 
      <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li> 
 
      <li data-target="#carouselExampleCaptions" data-slide-to="2" class=""></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="carousel-item active"> 
 
      <img class="d-block img-fluid" src="https://placebear.com/400/400" alt="400x400" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>400x400</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="http://www.fillmurray.com/g/400/400" alt="400x400" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>400x400</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="https://placekitten.com/g/400/400" alt="400x400" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>400x400</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" 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> 
 
    <div class="row" id="row2"> 
 
    <div class="bd-example"> 
 
     <h1>600x600</h1> 
 
     <div id="carouselExampleCaptions2" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#carouselExampleCaptions2" data-slide-to="0" class="active"></li> 
 
      <li data-target="#carouselExampleCaptions2" data-slide-to="1" class=""></li> 
 
      <li data-target="#carouselExampleCaptions2" data-slide-to="2" class=""></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="carousel-item active"> 
 
      <img class="d-block img-fluid" src="https://placebear.com/600/600" alt="600x600" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>600x600</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="http://www.fillmurray.com/g/600/600" alt="600x600" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>600x600</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="https://placekitten.com/g/600/600" alt="600x600" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>600x600</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <a class="carousel-control-prev" href="#carouselExampleCaptions2" 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="#carouselExampleCaptions2" 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> 
 
    <div class="row" id="row3"> 
 
    <h1>250x250</h1> 
 
    <div class="bd-example"> 
 
     <div id="carouselExampleCaptions3" class="carousel slide" data-ride="carousel"> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#carouselExampleCaptions3" data-slide-to="0" class="active"></li> 
 
      <li data-target="#carouselExampleCaptions3" data-slide-to="1" class=""></li> 
 
      <li data-target="#carouselExampleCaptions3" data-slide-to="2" class=""></li> 
 
     </ol> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="carousel-item active"> 
 
      <img class="d-block img-fluid" src="https://placebear.com/250/250" alt="250x250" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>250x250</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="http://www.fillmurray.com/g/250/250" alt="250x250" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>250x250</h3> 
 
      </div> 
 
      </div> 
 
      <div class="carousel-item"> 
 
      <img class="d-block img-fluid" src="https://placekitten.com/g/250/250" alt="250x250" /> 
 
      <div class="carousel-caption d-none d-md-block"> 
 
       <h3>250x250</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <a class="carousel-control-prev" href="#carouselExampleCaptions3" 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="#carouselExampleCaptions3" 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> 
 
</div> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="//rawgit.com/rosskevin/popper.js/feature-allow-text-html-node/src/popper.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

Mise à jour

Pour le faire avec autoplay Bootstrap 3, mettez à jour votre code JQuery au bas de votre code html de sorte qu'il ressemble à ceci.

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#firstCarousel').carousel({interval: 2000}); 
    $('#secondCarousel').carousel({interval: 2000}); 
}); 
</script>

Note: 2000 représente 2000 millisecondes (2 secondes). Vous pouvez changer la vitesse de chaque carrousel en attribuant à chacun un numéro différent.

Source

2017-08-17 00:41:30

Merci pour votre effort, cependant, j'ai besoin de 2 carrousels, de hauteurs et de largeurs différentes. Comme indiqué, je suis novice et ne comprends pas les modaux. Désolé pour mon ignorance! – Bazaboo

@Bazaboo Je vois - désolé j'ai mal compris. - J'ai mis à jour ma réponse ci-dessus. J'espère que ça aide. –

ok! J'ai 2 carrousels, de tailles différentes, mais ils ne sont pas autoplay. – Bazaboo

<div class="row carousel"> 
    <div id="firstCarousel" class="carousel slide" data-interval="false" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item item active"> 
     <div class="carousel-item-content"> 
     </div> 
     </div> 
     <div class="carousel-item item second-item"> 
     <div class="carousel-item-content"> 
     </div> 
     </div> 
    </div> 

    <a class="carousel-control left" href="#firstCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control right" href="#firstCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</div> 
<div class="row carousel"> 
    <div id="secondCarousel" class="carousel slide" data-interval="false" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item item active"> 
     <div class="carousel-item-content"> 
     </div> 
     </div> 
     <div class="carousel-item item second-item"> 
     <div class="carousel-item-content"> 
     </div> 
     </div> 
    </div> 

    <a class="carousel-control left" href="#secondCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control right" href="#secondCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</div>

à JS:

$(document).ready(function() { 
    $('#firstCarousel').carousel(); 
    $('#secondCarousel').carousel(); 
});

en CSS vous pouvez changer la hauteur et la largeur de votre carrousels en utilisant leur identifiant

#firstCarousel{ 
    width: 600px; 
    height: 380px; 
} 
#secondCarousel{ 
    width: 450px; 
    height: 285px; 
}

Source

2017-08-17 00:29:21

merci! Je vais essayer. J'ai trouvé une solution de rechange au brainstorming - j'ai créé un nouveau fichier css pour une page spécifique avec seulement le carrousel CSS et j'ai modifié cela. Puis inclus ce fichier css dans la page. Cela fonctionne, cependant, je suis sûr que ce n'est pas la "bonne" façon de gérer cela. En outre, il n'aborde pas les carrousels de taille différente sur la même page .... Vous permettra de connaître les résultats de votre solution de contournement! – Bazaboo

Cela n'a pas semblé fonctionner. les deux carrousels sont de la même taille et ils rebondissent sur la page – Bazaboo

Vous avez besoin de plusieurs carrousels bootstrap sur la même page ou le même site, mais ils doivent avoir des dimensions différentes.

Répondre

Questions connexes