CODEWITHSUNDEEP
jquerycsshtmlbootstrap-4
Kali
Kali

Reputation: 613

Carousel of cards

I don't know how to name my problem, so I'm sorry about the title.

I made this section with some cards, but I want to make something like a menu, I don't know how to call it...it's like, I put arrows pointed right and left and when I click on it, more cards appear. I think it's like a carousel. But until now I couldn't make what I want. Like this image:

enter image description here

<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>

Upvotes: 3

Views: 9501

Answers (2)

Jared Bledsoe
Jared Bledsoe

Reputation: 559

Here's a vanilla JS carousel you can look at, it slides on its own and stops sliding if the user clicks the arrows for manual control. If you wanted multiple elements to show rather than just one, you could just do some minor tweaking to this. 

//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++;
		showDivs();
  }
  else {
		index = 1;
		showDivs();
	}
},1000);

function control(n) {
  clearInterval(slides);

  if (index+n > slideShow.length) {
    index = 1;
  }
  else if (index+n <= 0) {
    index = slideShow.length;
  }
  else {
		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>

Upvotes: 0

Alejandro Cordoba
Alejandro Cordoba

Reputation: 447

What you're trying to do is exactly a carousel, just so you know you will have to use more than pure html (more specific JS and css if needed), if you don't want to know the details of creating a carousel you can always use libraries like bootstrap (https://www.w3schools.com/bootstrap/bootstrap_carousel.asp) or slick (http://kenwheeler.github.io/slick/). But if you want to create one you will have to look for a tutorial (which there are many around the web "carousel js css tutorial") because its a long process.

Upvotes: 2

Related Questions