Слайдер slick nextSlider + 1

Question

Хочу сделать чтобы слайдер был как на скриншоте то есть nextSlide + 1 был сверху, накидал код. Но так и не понял как доделать. Хочу назначать класс на элемент который находится после nextSlide (на скриншоте он 3ий) и удалять когда он уходит. Надеюсь понятно объяснил, прилагаю скриншот.

    <div class="main-arrow-container">
        <div class="flex-f-slide">
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>01</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>02</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>03</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>04</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

.flex-f-slide{
.slick-slider {
  margin-left: -12%;
  margin-right: -12%;
}

.slick-list {
  padding-top: 10%!important;
  padding-bottom: 10%!important;
  padding-left: 15%!important;
  padding-right: 15%!important;
}


.slick-track {
  max-width: 100%!important;
  transform: translate3d(0, 0, 0)!important;
  perspective: 100px;
}

.slick-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  width: 100%!important;
  transform: translate3d(0, 0, 0);
  transition: transform 1s, opacity 1s;
}

.slick-snext,
.slick-sprev {
  display: block;
}

.slick-current {
  opacity: 1;
  position: relative;
  display: block;
  transform: translate3d(0, 0, -10px);
  z-index: 2;
}

.slick-snext {
  opacity: 0.6;
  transform: translate3d(30%, 0, 0px);
  z-index: 1;
}

.slick-sprev {
  opacity: 0.6;
  transform: translate3d(-30%, 0, 0px);
}

.class_name{
      opacity: 0.6;
  transform: translate3d(-30%, 0, 0px);
}

.test {
  display: block;
  width: 100%;
  height: 300px;
  background: #c00;
  box-shadow: inset 0px 0px 0px 3px #000
}

.slide-img{
    img{
        width: 306px;
        height: 247px;
        border-radius: 10px;
    }
}

.slide-flex{
    display: flex;
    max-width: 615px;
    margin: 0 auto;
    border: 10px solid #1fbcde;
    border-radius: 20px;
}

.title-slide{
    font-family: @play;
    font-weight: bold;
    font-size: 32px;
    letter-spacing: 0.1em;
}

.title-descr{
    line-height: 21px;
    letter-spacing: 0.1em;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
}

.slide-flex-item2{
    padding-left: 48px;
    padding-top: 20px;
    background: #fff;
}

.flex-f-slide{
    margin-top: 35px;
}

.main-arrow-container{
    position: relative;
}

.prev-main-sl,
.next-main-sl {
    position: absolute;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
}

.prev-main-sl{
    right: 41%;
}

.next-main-sl{
    right: 36%;
}
}


var rev = $('.flex-f-slide');
rev.on('init', function(event, slick, currentSlide) {
  var
    cur = $(slick.$slides[slick.currentSlide]),
    next = cur.next(),
    prev = cur.prev();
  prev.addClass('slick-sprev');
  next.addClass('slick-snext');
  cur.removeClass('slick-snext').removeClass('slick-sprev');
  slick.$prev = prev;
  slick.$next = next;
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  //console.log('beforeChange');
  var
    cur = $(slick.$slides[nextSlide]);
  //console.log(slick.$prev, slick.$next);
  slick.$prev.removeClass('slick-sprev');
  slick.$next.removeClass('slick-snext');
  next = cur.next(),
    prev = cur.prev();
  prev.prev();
  prev.next();
  prev.addClass('slick-sprev');
  next.addClass('slick-snext');
  slick.$prev = prev;
  slick.$next = next;
  cur.removeClass('slick-next').removeClass('slick-sprev');
});

rev.slick({
  speed: 1000,
  arrows: true,
  dots: false,
  focusOnSelect: true,
  prevArrow: '<svg class="prev-main-sl" width="46" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><rect opacity=".5" width="46" height="46" rx="2" fill="#064070"/><rect x="3.173" y="3.172" width="39.655" height="39.655" rx="2" fill="#064070"/><rect x="3.173" y="3.172" width="39.655" height="39.655" rx="2" fill="#064070"/><rect x="3.173" y="3.172" width="39.655" height="39.655" rx="2" fill="#064070"/><path d="M11.983 22.293a1 1 0 000 1.414l6.364 6.364a1 1 0 001.414-1.414L14.104 23l5.657-5.657a1 1 0 00-1.414-1.414l-6.364 6.364zM33.31 22H12.69v2h20.62v-2z" fill="#fff"/></svg>',
  nextArrow: '<svg class="next-main-sl" width="46" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><rect opacity=".5" x="46" y="46" width="46" height="46" rx="2" transform="rotate(-180 46 46)" fill="#064070"/><rect x="42.827" y="42.828" width="39.655" height="39.655" rx="2" transform="rotate(-180 42.827 42.828)" fill="#064070"/><rect x="42.827" y="42.828" width="39.655" height="39.655" rx="2" transform="rotate(-180 42.827 42.828)" fill="#064070"/><rect x="42.827" y="42.828" width="39.655" height="39.655" rx="2" transform="rotate(-180 42.827 42.828)" fill="#064070"/><path d="M34.017 23.707a1 1 0 000-1.414l-6.364-6.364a1 1 0 00-1.414 1.414L31.896 23l-5.657 5.657a1 1 0 101.414 1.414l6.364-6.364zM12.69 24H33.31v-2H12.69v2z" fill="#fff"/></svg>',
  infinite: true,
  centerMode: true,
  slidesPerRow: 1,
  slidesToShow: 1,
  slidesToScroll: 1,
  centerPadding: '0',
  swipe: true,
  customPaging: function(slider, i) {
    return '';
  },
  /*infinite: false,*/
});

Answer 1

Решение даже без библиотеки slick.js. Лучше просматривать в полноэкранном режиме.

var carousel = $(".carousel"),
    items = $(".item"),
    currdeg  = 0;

$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);

function rotate(e){
  if(e.data.d=="n"){
    currdeg = currdeg - 90;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + 90;
  }
  carousel.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
    items.css({
    "-webkit-transform": "rotateY("+(-currdeg)+"deg)",
    "-moz-transform": "rotateY("+(-currdeg)+"deg)",
    "-o-transform": "rotateY("+(-currdeg)+"deg)",
    "transform": "rotateY("+(-currdeg)+"deg)"
  });
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap');


body {
    padding: 70px 0;
}

.container {
    margin: 0 auto;
    width: 400px;
    height: 200px;
    position: relative;
    perspective: 1000px;
}

.carousel {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.carousel div {
    transform-style: preserve-3d;
}

.item {
    position: absolute;
    background: #fff;
    border: 10px solid #1FBCDE;
    width: 400px;
    height: 200px;
    border-radius: 10px;
    transition: transform 1s;
    color: #000;
    font-family: Roboto;
}

.cover {
        width: 20px;
        height: 100%;
        background-color: #1FBCDE;
        position: relative;
    }

    .img {
        height: 100%;
        width: 55%;
        border-radius: 10px;
        float: left;
        position: absolute;
        top: 0;

        background-image: url(https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg);
        background-size: cover;
    }

    .item_num {
        position: absolute;
        left: 235px;
        top: 0px;
        font-weight: 600;
    }

    .item_text {
        font-weight: 400;
        position: absolute;
        left: 235px;
        top: 35px;
        width: 150px;
        height: 135px;
    }

.a {
    transform: rotateY(0deg) translateZ(150px);
}

.b {
    transform: rotateY(90deg) translateZ(150px) rotateY(-90deg);
}

.c {
    transform: rotateY(180deg) translateZ(150px) rotateY(-180deg);
}

.d {
    transform: rotateY(270deg) translateZ(150px) rotateY(-270deg);
}

.next,
.prev {
    position: absolute;
    top: 100px;
    padding: 20px;
    cursor: pointer;
    background: #CCC;
    border-radius: 5px;
    border-top: 1px solid #FFF;
}

.next {
    right: 5em;
}

.prev {
    left: 5em;
    transform: rotate(180deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="carousel">
          <div class="a">
            <div class="item">
              <div class="cover"></div>
              <div class="img"></div>
              <p class="item_num">01</p>
              <p class="item_text">Lorem ipsum</p>
            </div>
          </div>
          <div class="b">
            <div class="item">
              <div class="cover"></div>
              <div class="img"></div>
              <p class="item_num">02</p>
              <p class="item_text">Lorem tipsum</p>
            </div>
          </div>
          <div class="c">
            <div class="item">
              <div class="cover"></div>
              <div class="img"></div>
              <p class="item_num">03</p>
              <p class="item_text">Lorem wipsum</p>
            </div>
          </div>
          <div class="d">
            <div class="item">
              <div class="cover"></div>
              <div class="img"></div>
              <p class="item_num">04</p>
              <p class="item_text">Lorem mipsum</p>
            </div>
          </div>
        </div>
      </div>
      <div class="next">
        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>
      </div>
      <div class="prev">
        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>
      </div>

    <script src="script.js"></script>
</body>
</html>

Answer 2

на чистом js
без первоначального html (данные о картинках передаются массивом в функцию рендеринга слайдера
можно даже сделать, чтобы слайдера адаптировался под количество картинок в массиве, но это потом (по желанию ТС)

const picturesArr = [ // наш масисив данных о слайдах
  "https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg",
  "https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg",
  "https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg",
  "https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg"
];

function createSlider(container, pictures) { // рендерим слайды
  pictures.forEach((pict, n) => {
    const slide = `
      <div class="slide-item" id="slide-${n}">
        <img src="${pict}" alt="">
        <div class="slide-descr">
            <div class='title-slide'>${n}</div>
            <div class='title-descr'>lorem ipsum dolor</div>
        </div>
      </div>
    `;
    container.innerHTML += slide;
  });
  
  [...Array(2)].forEach((i, n) => { // рендерим стрелки
    const arrow = `
      <button class="arrow arrow-${n ? 'left' : 'right'}" data-arrow="${n ? -1 : 1}">
        ${n ? 'назад' : 'туды' }
      </button>
    `;
    container.innerHTML += arrow;
  });
  
  [...document.querySelectorAll('.arrow')].forEach(i => // события по клику стрелок
      i.addEventListener('click', function() {
          const dataArrow = +this.getAttribute('data-arrow');
          
          [ ...document.querySelectorAll('.slide-item') ].forEach(i => {
              const currentPosition = Number(i.getAttribute('id')[6]);
              let nextPosition = currentPosition + dataArrow;
              if (nextPosition < 0) nextPosition = pictures.length - 1;
              if (nextPosition >= pictures.length) nextPosition = 0;
              
              i.setAttribute('id', `slide-${nextPosition}`);
              i.style.zIndex = -nextPosition;
          });
      })
  );
}

createSlider(document.querySelector('.main-arrow-container'), picturesArr);

.main-arrow-container {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  position: absolute;
}

.arrow-left{
  left: 0;
}

.arrow-right {
  right: 0;
}

.slide-item {
  position: absolute;
  width: 300px;
  height: 150px;
  display: flex;
  border: 5px solid #56bcde;
  border-radius: 15px;
  background-color: white;
  transition: transform .5s;
}

.slide-item img {
  width: 50%;
  object-fit: cover;
  border-radius: 10px;
}

.slide-descr {
  display: flex;
  flex-flow: column;
  justify-content: space-evenly;
  padding: 10px;
}

.title-slide {
  font-weight: bold;
}

/* здесь с помощью Sass надо сделать цикл, но в другой жизни  */ 
.slide-item#slide-0 {
  z-index: 1;
}

.slide-item#slide-1 {
  transform: translate(150px, -50px) scale(.7);
}

.slide-item#slide-2 {
  transform: translate(0, -80px) scale(.6);
}

.slide-item#slide-3 {
  transform: translate(-150px, -50px) scale(.7);
}

<div class="main-arrow-container"></div>

БЛОГ НА HUSL

Слайдер slick nextSlider + 1

Ответы (2 шт):