Slick Slider Transform

by zircon

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h3>Center Mode - transform image &amp; text + font-awesome</h3>
  <section class="slider imageandtextTransform">
    <div class="slider__item">
      <img src="https://placehold.co/150x150.png?text=1">
	  <p class="style2">Text 1</p>
    </div>
    <div class="slider__item">
      <img src="https://placehold.co/150x150.png?text=2">
	  <p class="style2">Text 2</p>
    </div>
    <div class="slider__item">
      <img src="https://placehold.co/150x150.png?text=3">
	  <p class="style2">Text 3</p>
    </div>
    <div class="slider__item">
      <img src="https://placehold.co/150x150.png?text=4">
	  <p class="style2">Text 4</p>
    </div>
    <div class="slider__item">
      <img src="https://placehold.co/150x150.png?text=5">
	  <p class="style2">Text 5</p>
    </div>
    <div class="slider__item">
      <img src="https://placehold.co/150x150.png?text=6">
	  <p class="style2">Text 6</p>
    </div>
  </section>

CSS

/*======Initialize======*/
html, body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size:1em;
  margin: 0;
  padding: 0;
}

* {box-sizing: border-box;}

/*--controls size of entire slider--*/
.slider {
  width: 85%;
  margin: 10px auto;
  margin-top:15px;
  border:2px solid #aaa;
  padding:2px;
  border-radius:4px;
  background:#eff;
}

.slick-slide {
  margin: 0px 2px;
  /*--height: 200px !important;  set whatever height you need--*/
  /*--height: 25vh !important;  or use vh--*/
  display: block !important;
}

.slick-slide img {
  width: 100%;
}

/*--Will mask the leftmost image--*/ 
.slick-slide {
  opacity: 0.9;
}

.slick-active {
  opacity: 0.5;
}

.slick-current {
  opacity: 1.0;
}

/*---- Custom Page Styles ----*/
h3 {
	background-color: rgb(220,220,220);
	color: rgb(20,20,20);
	text-align: left;
	margin: 0;
	padding: 0 0 0 8px;
}

/*----====== Custom transform center image and text ======----*/
.slick-slide > div {
  transform: scale(.9);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.slick-center > div {
  transform: scale(1);
}
.slider__item > img {
  width: 100%;
  height: auto;
}

/*---- text box below image (center mode) ----*/
.style2 {
  margin: 2% 0 2% 0;
  padding: 2% 2%;
  background: rgb(200,200,20);
  text-align: center;
}

/* --font awesome active-- */
.slick-prev:before {
  content: "\f053";
  font-family: 'FontAwesome';
  font-size: 30px;
  color: #000;
}

.slick-next:before {
  content: "\f054";
  font-family: 'FontAwesome';
  font-size: 30px;
  color: #000;
}

JavaScript

$('.imageandtextTransform').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  arrows: true,
  prevArrow:"<button type='button' class='slick-prev'><i class='fa fa-solid fa-chevron-left' aria-hidden='true'></i></button>",
  nextArrow:"<button type='button' class='slick-next'><i class='fa fa-solid fa-chevron-right' aria-hidden='true'></i></button>",
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});