Отзывы — фото

HTML

<?php 
$images = get_field('фото_отзывов');
if( $images ): ?>
<div class="reviews">
    <div class="container">
        <div class="content-title content-title--c"><?php the_field('заголовок_блока_отзывов'); ?></div>
        <div class="reviews_block regular">
            <?php foreach( $images as $image ): ?>
            <a class="review--inner" href="<?php echo esc_url($image['url']); ?>" data-rel="lightbox-rev">
                <img src="<?php echo esc_url($image['sizes']['medium_large']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
            </a>
            <?php endforeach; ?>
        </div>
        <div class="btn-block">
            <a class="btn" href="">Оставить заявку на бухгалтерское обслуживание</a>
        </div>
    </div>
</div>
<?php endif; ?>

LESS

.reviews{
    text-align: center;
    padding-top: 150px;
    
    .review--inner{
        display: block;
        text-decoration: none;
        height: 300px;
        overflow: hidden;
        border-radius: 10px;
        border: 1px solid #ededed;
        position: relative;
        
        img{
            object-fit: cover;
            width: 100%;
            height: 100%;
            vertical-align: bottom;
        }
        &::before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(26, 26, 26, 0.5) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cline x1='12' y1='8' x2='12' y2='16'%3e%3c/line%3e%3cline x1='8' y1='12' x2='16' y2='12'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%;
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            opacity: 0;
            transition: 0.5s all;
        }
        &:hover{
            &::before{
                opacity: 1;
            }
        }
    }

    .btn-block{
        margin-top: 35px;
    }
}

jQuery

(function(){
    $(document).ready(function(){
        var owl = $('.reviews_block');
        owl.owlCarousel({
            loop: true,
            items: 5,
            smartSpeed: 600,
            margin: 30,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                },
                600: {
                    items: 2,
                },
                1000: {
                    items: 5,
                }
            }
        });
    });
})();
Контакты

Работаем: с ПН по ПТ, с 08:00 до 16:00 (МСК)
Отдыхаем: в СБ и ВС, чтобы быть в тонусе
и реализовывать самые сложные идеи