Некорректно работает slcik slider

Question

Проблема в том что изображение сжимается по высоте до 1px. вот код

    <div class="slider__header">
        <div class="slider"><img src="../img/dark__souls3.jpg" alt=""></div>
            <div class="slider"><img src="../img/batman.jpg" alt=""></div>
            <div class="slider"><img src="../img/destiny.jpg" alt=""></div>
            <div class="slider"><img src="../img/prey.jpg" alt=""></div>
            <div class="slider"><img src="../img/uncharted4.jpg" alt=""></div>
        </div>

.slider__header {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;

    .slider {
        position: absolute;
        z-index: -1;
    }
}

Answer 1

не понятно зачем вы используете клас .slider

слик сам пропишем Вам все стили

также возможно у вас в стилях где-то ограничены размеры img увидеть бы в живую очень помогло решить проблему

а так вот стандарный код в вашей ситуации html

<div class="slider__header">
    <div class='item'><img src="../img/dark__souls3.jpg" alt=""></div>
    <div class='item'><img src="../img/batman.jpg" alt=""></div>
    <div class='item'><img src="../img/destiny.jpg" alt=""></div>
    <div class='item'><img src="../img/prey.jpg" alt=""></div>
    <div class='item'><img src="../img/uncharted4.jpg" alt=""></div>
</div>

css

.item img {
  width:100%;
  height:auto;
}

js

$('.slider__header').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

попробуйте так, должно помочь.

также можите через девтулзы залещть и посмотреть изображение и поймёте что с ним не так и что ограничивает

Answer 2

с Вашего кода удаляешь

.slider__header .item {
    position: absolute;
    z-index: -1;
}

и радуешся. Хотя вобще непонятно зачем вы это туда добавляете. Вам не надо стилизировать итем, этим займётся сам slickslider

БЛОГ НА HUSL

Некорректно работает slcik slider

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