Как исправить верстку?

Question

[Артём Белых]

Здравствуйте, как можно это исправить?

Мне нужно сделать так:


Код html:

<section class="reviews">
    <img src="<?php the_field('fon_reviews', 6); ?>">
    <div class="reviews__content">
        <h1>Отзывы</h1>

        <div class="owl-carousel owl-theme">
        <?php

        // параметры по умолчанию
        $posts = get_posts( array(
          'numberposts' => 100,
          'orderby'     => 'date',
          'order'       => 'DESC',
          'post_type'   => 'reviews',
          'suppress_filters' => true, // подавление работы фильтров изменения SQL запроса
        ) );

        foreach( $posts as $post ){setup_postdata($post); ?>
                <div class="owl-carousel_reviews_items">
            <?php the_post_thumbnail(); ?>
                    <p><?php the_title(); ?></p>
                    <p><?php the_excerpt(); ?></p>

                </div>
        <?php } wp_reset_postdata(); // сброс ?>
        </div>
    </div>
</section>

Код css:

.reviews {
    position: relative;
}
.reviews img {
    width: 100%;
    height: 100vh;
    position: relative;
}

.reviews .reviews__content {
    position: absolute;
    top: 0;
    width: 100%;
}
.reviews .owl-carousel {
    position: absolute;
    top: 30%;
}
.reviews .owl-carousel .owl-carousel_reviews_items {
    width: 500px;
    text-align: center;
    transition: .5s;
    display: flex;
}
.reviews .owl-carousel .owl-carousel_reviews_items img {
    width: 150px;
    height: auto;
}
.reviews .owl-carousel .owl-carousel_reviews_items p {
    font-size: 18px;
    margin-top: 15px;
}

Вот настройки OWL карусели:

jQuery(".owl-carousel").owlCarousel(
        {
            items: 3,
            autoplay: true,
            dots: true,
            center: true,
            loop: false,
            mouseDrag: true,
            touchDrag: true,
            nav: true,
            dotsEach: true,
            autoplayHoverPause: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 3
                }
            }
        }
    );

Как можно это сделать правильнее? Помогите пж!

Comments

[Froggyweb]

Можно исправить все .Вы не знаете как цвет тексту задать или ожидаете готовую верстку слайдера

[Антон Литвиненко]

слайдам не дают ширину, ширина в слайдерах расчитывается автоматически от настроек слайдера

[Артём Белых]

Froggyweb, мне нужно именно позиционирование текста с картинкой

[Артём Белых]

Антон Литвиненко, А как тогда правильней сделать?

[Антон Литвиненко]

Артем, для начала закинуть в песочницу

[Артём Белых]

Антон Литвиненко, Вам нужно, то как это работает или именно с кодом сразу? Если только отрабатывает слайдер то вот сайт - ТЫК. В самом низу!

[Антон Литвиненко]

Артем, это не мне нужно. это вам нужно

Answer 1

[MamaLuyba]

В общем, хз, как там работает эта карусель, но обычна в нее засовывают блоки одного формата. Теперь что касается форматирования блоков:
1) Создаешь div-контейнер
2) Задаешь ему border: 1px solid gold (появляется золотая рамка)
3) Засовываешь в него картинку и блок с текстом (итого два элемента внутри контейнера)
4) Задаешь контейнеру display:flex (текст и картинка становятся в ряд)
5) Задаешь картинке position: relative; left: -20px; top: -20px; padding: 10px (картинка съежает влево и вверх, плюс должен появится отступ от рамки)
6) Проверяешь результат
Если нет отступа от рамки, то надо подумать.

Comments

[Артём Белых]

Спасибо огромное!