Carousel de cartes

Question

Je ne sais pas comment nommer mon problème, alors je suis désolé pour le titre.

J'ai fait cette section avec quelques cartes, mais je veux faire quelque chose comme un menu, je ne sais pas comment l'appeler ... c'est comme, je mets les flèches pointées à droite et à gauche et quand je clique dessus , plus de cartes apparaissent. Je pense que c'est comme un carrousel. Mais jusqu'à présent, je ne pouvais pas faire ce que je veux. Comme cette image:

<section id="tres"> 
     <h1> TEST </h1> 
    <hr> 

    <div id="cards02"> 

    <div class="card" style="width: 25rem;" id="card-1"> 
    <img class="card-img-top" src="idosa.png" alt="Card image cap"> 
    <div class="card-body"> 
    <h4 class="card-title">TEST 
</h4> 
    <h6> 13 Outubro 2017</h6> 
    <p class="card-text">TEST TEST TEST </p> 
    <a href="#" class="btn btn-primary">TEST </a> 
    </div> 
</div> 




    <div class="card" style="width: 25rem;" id="card-2"> 
    <img class="card-img-top" src="idosa.png" alt="Card image cap"> 
    <div class="card-body"> 
    <h4 class="card-title">TEST TEST TEST 
</h4> 
    <h6> 13 Outubro 2017</h6> 
    <p class="card-text">TEST TEST TEST </p> 
    <a href="#" class="btn btn-primary">TEST </a> 
    </div> 
</div> 
    <div class="card" style="width: 25rem;" id="card-3"> 
    <img class="card-img-top" src="idosa.png" alt="Card image cap"> 
    <div class="card-body"> 
    <h4 class="card-title"TEST TEST TEST 
</h4> 
    <h6> 13 Outubro 2017</h6> 
    <p class="card-text">TEST </p> 
    <a href="#" class="btn btn-primary">TEST</a> 
    </div> 
</div> 

    </div> 

    </section> 

Answer 1

Qu'est-ce que vous essayez de faire est exactement un carrousel, juste pour que vous savez que vous devrez utiliser plus pur html (JS plus spécifiques et css si nécessaire), si vous ne voulez pas connaître les détails de la création d'un carrousel, vous pouvez toujours utiliser des bibliothèques comme bootstrap (https://www.w3schools.com/bootstrap/bootstrap_carousel.asp) ou slick (http://kenwheeler.github.io/slick/). Mais si vous voulez en créer un, vous devrez chercher un tutoriel (il y en a beaucoup sur le web "carousel js css tutorial") parce que c'est un long processus.

Answer 2

Voici un carrousel JS à la vanille que vous pouvez regarder, il glisse tout seul et arrête de glisser si l'utilisateur clique sur les flèches pour un contrôle manuel. Si vous voulez afficher plusieurs éléments plutôt qu'un seul, vous pouvez juste faire quelques modifications mineures à cela.

//Changed index so 1 is actually first image, rather than starting at 0 index 
 
var index = 1; 
 
var paused = false; 
 
var slideShow = []; 
 

 
for (i=0; i<document.getElementsByClassName("slideShow").length; i++) { 
 
    slideShow[i] = document.getElementsByClassName("slideShow")[i]; 
 
    slideShow[i].style.display = "none"; 
 
} 
 

 
slideShow[0].style.display = "inline"; 
 

 
var slides = setInterval(function() { 
 
    if (index < slideShow.length) { 
 
    index++; 
 
\t \t showDivs(); 
 
    } 
 
    else { 
 
\t \t index = 1; 
 
\t \t showDivs(); 
 
\t } 
 
},1000); 
 

 
function control(n) { 
 
    clearInterval(slides); 
 

 
    if (index+n > slideShow.length) { 
 
    index = 1; 
 
    } 
 
    else if (index+n <= 0) { 
 
    index = slideShow.length; 
 
    } 
 
    else { 
 
\t \t index += n; 
 
    } 
 
    showDivs(); 
 
} 
 

 
function showDivs() { 
 
    //Hide all slideShow elements, and then show only the targeted element 
 
    for (let i=1; i<=slideShow.length; i++) { 
 
    slideShow[i-1].style.display = "none"; 
 
    } 
 
    slideShow[index-1].style.display = "inline"; 
 
}

<button onclick="control(-1)" class="arrows" id="left"><</button> 
 
<p class="slideShow">1</p> 
 
<p class="slideShow">2</p> 
 
<p class="slideShow">3</p> 
 
<p class="slideShow">4</p> 
 
<p class="slideShow">5</p> 
 
<button onclick="control(1)" class="arrows" id="right">></button>