5+ jQuery Card Examples

This post contains a total of 5+ Hand-Picked jQuery Card Examples with Source Code. All the Cards are made using jQuery & CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Ravi Kumar

Made by Ravi Kumar. Simple jQuery card with animation. Clicking the button changes the card with animation. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
.Offercards {
    height: 300px;
    width: 200px;
    position: relative;
    margin: 3rem auto 0;
}
.Offercards .card {
    transition: all 0.3s linear;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 10px;
    border-radius: 4px;
}
</style>
</head>
<body>
  <div class="Offercards">
    <div class="card active" style="background: red"><button class="cardBtn">Click Red</button></div>
    <div class="card" style="background: lightgreen"><button class="cardBtn">Click Green</button></div>
    <div class="card" style="background: orange"><button class="cardBtn">Click Orange</button></div>
    <div class="card" style="background: skyblue"><button class="cardBtn">Click Blue</button></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  var $cards = $('.Offercards .card'),
  zIn = $cards.length,
  newzIn = 0,
  mt = -2,
  ml = -11,
  scale = 1,
  cnt = 0,
  newScale = 0.8;

  function forIndex() {
    $($cards).each(function () {
      zIn--;
      $(this).css({ 'z-index': zIn });
    });
  }
  forIndex();

  function forEach() {
    $($cards).each(function () {
      mt += 2;
      ml += 11;
      scale -= 0.05;
      $(this).css({ 'margin': '' + mt + 'px 0 0 ' + ml + 'px', 'transform': 'scale(' + scale + ')' });
    });
  }
  forEach();

  $('.cardBtn').click(function () {
    var btnCard = $(this).closest('.card');
    $(btnCard).css({ 'transform': 'translate3d(200px,0,0) rotate(15deg)' }).removeClass('active').next().css({ 'transform': 'scale(0.94)', 'margin': 0 }).addClass('active');
    cnt++;
    newScale += 0.04;
    newzIn -= 1;;
    setTimeout(() => {
      $(btnCard).fadeOut(200, function () {
        setTimeout(() => {
          $(btnCard).css({ 'transform': 'scale(' + newScale + ')', 'z-index': newzIn });
          setTimeout(() => {
            $(btnCard).show();
          }, 400);
        }, 150);
        if (cnt >= $cards.length) {
          cnt = 0;
          $($cards).first().css({ 'transform': 'scale(0.94)' }).addClass('active');
          zIn = $cards.length;
          mt = -2;
          ml = -11;
          newScale = 0.8;
          newzIn = 0;
          scale = 1;
          forIndex();
          forEach();
        }
      });
    }, 100);
  });
});
    </script>
</body>
</html>

2. By Anthony Young

Made by Anthony Young. Product card with details that appear on button click which is made using jQuery. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
.container {
  background: pink;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  background: white;
  min-width: 400px;
  min-height: 500px;
  border-radius: 8px;
  box-sizing: border-box;
  display: grid;
  grid-gap: 24px;
  overflow: hidden;
  padding: 48px 16px 32px;
  position: relative;
  text-align: center;
}
.card.details-visible .product-image {
  animation: fadeOut 0.4s normal forwards ease-in-out;
  animation-iteration-count: 1;
}
.card.details-visible .product-details {
  animation: slideIn 0.4s ease-in-out;
}
.card.details-hidden .product-details {
  animation: slideOut 0.4s ease-in-out;
  opacity: 0;
}
.card.details-hidden .product-image {
  animation: fadeIn 0.4s normal forwards ease-in-out;
  animation-iteration-count: 1;
}
.card .inner-wrapper {
  position: relative;
}
.card .product-image {
  background-image: url("https://source.unsplash.com/user/ayoungh");
  min-height: 400px;
  width: 100%;
}
.card .product-details {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card .product-details .inner {
  border: 1px solid green;
}
.card button {
  border: none;
  background: red;
  color: white;
  border-radius: 8px;
  min-height: 40px;
}

.card:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

@keyframes slideIn {
  0% {
    top: 35px;
    opacity: 0.1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes slideOut {
  0% {
    top: 0px;
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    top: 35px;
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>
</head>
<body>
  <div class="container">

  <div class="card details-hidden">
    <div class="inner-wrapper">
      <div class="product-image"></div>
      <div class="product-details">
        <div class="inner">
          <h2>Amazing Product</h2>
          <ul>
            <li>Detail 1</li>
            <li>Detail 2</li>
            <li>Detail 3</li>
          </ul>
        </div>
      </div>
    </div>
    <button>Big button</button>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>
jQuery("button").click(() => {
  jQuery(".card").toggleClass("details-visible details-hidden");
});
    </script>
</body>
</html>

3. By Nothing Special

Made by Nothing Special. jQuery Card with Sliding effects. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
  <meta charset="UTF-8">
  <title></title>
  
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Roboto:400,500,700&display=swap');

*{box-sizing:border-box}

.main_slide_block{width:100%; padding:180px 0px;}

.slider-div{width:75%; margin:0px auto; border-radius:5px; background:#ff7f504f; padding:40px 0px; overflow:hidden; position:relative;}

.slider-div:before{content:""; width:20%; height:100%; position:absolute; top:0px; left:0px; background:linear-gradient(to right, rgba(255, 127, 80, 0.10), rgba(255,255,255,0)); z-index:5;}
.slider-div:after{content:""; width:20%; height:100%; position:absolute; top:0px; right:0px; background:linear-gradient(to left, rgba(255, 127, 80, 0.10), rgba(255,255,255,0)); z-index:5;}

.dot-1, .dot-2, .dot-3, .dot-4, .dot-5{width:8px; height:8px; border-radius:50%; background:#c5c7ca; position:absolute; bottom:15px; cursor:pointer;}

.dot-1{left:46%;}
.dot-2{left:48%;}
.dot-3{left:50%;}
.dot-4{left:52%;}
.dot-5{left:54%;}

.slider-box{width:60%; height:161px; border-radius:5px; position:relative; margin:0px auto; }
.slider-card-1{width:100%; height:100%; background:#fff; padding:45px 45px; border-radius:5px; position:absolute; top:0px; left:0px; border-bottom:6px solid #ff7f504f; transition:0.5s all ease; box-shadow: 0px 5px 15px 0px rgba(51, 59, 69, 0.14); -webkit-font-smoothing: subpixel-antialiased;}
.slider-card-2{width:100%; height:100%; background:#fff; padding:45px 45px; border-radius:5px; position:absolute; top:0px; left:0px; border-bottom:6px solid #ff7f504f; transform:translateX(110%); transition:0.5s all ease; box-shadow: 0px 5px 15px 0px rgba(51, 59, 69, 0.14); -webkit-font-smoothing: subpixel-antialiased;}
.slider-card-3{width:100%; height:100%; background:#fff; padding:45px 45px; border-radius:5px; position:absolute; top:0px; left:0px; border-bottom:6px solid #ff7f504f; transform:translateX(220%); transition:0.5s all ease; box-shadow: 0px 5px 15px 0px rgba(51, 59, 69, 0.14); -webkit-font-smoothing: subpixel-antialiased;}
.slider-card-4{width:100%; height:100%; background:#fff; padding:45px 45px; border-radius:5px; position:absolute; top:0px; left:0px; border-bottom:6px solid #ff7f504f; transform:translateX(330%); transition:0.5s all ease; box-shadow: 0px 5px 15px 0px rgba(51, 59, 69, 0.14); -webkit-font-smoothing: subpixel-antialiased;}
.slider-card-5{width:100%; height:100%; background:#fff; padding:45px 45px; border-radius:5px; position:absolute; top:0px; left:0px; border-bottom:6px solid #b4b5b9; transform:translateX(440%); transition:0.5s all ease; box-shadow: 0px 5px 15px 0px rgba(51, 59, 69, 0.14); -webkit-font-smoothing: subpixel-antialiased;}

.slider-box h6{font-size:14px; font-family: 'Open Sans', sans-serif; font-weight:600; margin:0px 0px 20px 0px; padding:0px; text-transform:uppercase; color:#000000; }
.slider-box h6 img{margin-right:10px; margin-top:-3px;}
.slider-box p{font-size:17px; font-family: 'Open Sans', sans-serif; font-weight:600; line-height:30px; margin:0px 0px 0px; color:#000000;}

.card-1-disable, .card-1-nxt, .card-2-pre, .card-2-nxt, .card-3-pre, .card-3-nxt, .card-4-pre, .card-4-nxt, .card-5-pre, .card-5-disable{width:39px; height:39px; text-align:center; border-radius:50%; background:#3C1000 ; position:absolute; top:45%; z-index:99; cursor:pointer;}

.card-1-nxt, .card-2-nxt, .card-3-nxt, .card-4-nxt, .card-5-disable{padding:11px 16px;}
.card-1-disable, .card-2-pre, .card-3-pre, .card-4-pre, .card-5-pre{padding:11px 5px;}

.card-1-disable .fa, .card-1-nxt .fa, .card-2-pre .fa, .card-2-nxt .fa, .card-3-pre .fa, .card-3-nxt .fa, .card-4-pre .fa, .card-4-nxt .fa, .card-5-pre .fa, .card-5-disable .fa{color:#fff;}
.card-2-pre, .card-3-pre, .card-4-pre, .card-5-pre{left:85px; box-shadow: 0px 12px 24px 0px rgba(83, 191, 66, 0.20);}
.card-1-nxt, .card-2-nxt, .card-3-nxt, .card-4-nxt{right:85px; box-shadow: 0px 12px 24px 0px rgba(83, 191, 66, 0.20)}
.card-1-disable{left:85px; background:#F34100}
.card-5-disable{right:85px; background:#F34100}
.card-2-pre, .card-2-nxt, .card-3-pre, .card-3-nxt, .card-4-pre, .card-4-nxt, .card-5-pre, .card-5-disable{display:none;}

.cuurent-act-card{background:/*#31d317*/ #3c1000;}
.cuurent-act-card-border{border-bottom:6px solid #ff7f50;}
</style>
</head>
<body>
    <div class="main_slide_block">
        <div class="slider-div">
            <div class="dot-1 cuurent-act-card"></div>
            <div class="dot-2"></div>
            <div class="dot-3"></div>
            <div class="dot-4"></div>
            <div class="dot-5"></div>
            
            <div class="card-1-disable"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
            <div class="card-1-nxt"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
            <div class="card-2-pre"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
            <div class="card-2-nxt"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
            <div class="card-3-pre"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
            <div class="card-3-nxt"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
            <div class="card-4-pre"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
            <div class="card-4-nxt"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
            <div class="card-5-pre"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
            <div class="card-5-disable"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
            
            <div class="slider-box">
            
            <div class="slider-card-1 cuurent-act-card-border">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            
            <div class="slider-card-2">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            
            <div class="slider-card-3">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            
            <div class="slider-card-4">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            
            <div class="slider-card-5">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            
            </div>
            
            </div>

    </div>

</body>
</html>
      <script>
jQuery(document).ready(function () {

  jQuery('.dot-1, .card-2-pre').click(function () {
    jQuery('.slider-card-1').css({ "transform": "translateX(0%)" }).addClass('cuurent-act-card-border');
    jQuery('.slider-card-2').css({ "transform": "translateX(110%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-3').css({ "transform": "translateX(220%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-4').css({ "transform": "translateX(330%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-5').css({ "transform": "translateX(440%)" }).removeClass('cuurent-act-card-border');
    jQuery('.dot-1').addClass('cuurent-act-card');
    jQuery('.dot-2, .dot-3, .dot-4, .dot-5').removeClass('cuurent-act-card');
    jQuery('.card-1-disable, .card-1-nxt').css({ "display": "block" });
    jQuery('.card-2-pre, .card-2-nxt, .card-3-pre, .card-3-nxt, .card-4-pre, .card-4-nxt, .card-5-pre, .card-5-disable').css({ "display": "none" });
  });
  jQuery('.dot-2, .card-3-pre, .card-1-nxt').click(function () {
    jQuery('.slider-card-1').css({ "transform": "translateX(-110%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-2').css({ "transform": "translateX(0%)" }).addClass('cuurent-act-card-border');
    jQuery('.slider-card-3').css({ "transform": "translateX(110%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-4').css({ "transform": "translateX(220%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-5').css({ "transform": "translateX(330%)" }).removeClass('cuurent-act-card-border');
    jQuery('.dot-2').addClass('cuurent-act-card');
    jQuery('.dot-1, .dot-3, .dot-4, .dot-5').removeClass('cuurent-act-card');
    jQuery('.card-2-nxt, .card-2-pre').css({ "display": "block" });
    jQuery('.card-1-nxt, .card-1-disable, .card-3-pre, .card-3-nxt, .card-4-pre, .card-4-nxt, .card-5-pre, .card-5-disable').css({ "display": "none" });
  });
  jQuery('.dot-3, .card-2-nxt, .card-4-pre').click(function () {
    jQuery('.slider-card-1').css({ "transform": "translateX(-220%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-2').css({ "transform": "translateX(-110%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-3').css({ "transform": "translateX(0%)" }).addClass('cuurent-act-card-border');
    jQuery('.slider-card-4').css({ "transform": "translateX(110%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-5').css({ "transform": "translateX(220%)" }).removeClass('cuurent-act-card-border');
    jQuery('.dot-3').addClass('cuurent-act-card');
    jQuery('.dot-1, .dot-2, .dot-4, .dot-5').removeClass('cuurent-act-card');
    jQuery('.card-3-nxt, .card-3-pre').css({ "display": "block" });
    jQuery('.card-1-nxt, .card-1-disable, .card-2-pre, .card-2-nxt, .card-4-pre, .card-4-nxt, .card-5-pre, .card-5-disable').css({ "display": "none" });
  });
  jQuery('.dot-4, .card-3-nxt, .card-5-pre').click(function () {
    jQuery('.slider-card-1').css({ "transform": "translateX(-330%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-2').css({ "transform": "translateX(-220%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-3').css({ "transform": "translateX(-110%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-4').css({ "transform": "translateX(0%)" }).addClass('cuurent-act-card-border');
    jQuery('.slider-card-5').css({ "transform": "translateX(110%)" }).removeClass('cuurent-act-card-border');
    jQuery('.dot-4').addClass('cuurent-act-card');
    jQuery('.dot-1, .dot-2, .dot-3, .dot-5').removeClass('cuurent-act-card');
    jQuery('.card-4-nxt, .card-4-pre').css({ "display": "block" });
    jQuery('.card-1-nxt, .card-1-disable, .card-2-pre, .card-2-nxt, .card-3-pre, .card-3-nxt, .card-5-pre, .card-5-disable, .l2_u3_s1_slider .card-4-nxt').css({ "display": "none" });
    jQuery('.l2_u3_s1_slider .card-5-disable').css({ "display": "block" });
  });
  jQuery('.dot-5, .card-4-nxt').click(function () {
    jQuery('.slider-card-1').css({ "transform": "translateX(-440%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-2').css({ "transform": "translateX(-330%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-3').css({ "transform": "translateX(-220%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-4').css({ "transform": "translateX(-110%)" }).removeClass('cuurent-act-card-border');
    jQuery('.slider-card-5').css({ "transform": "translateX(0%)" }).addClass('cuurent-act-card-border');
    jQuery('.dot-5').addClass('cuurent-act-card');
    jQuery('.dot-1, .dot-2, .dot-3, .dot-4').removeClass('cuurent-act-card');
    jQuery('.card-5-pre, .card-5-disable').css({ "display": "block" });
    jQuery('.card-1-nxt, .card-1-disable, .card-2-pre, .card-2-nxt, .card-3-pre, .card-3-nxt, .card-4-nxt, .card-4-pre').css({ "display": "none" });
  });
});
    </script>
</body>
</html>

4. By Antony Moss

Made by Antony Moss. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 1.25em;
}

.card--slider {
  position: relative;
}

.card__container {
  width: 80%;
  height: 300px;
  margin: 0 auto;
  background: #ececec;
}
.card__container .item {
  height: 300px;
  display: none;
}
.card__container .item.active {
  display: block;
  padding: 1.25em;
  background: #aaa;
}

.action__btn {
  position: absolute;
  top: 110px;
  width: 100%;
}

.btns {
  width: 50px;
  height: 50px;
  padding: 0;
  font-size: 50px;
  color: #0275d8;
}
.btns--prev {
  float: left;
}
.btns--next {
  float: right;
}

.count-slide {
  width: 140px;
  background: #0275d8;
  color: #fff;
  text-align: center;
  padding: 5px;
  margin: 5px 0 0 0;
  float: right;
}
.count-slide span {
  font-weight: bold;
}
</style>
</head>
<body>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="card--slider">
  <div class="wrapper">
    <div class="action__btn">
      <div class="btns btns--prev fa fa-arrow-circle-left"></div>
      <div class="btns btns--next fa fa-arrow-circle-right"></div>
    </div>

    <div class="card__container">
      <div class="item active" data-id="1">
        <h1>Antony Moss</h1>
        <div class="row">
          <div class="col-sm-3">
            <img src="https://loremflickr.com/150/150" alt="">
          </div>
          <div class="col-sm-9">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, dolores! Sunt alias perspiciatis hic ipsa magnam? Eligendi quidem amet ipsam, optio exercitationem delectus suscipit quasi accusamus assumenda placeat similique culpa.
          </div>
        </div>
      </div>
            <div class="item" data-id="2">
        <h1>Cheryl Moss</h1>
        <div class="row">
          <div class="col-sm-3">
            <img src="https://loremflickr.com/150/150" alt="">
          </div>
          <div class="col-sm-9">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, dolores! Sunt alias perspiciatis hic ipsa magnam? Eligendi quidem amet ipsam, optio exercitationem delectus suscipit quasi accusamus assumenda placeat similique culpa.
          </div>
        </div>
      </div>
            <div class="item" data-id="3">
        <h1>Carol Moss</h1>
        <div class="row">
          <div class="col-sm-3">
            <img src="https://loremflickr.com/150/150" alt="">
          </div>
          <div class="col-sm-9">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, dolores! Sunt alias perspiciatis hic ipsa magnam? Eligendi quidem amet ipsam, optio exercitationem delectus suscipit quasi accusamus assumenda placeat similique culpa.
          </div>
        </div>
      </div>
      
                  <div class="item" data-id="4">
        <h1>Carol Smitha</h1>
        <div class="row">
          <div class="col-sm-3">
            <img src="https://loremflickr.com/150/150" alt="">
          </div>
          <div class="col-sm-9">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, dolores! Sunt alias perspiciatis hic ipsa magnam? Eligendi quidem amet ipsam, optio exercitationem delectus suscipit quasi accusamus assumenda placeat similique culpa.
          </div>
        </div>
      </div>
      
                  <div class="item" data-id="5">
        <h1>Swampy</h1>
        <div class="row">
          <div class="col-sm-3">
            <img src="https://loremflickr.com/150/150" alt="">
          </div>
          <div class="col-sm-9">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, dolores! Sunt alias perspiciatis hic ipsa magnam? Eligendi quidem amet ipsam, optio exercitationem delectus suscipit quasi accusamus assumenda placeat similique culpa.
          </div>
        </div>
      </div>
      
      <div class="count-slide">
        Profile <span class="current-slide">1</span> of <span class="total-slides">x</span>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  //get the length of the items by using .length
  var itemsLength = $('.card__container .item').length;
  //asign the variable current to 1
  var current = 1;

  //set total amount
  //the text inside .total-slides matches the number in itemsLength
  $('.total-slides').text(itemsLength);



  $('.card--slider .btns--prev').on("click", function () {
    //when prev is clicked
    //if the current item is greater than 1
    if (current > 1) {
      //then minus 1 from the current item, so if its 2 it becomes 1
      current = current - 1;
      //run the function
      showslider(current);
    } else {
      current = itemsLength;
      showslider(current);
    }

  });

  $('.card--slider .btns--next').on("click", function () {
    //if the current is different htan the length then run the code
    if (current !== itemsLength) {
      //current which = 1 plus 1 equals 2
      current = current + 1;
      //run the function
      showslider(current);
    } else {
      //back to the first one

      current = 1;
      showslider(current);
    }
  });

  function showslider(current) {
    //grab containers and hide them
    //remove actives
    $(".card__container .item").removeClass('active');
    //show the one that is current
    //concatenate strings
    //find one with data id current and add active
    $('div[data-id="' + current + '"]').addClass('active');
    $('.current-slide').text(current);


  }
});
    </script>
</body>
</html>

5. By Miriam Khenissi

Made by Miriam Khenissi. jQuery Card Toggle by Button. Clicking the buttons displays the hidden cards. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
*{
	font-family: 'Inria Sans', sans-serif;
}

.container h1{
	margin-bottom: 30px;
}

.container {
    height: 100vh;
}

.card-deck{
	margin-top: 30px;
}

.card img{
	min-height: 200px;
	max-height: 200px;
}

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}
</style>
</head>
<body>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
		<div class="row h-100 text-center">
			    <div id="col" class="col-md-12 my-auto">
					<h1 id="title">Choose Your favourite fruits!</h1>
					<button id="btn1" type="button" class="btn btn-success" data-card="card1">Apples</button>
					<button id="btn2" type="button" class="btn btn-warning" data-card="card2">Bananas</button>
					<button id="btn3" type="button" class="btn btn-info" data-card="card3">Blueberries</button>
					<button id="btn4" type="button" class="btn btn-danger" data-card="card4">Watermelon</button>

					<div class="card-deck">
						  <div id="card1" class="card">
							    <img src="https://images.pexels.com/photos/693794/pexels-photo-693794.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="card-img-top cover" alt="...">
							    <div class="card-body">
							      <h5 class="card-title">Apples</h5>
							      <p class="card-text">An apple is a sweet, edible fruit produced by an apple tree. Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus.</p>
							    </div>
						  </div>
						  <div id="card2"class="card">
							    <img src="https://cache.desktopnexus.com/thumbseg/681/681301-bigthumbnail.jpg" class="card-img-top cover" alt="...">
							    <div class="card-body">
							      <h5 class="card-title">Bananas</h5>
							      <p class="card-text">A banana is an elongated, edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa. </p>
							    </div>
						  </div>
						  <div id="card3"class="card">
							    <img src="https://images.pexels.com/photos/1153655/pexels-photo-1153655.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="card-img-top cover" alt="...">
							    <div class="card-body">
							      <h5 class="card-title">Blueberries</h5>
							      <p class="card-text">Blueberries are perennial flowering plants with blue or purple–colored berries. They are classified in the section Cyanococcus within the genus Vaccinium.</p>
							    </div>
						  </div>
						  <div id="card4"class="card">
							    <img src="https://cdn.suwalls.com/wallpapers/photography/sliced-watermelon-20523-2880x1800.jpg" class="card-img-top cover" alt="...">
							    <div class="card-body">
							      <h5 class="card-title">Watermelon</h5>
							      <p class="card-text">Watermelon is a plant species in the family Cucurbitaceae, a vine-like flowering plant originating in West Africa. It is a highly cultivated fruit worldwide, having more than 1000 varieties.</p>
							    </div>
						  </div>
					</div>
				</div>
				

		</div>
	</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script>
      <script>
$("#card1").hide();
$("#card2").hide();
$("#card3").hide();
$("#card4").hide();

$(".btn").on('click', function () {
  var cardId = $(this).attr('data-card');
  $('#' + cardId).toggle(300);
});

$(".btn").on('click', function () {
  var str = $(this).text();
  $("#title").html('I love ' + str);
});
    </script>
</body>
</html>

6. By James Chhun

Made by James Chhun. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css'>
  
<style>
body {
    padding:20px;
    font-family: Roboto;
}

/* CONTAINER */

.cardSlider .wrapper {
    position: relative;
}

.cards_container {
    box-sizing: border-box;
    width: 80%;
    height: 300px;
    margin: 0 auto;
    background: #ececec;
}

.cards_container .item {
    height: 300px;
    display:none;
}
.cards_container .item.active {
    display: block;
    padding: 20px;
}

/* BTNS */

.action_btns {
    position: absolute;
    top: 99px;
    width: 100%;
}

.action_btns .btn {
    width: 50px;
    height: 50px;
    padding: 0px;
    font-size: 50px;
    color: #0275d8;
}

.action_btns .btn.btn_prev {
    float: left;
}

.action_btns .btn.btn_next {
    float: right;
}

/* COUNTER */

.count_slide {
    width: 139px;
    background: #0275d8;
    color: #fff;
    text-align: center;
    padding: 5px;
    margin-top: 5px;
    float: right;
}

.count_slide span{
    font-weight: bold;
}
</style>
</head>
<body>
  <body>


    <div class="container">


            <div class="cardSlider">
                <div class="wrapper">

                    <div class="action_btns">
                        <div class="btn btn_prev fa fa-arrow-circle-left"></div>
                        <div class="btn btn_next fa fa-arrow-circle-right"></div>
                    </div>

                    <div class="cards_container">

                        <div class="item active" data-id="1">
                            <h1>Francis Grider</h1>
                            <hr/>
                            <div class="row">
                                <div class="col-sm-3">
                                    <img src="http://lorempixel.com/150/150/people/">
                                </div>
                                <div class="col-sm-9">
                                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
                                </div>
                            </div>
                        </div>

                        <div class="item" data-id="2">
                            <h1>Tom Rebeck</h1>
                            <hr/>
                            <div class="row">
                                <div class="col-sm-3" >
                                    <img src="http://lorempixel.com/150/150/sports/">
                                </div>
                                <div class="col-sm-9">
                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                                </div>
                            </div>
                        </div>

                        <div class="item" data-id="3">
                            <h1>Michael Roostock</h1>
                            <hr/>
                            <div class="row">
                                <div class="col-sm-3">
                                    <img src="http://lorempixel.com/150/150/cats/">
                                </div>
                                <div class="col-sm-9">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
                                </div>
                            </div>
                        </div>

                        <div class="count_slide">
                            Profile <span class="current_slide">1</span> of <span class="total_slides">x</span>
                        </div>

                    </div>
                </div>
            </div>

      </div>
    </body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
      <script>
$(document).ready(function () {

  ////////////////////////////////////////////////
  ///////  CARD SLIDER
  ///////////////////////////////////////////////
  var itemsLenght = $('.cards_container .item').length;
  var current = 1;

  $('.total_slides').text(itemsLenght);

  /*
  When user clicks btn previous, change the position accordingly, h
  -handles if the slide/current is 0
  */
  $('.cardSlider .btn_prev').on("click", function () {
    if (current > 1) {
      //decremenent counter
      current = current - 1;
      showSlide(current);
    } else {
      //handle if slide is at 1, go to 3 ( which is itemsLength, the max length)
      current = itemsLenght;
      showSlide(current);
    }
  });

  /*
  User presses btn-next, handle finding the correct data ID
  -run showSlides,
  handle if at maxlength already(3) -> go back to 1
  */
  $('.cardSlider .btn_next').on("click", function () {

    if (current !== itemsLenght) {
      //increment current
      current = current + 1;
      showSlide(current);
    } else {
      //handle if the current id is 3, go back to 1
      current = 1;
      showSlide(current);
    }
  });

  /*
  Function showslide
  -Pass in the slideNumber, 
  change classes of active accordingly
  -Remove class active from all
  -add class active depending on slideNumber, data-id
    -class active -> display:block;
    -without active -> default display:none;
  -change currentSlide number to passed in slideNumber
  */
  function showSlide(slideNumber) {

    //handle changing classes -active
    $('.cards_container .item').removeClass('active');
    $('.cards_container .item').fadeOut(300);
    $('div[data-id="' + slideNumber + '"]').fadeIn(300);
    $('div[data-id="' + slideNumber + '"]').addClass('active');

    $('.current_slide').text(slideNumber); //change slide counter

  }

});
    </script>
</body>
</html>