Как стилизовать Slick Slider с centerMode?

Question

[voyager-studio]

Всем привет! Помогите, пожалуйста стилизовать слайдер на базе Slick с centerMode.
Подключен slick.css, посмотрел документацию и несколько примеров примеров, но не понимаю в чем именно проблема у меня.
Вот так он должен выглядеть с обрезанными крайними слайдами, центральный увеличивается пропорционально сверху и снизу:


А это то, как у меня сейчас:


HTML разметка:

<div class="answer__tabs-nav">
   <div class="answer__tabs-nav-btn" data-tab="#answer__tab-1">
	   <img src="img/answer-1.jpg" alt="Вопрос 1" class="answer__tabs-img">
	   <h5 class="answer__tabs-title">Вопрос 1</h5>
   </div>
   <div class="answer__tabs-nav-btn" data-tab="#answer__tab-2">
	   <img src="img/answer-2.jpg" alt="Вопрос 2" class="answer__tabs-img">
	   <h5 class="answer__tabs-title">Вопрос 2</h5>
   </div>
   <div class="answer__tabs-nav-btn" data-tab="#answer__tab-3">
	   <img src="img/answer-3.jpg" alt="Вопрос 3" class="answer__tabs-img">
	   <h5 class="answer__tabs-title">Вопрос 3</h5>
   </div>
   <div class="answer__tabs-nav-btn" data-tab="#answer__tab-4">
	   <img src="img/answer-4.jpg" alt="Вопрос 4" class="answer__tabs-img">
	   <h5 class="answer__tabs-title">Вопрос 4</h5>
   </div>
   <div class="answer__tabs-nav-btn" data-tab="#answer__tab-5">
	   <img src="img/answer-5.jpg" alt="Вопрос 5" class="answer__tabs-img">
	   <h5 class="answer__tabs-title">Вопрос 5</h5>
   </div>
   <div class="answer__tabs-nav-btn" data-tab="#answer__tab-6">
	   <img src="img/answer-6.jpg" alt="Вопрос 6" class="answer__tabs-img">
	   <h5 class="answer__tabs-title">Вопрос 6</h5>
   </div>
</div>

Стили CSS:

.answer__tabs-nav{
  display: flex;
}
.answer__tabs-nav .answer__tabs-nav-btn{
  position: relative;
  width: 218px;
  height: 327px;
  margin: 0 20px;
  transition: all .4s ease;
}
.answer__tabs-nav .answer__tabs-nav-btn.slick-center{
  transform: scale(1.2);
  transition: all .4s ease;
}
.answer__tabs-nav .answer__tabs-nav-btn img{
  width: 218px;
  height: 282px;
  object-fit: cover;
}

Скрипт JS:

$('.answer__tabs-nav').slick({
	slidesToShow: 5,
	slidesToScroll: 1,
	centerMode: true,
	centerPadding: '0',
	infinite: true,
	dots: false,
	speed: 500,
	prevArrow: $('.prev'),
	nextArrow: $('.next'),
});

Answer 1

[voyager-studio]

По совету коллеги отказался от Slick'a в пользу Swiper'a.

Немного изменил HTML (блок tabs, потому что в слайдер будет с табами):

<div class="answer__tabs">
      <div class="swiper-container">
		<div class="answer__tabs-nav swiper-wrapper">
			<div class="answer__tabs-nav-btn swiper-slide" data-tab="#answer__tab-1">
				<img src="img/answer-1.jpg" alt="Вопрос 1" class="answer__tabs-img">
				<h5 class="answer__tabs-title">Вопрос 1</h5>
			</div>
			<div class="answer__tabs-nav-btn swiper-slide" data-tab="#answer__tab-2">
				<img src="img/answer-2.jpg" alt="Вопрос 2" class="answer__tabs-img">
				<h5 class="answer__tabs-title">Вопрос 2</h5>
			</div>
			<div class="answer__tabs-nav-btn swiper-slide" data-tab="#answer__tab-3">
				<img src="img/answer-3.jpg" alt="Вопрос 3" class="answer__tabs-img">
				<h5 class="answer__tabs-title">Вопрос 3</h5>
			</div>
			<div class="answer__tabs-nav-btn swiper-slide" data-tab="#answer__tab-4">
				<img src="img/answer-4.jpg" alt="Вопрос 4" class="answer__tabs-img">
				<h5 class="answer__tabs-title">Вопрос 4</h5>
			</div>
			<div class="answer__tabs-nav-btn swiper-slide" data-tab="#answer__tab-5">
				<img src="img/answer-5.jpg" alt="Вопрос 5" class="answer__tabs-img">
				<h5 class="answer__tabs-title">Вопрос 5</h5>
			</div>
			<div class="answer__tabs-nav-btn swiper-slide" data-tab="#answer__tab-6">
				<img src="img/answer-6.jpg" alt="Вопрос 6" class="answer__tabs-img">
				<h5 class="answer__tabs-title">Вопрос 6</h5>
			</div>
		</div>
	</div>
	<button class="prev">
		<img src="img/prev-arrow.svg" alt="стрелка влево">
	</button>
	<button class="next">
		<img src="img/next-arrow.svg" alt="стрелка вправо">
	</button>
</div>

CSS:

.answer .container {
  margin-right: 50px;
  padding-left: 50px; 
}
.answer h3 {
  font-size: 72px;
  text-align: center;
  font-weight: 700;
  padding-right: 70px;
  padding-top: 90px; 
}
.answer .home__logo {
  position: absolute;
  top: 0;
  left: 0; 
}
.answer__tabs{
  padding: 40px 0px;
  position: relative;
}
.answer__tabs-item{
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  margin: 0 auto;
  width: 770px;
  margin-top: 40px;
  text-align: center;
  display: none;
}
.answer__tabs .next, .answer__tabs .prev{
  border: 1px solid #1f1f1f;
  backdrop-filter: blur(1px);
  border-radius: 50%;
  width: 69px;
  height: 69px;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: 40%;
  transition: all .3s ease-in-out;
}
.answer__tabs .next img{
  position: relative;
  top: 3%;
  left: 3%;
}
.answer__tabs .prev img{
  position: relative;
  top: 3%;
  right: 3%;
}
.answer__tabs .next:hover, .answer__tabs .prev:hover{
  border: 1px solid #ffa800;
  background-color: #ffa800;
  transition: all .3s ease-in-out;
}
.answer__tabs .prev{
  left: -35px;
}
.answer__tabs .next{
  right: -35px;
}
.answer__tabs-item.active{
  display: block;
}
.answer__tabs-nav .swiper-wrapper{
  display: flex;
}
.answer__tabs-nav-btn{
  max-width: 238px;
}
.answer__tabs-img{
  max-width: 238px;
  height: 282px;
  width: 100%;
  object-fit: cover;
}
.answer__tabs .swiper-container{
  padding: 60px;
  position: relative;
}
.answer__tabs-nav-btn.swiper-slide-active{
  transform: scale(1.1);
  transition: all .4s ease;
}

JS:

var swiper = new Swiper('.swiper-container', {
		slidesPerView: 5,
		spaceBetween: 30,
		loop: true,
		centeredSlides: true,
		navigation: {
		  nextEl: '.next',
		  prevEl: '.prev',
		  clickable: true,
		},
		keyboard: true,
	 });

Comments

[sAwm]

Спасибо огромное! Помогли нереально)