jQuery слайдер с двумя активными картами

Question

У меня есть 4 карты, и у меня есть слайдер, который отображает по одной активной карте за раз. jquery:

    $num = $('.my-card').length;
$even = $num / 2;


//if length devisible by two

$('.my-card:nth-child(' + $even + ')').addClass('active');
$('.my-card:nth-child(' + $even + ')').prev().addClass('prev');
$('.my-card:nth-child(' + $even + ')').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');
  }
});

codepen

Я новичок в jquery или js. В основном я пытался поиграть с кодом, но не добился нужного мне результата. Я хочу, чтобы два «брата и сестры» становились активными одновременно. В основном пары карт 1 и 2, 2 и 3, 3 и 4. Две другие карты, которые не являются активными, должны оставаться в поле зрения и не исчезать, как это происходит сейчас. Неактивные карты, однако, должны иметь другой стиль, неважный, который, как думается, просто чтобы сделать его видимым, эти карты неактивны.