Slick Slider Center Mode Transform

by zircon

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.min.css">
<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>

  <section class="slider center">
  <div>
  <img src="https://via.placeholder.com/150x150.gif?text=1">
    <div class="card">
    <div class="card-content">
    <p class="top-left">Top Left</p>
    <p class="bottom-left">Low Left</p>
    <p class="top-right">Top Right</p>
    <p class="bottom-right">Low Right</p>
    <p class="centered">Center</p>
    </div>
    </div>
  </div>
    
   <div>
   <img src="https://via.placeholder.com/150x150.gif?text=2">
   <p class="style2">2</p>
   </div>
    
    <div>
      <img src="https://via.placeholder.com/150x150.gif?text=3">
	  <p class="style2">Text 3</p>
    </div>
    
    <div>
      <img src="https://via.placeholder.com/150x150.gif?text=4">
	  <p class="style2">Text 4</p>
    </div>
    
    <div>
      <img src="https://via.placeholder.com/150x150.gif?text=5">
	  <p class="style2">Text 5</p>
    </div>
    
    <div>
      <img src="https://via.placeholder.com/150x150.gif?text=6">
	  <p class="style2">6</p>
    </div>
  </section>
  <p>Center Mode - transform plus text in 5 corners</p>
  <p>Note: the text box is forced height</p>

CSS

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

* {box-sizing: border-box;}

/*--control slider size--*/
.slider {
  width: 75%;
  margin: 2px auto;
  border: 2px solid #aaa;
  padding: 2px;
  border-radius: 5px;
  background: #eff;
  text-align: center;
  z-index: 0;
}

@media(max-width: 993px) {
	.slider {
		width: 95%;
	}
}

.slick-slide {
  margin: 5px 5px;
  display: block !important;
}

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

/*--n/a 
.slick-prev:before,
.slick-next:before {
  color: #000;
  font-size: 1.5rem;
}
--*/

/*--mask outermost images--*/ 
.slick-slide {
  opacity: 0.5;
}

.slick-active {
  opacity: 0.5;
}

.slick-current {
  opacity: 1;
}

/*--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;
}

/*--other text boxes--*/
.style2 {
  margin: 2% 0 2% 0;
  padding: 2% 2%;
  background: rgb(200, 200, 20);
}

/*--Center image text box--*/
.card {
  position: relative;
  margin: 5px 0;
  height: 60px; /*--push height--*/
}
.card-content {
  position: absolute;
  width: 100%;
  height: 60px; /*--repeat push--*/
  top: 0;
  bottom: 0;
  margin: 0 auto;
  padding: 0;
  background: rgb(200, 200, 20);
}
.card-content p {
  margin: 0 auto;
  padding: 0;
}

.bottom-left {position: absolute; bottom: 4px; left: 4px;}
.top-left {position: absolute; top: 4px; left: 4px;}
.top-right {position: absolute; top: 4px; right: 4px;}
.bottom-right {position: absolute; bottom: 4px; right: 4px;}
.centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/*--override prev/next button style--*/
.slick-prev:before,
.slick-next:before {
  position: absolute;
  font-size: 40px;
  color: #000;
  line-height: 0;
  text-indent: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%,...

JavaScript

$('.center').slick({
  centerMode: true,
  centerPadding: '0px',
  arrows: true,
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '0px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '30px',
        slidesToShow: 1
      }
    }
  ]
});