Увеличить картинку на первом слайде Slick Slider

Question

Есть такой слайдер и я хочу, чтобы активный слайд ,внутри которого картинка, был растянут вверх https://prnt.sc/slrcny

я пробовал transform, но это как то не работает.

.partner-slider .slick-current img{
    transform: scale(1.08);
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
    -webkit-transform: scale(1.08);
}

js

$(document).ready(function() {

  $('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: true,
    centerMode: false,
    focusOnSelect: true
  });
});

css

.slider-nav div {
  width: 200px;
  height: 60px;
}

.slider-for {
  width: 250px;
  height: 250px;
  margin
}

.slider-wrap {
  positon: absolute;
  width: 300px;
  height: 300px;
  margin-left: 20px;
}

.slick-arrow:before {
  color: gray;
}

html

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

<div class="slider-wrap">


  <div class="slider-nav">
    <div>
      <img src="http://placehold.it/50x50"> </img>
    </div>
    <div>
      <img src="http://placehold.it/50x51"> </img>
    </div>
    <div>
      <img src="http://placehold.it/50x52"> </img>
    </div>
    <div>
      <img src="http://placehold.it/50x53"> </img>
    </div>
    <div>
      <img src="http://placehold.it/50x54"> </img>
    </div>
  </div>
  </div

Answer 1

$(document).ready(function() {

  $('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: true,
    centerMode: false,
    focusOnSelect: true
  });
});

.slider-nav div {
  width: 200px;
  height: 60px;
}

.slider-for {
  width: 250px;
  height: 250px;
}

.slider-wrap {
  position: absolute;
  width: 300px;
  height: 300px;
  margin-left: 20px;
}

.slick-arrow:before {
  color: gray;
}

. element.style {
  width: 67px;
}

.slick-initialized .slick-slide {
  display: block;
  margin-top: 10px;
}

.slick-slide img{
  margin: auto;
}

.slick-current {
  margin-top: 0px;
  transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  -webkit-transform: scale(1.2);
}

<head>
  <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.6.0/slick.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
</head>

<body>
  <div class="slider-wrap">
    <div class="slider-nav">
      <div>
        <img src="http://placehold.it/50x50"> </img>
      </div>
      <div>
        <img src="http://placehold.it/50x51"> </img>
      </div>
      <div>
        <img src="http://placehold.it/50x52"> </img>
      </div>
      <div>
        <img src="http://placehold.it/50x53"> </img>
      </div>
      <div>
        <img src="http://placehold.it/50x54"> </img>
      </div>
    </div>
  </div>
</body>

БЛОГ НА HUSL

Увеличить картинку на первом слайде Slick Slider

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