JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<div class="box-carousel">
<div class="card-carousel">
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
  <div class="my-card"></div>
</div>
</div>

CSS

.box-carousel{
  padding:20px;
  width:450px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* margin-left:100px; */
  position:relative;
  overflow:hidden;
}
.card-carousel {
  display:block;
  align-items: center;
  justify-content: center;
  position: relative;
  white-space:nowrap;
  font-size:0;
  background:#fff;
  margin-left:150px;
}
 
.card-carousel .my-card {
  height: 220px;
  width:150px;
  display:inline-block;
  /* flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px; */
  position: relative;
  z-index: 1;
  -webkit-transform: scale(0.4) translateY(calc(50% - 110px));
  transform: scale(0.4) translateY(calc(50% - 110px));
  opacity: 0.2;
  cursor: pointer;
  pointer-events: none;
  background: #2e5266;
  background: linear-gradient(to top, #2e5266, #6e8898);
  transition: 1s;
}
 
.card-carousel .my-card:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  border-radius: 100%;
  background-color: rgba(0,0,0,0.3);
  bottom:0px;
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
 
.card-carousel .my-card.active {
  z-index: 3;
  -webkit-transform: scale(1) translateY(0) translateX(0);
  transform: scale(1) translateY(0) translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition: 1s;
}
 
.card-carousel .my-card.prev, .card-carousel .my-card.next {
  z-index: 2;
  -webkit-transform: scale(0.8) translateY(calc(50% - 110px)) translateX(0);
  transform: scale(0.8) translateY(calc(50% - 110px)) translateX(0);
  opacity: 0.6;
  pointer-events: auto;
  transition: 1s;
}

JavaScript

$num = $('.my-card').length;
$even = $num / 2;
$odd = ($num + 1) / 2;
 
if ($num % 2 == 0) {
  $('.my-card:nth-child(' + $even + ')').addClass('active');
  $('.my-card:nth-child(' + $even + ')').prev().addClass('prev');
  $('.my-card:nth-child(' + $even + ')').next().addClass('next');
} else {
  $('.my-card:nth-child(' + $odd + ')').addClass('active');
  $('.my-card:nth-child(' + $odd + ')').prev().addClass('prev');
  $('.my-card:nth-child(' + $odd + ')').next().addClass('next');
}
 
$('.my-card').click(function() {
  $slide = $('.active').width();
  console.log($('.active').position().left);
 
  if ($(this).hasClass('next')) {
    $('.card-carousel').stop(false, true).animate({left: '-=' + $slide});
  } else if ($(this).hasClass('prev')) {
    $('.card-carousel').stop(false, true).animate({left: '+=' + $slide});
  }
 
  $(this).removeClass('prev next');
  $(this).siblings().removeClass('prev active next');
 
  $(this).addClass('active');
  $(this).prev().addClass('prev');
  $(this).next().addClass('next');
});
 
 
// Keyboard nav
$('html body').keydown(function(e) {
  if (e.keyCode == 37) { // left
    $('.active').prev().trigger('click');
  }
  else if (e.keyCode == 39) { // right
    $('.active').next().trigger('click');
  }
});