@dmitriu256

Как выровнять слайды по высоте в react slick slider?

Как в react-slick выровнять слайды по высоте, а именно как записать свой класс
.promo-slide на одном уровне с
.promo .slick-slide ?
На чистом html + js получаю отличный результат
<div class="promo-slider">
            <div class="promo-slide">
                <a href="#" class="promo-slide__link"></a>
                <div class="promo-slide__img">
                    <img src="img/promo/pizza-1.png" alt="3 средние пиццы
                        от 250 грн">
                </div>

                <div class="promo-slide__content">
                    <h3 class="promo-slide__descr">3 средние пиццы
                        от 250 грн</h3>
                </div>
            </div>
            <!-- /.promo-slide 1 -->

            <div class="promo-slide">
                <a href="#" class="promo-slide__link"></a>
                   <div class="promo-slide__img">
                       <img src="img/promo/pizza-1.png" alt="Кэшбек">
                   </div>
                <div class="promo-slide__content">
                    <h3 class="promo-slide__descr">Кэшбек 10% на самовывоз (доставка)</h3>
                </div>
            </div>
            <!-- /.promo-slide 2 -->
        </div>
        <!-- /.promo-slider -->


Стили
.slick
  &-track
    display: flex!important
  &-slide
    margin: 0 10px
    height: inherit!important
.promo
  &-slide
    display: flex!important
    flex-direction: column
    height: inherit
    position: relative
    border: 1px solid red
    background: $bg-color-spec
    border-radius: 12px
    overflow: hidden

Результат:
630bc1ce54444744260352.png
Панель разработчика имеет следующую вложенность
630bc1f244aac027935015.png

В реакте стили одинаковые, однако имеем следующую вложенность .slick-slide > div > .promo-slide
630bc297dc81d043110697.png
Результат - слайды разной высоты
630bc2fcbdbfd224972369.png
Свойство adaptiveHeight: true также не совсем подходит
630bc3767337c648623439.png
  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
пропиши этому div height: 100%; и заодно и для .promo-slide
.slick-slide > div {height: 100%;}
.promo-slide {height: 100%;}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы