центральный слайд

Question

Не понимаю как сделать так чтобы центральный слайдер был выше остальных. Можно ли такое сделать на jquery?

Answer 1

Обычно, активный слайд помечается классом (например, active или current), на который навешиваются стили. Для эффекта поднятия можно использовать css трансформации (transform): translate и scale. То есть немного увеличить активный слайд и сдвинуть по оси Y. Для плавного перехода между состояниями используется transition. Стоит также учесть z-index, чтобы активный слайд не перекрывался другими.

Answer 2

Например, у slick есть center мод.

Содрал пример с офф сайта сюда для примера:

$('.center').slick({
  centerMode: true,
  centerPadding: '30px',
  slidesToShow: 3,
  dots: true,
});

.wrapper {
  padding: 50px;
  background-color: #3498db
}

.slider {
  width: 500px;
  margin:0 auto
}

.center .slick-center h3 {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
}
.center h3 {
  opacity: 0.8;
  transition: all 300ms ease; 
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/css/style.css">

<div class="wrapper blue">
  <div class="slider center">
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
    <div>
      <h3>6</h3>
    </div>
  </div>
</div>

БЛОГ НА HUSL

центральный слайд

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