center mode slick zoom testing

HTML

<!-- 
** This is currently broken, i think maybe due to bootstrap styles or slider styles effecting this demo. check out the external link for a working example.  
-->
<section id="slick-content">
    <div class="slider">
      <div><div class="slide-h3">1</div></div>
      <div><div class="slide-h3">2</div></div>
      <div><div class="slide-h3">3</div></div>
      <div><div class="slide-h3">4</div></div>
      <div><div class="slide-h3">5</div></div>
      <div><div class="slide-h3">6</div></div>
    </div>
  </section>

CSS

.slick-center .slide-h3{
    color: #FFF;
  }
  .slider{
    width: 600px;
    height:150px;
    margin: 20px auto;
    text-align: center;
  }
  .slide-h3{
    margin: 10% 0 10% 0;
    padding: 40% 20%;
    background: #008ed6;
  }
  .slider div{
    margin-right: 5px;
  }
  .slick-slide{
    opacity: .6;
  }
  .slick-center{
    display: block;
    max-width: 10% !important;
    max-height:20% !important;
    opacity: 1;


  }

  .slick-center {
      -webkit-transform: scale(1.25);
      -moz-transform: scale(1.25);
      transform: scale(1.25);
      margin-top: -16px;
  }

  .slick-list {
    padding:45px 60px !important;
    margin-left:30px !important;
  }

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Javascript

$(document).ready(function(){
     $('.slider').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  speed:1500,
  index: 2,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
    });