Как сделать так, чтобы активный слайд рос по высоте вверх?

Question

Как сделать так, чтобы активный слайд рос по высоте не вниз, а вверх? Я использую owl-carousel

Весь код jsfiddle.net/90f2cLkm/

Как у меня

Как надо

.gallery-slider .owl-item.center img {
  height: 700px !important;
}

<section class="gallery">
        <div class="wrapper">
            <div class="content">
                <div class="gallery-block">
                    <div class="plug"></div>
                    <div class="title-block">
                        <div class="forehead">Frispes gallery</div>
                        <h3>Immersive beautiful<br>co-working space gallery</h3>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="gallery-slider owl-carousel">
            <div class="gal-slide">
                <img src="img/gal-1.jpg" alt="1">
            </div>
            <div class="gal-slide">
                <img src="img/gal-2.jpg" alt="2">
            </div>
            <div class="gal-slide">
                <img src="img/gal-3.jpg" alt="3">
            </div>
            <div class="gal-slide">
                <img src="img/gal-4.jpg" alt="4">
            </div>
            <div class="gal-slide">
                <img src="img/gal-5.jpg" alt="4">
            </div>
            <div class="gal-slide">
                <img src="img/gal-6.jpg" alt="4">
            </div>
        </div>
    </section>

Answer 1

Сделайте контейнер изображений слайдера flex-контейнером и расположите все картинки внутри него в конец контейнера.

UPD: добавил абсолютное позиционирование слайдеру, а для текста добавил float, чтобы активный слайд мог располагаться на одном уровне с текстом.

.gallery {
  position: relative;
}

.wrapper {
  float: left;
}

.gallery-slider {
 display: flex;
 align-items: flex-end;
 gap: 10px;
 position: absolute;
 top: 0px;
 left: 0;
 
}

.gal-slide {
  width: 300px;
  height: 300px;
}

.gal-slide div {
  width: 100%;
  height: 100%;
  background: #000;
}

<section class="gallery">
        <div class="wrapper" style="">
            <div class="content">
                <div class="gallery-block">
                    <div class="plug"></div>
                    <div class="title-block">
                        <div class="forehead">Frispes gallery</div>
                        <h3>Immersive beautiful<br>co-working space gallery</h3>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="gallery-slider owl-carousel">
            <div class="gal-slide">
                <div></div>
            </div>
            <div class="gal-slide">
                <div></div>
            </div>
            <div class="gal-slide" style="height: 700px!important;">
                <div></div>
            </div>
            <div class="gal-slide


----------


">
                <div></div>
            </div>
        </div>
    </section>

БЛОГ НА HUSL

Как сделать так, чтобы активный слайд рос по высоте вверх?

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