Галерея с автошириной и мышкой-стрелками

HTML

<?php 
$images = get_field('галерея_блока_портфолио');
if( $images ): ?>
<div class="gallery-autowidth">
    <div class="container">
        <div class="title-decor">Портфолио</div>
        <div class="content-title"><?php the_field('заголовок_блока_портфолио'); ?></div>
    </div>
    <div class="gallery_autowidth__slider regular">
        <?php foreach( $images as $image ): ?>
        <img src="<?php echo esc_url($image['sizes']['medium_large']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>

LESS

.gallery-autowidth{
    .owl-stage-outer{
        height: 600px;
        
        @media(max-width: 724px){
            height: 400px;
        }
    }
    .owl-dots {
        display: none;
    }
    .owl-nav{
        div{
            width: 50%;
            height: auto;
            top: 0;
            bottom: 0;
            margin: 0;
            background: transparent !important;
            border-radius: 0;
            
            @media(max-width: 724px){
                width: 50px;
            }
            &:hover{
                background: transparent !important;
            }
        }
        .owl-prev{
            left: 0;
            cursor: url('../img/cursur-left.png'), auto;
            
            @media(max-width: 724px){
                cursor: pointer;
                background: 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.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M15 18l-6-6 6-6'/%3e%3c/svg%3e") no-repeat 45% 50% !important;
                background-size: 30px;
                
                &:hover{
                    background: 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.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M15 18l-6-6 6-6'/%3e%3c/svg%3e") no-repeat 45% 50% !important;
                    background-size: 30px;
                }
            }
        }
        .owl-next{
            right: 0;
            cursor: url('../img/cursur-right.png'), auto;
            
            @media(max-width: 724px){
                cursor: pointer;
                background: 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.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18l6-6-6-6'/%3e%3c/svg%3e") no-repeat 65% 50% !important;
                background-size: 30px;
                
                &:hover{
                    background: 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.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18l6-6-6-6'/%3e%3c/svg%3e") no-repeat 65% 50% !important;
                    background-size: 30px;
                }
            }
        }
    }
    img{
        width: 100%;
        height: 600px;
        object-fit: cover;
    }
    .btn{
        margin-top: 70px;
        display: inline-block;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolygon points='5 3 19 12 5 21 5 3'%3e%3c/polygon%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: 15px 14px;
        padding-left: 45px;
        
        @media (max-width: 724px){
            margin-top: 40px;
            background-position: 15px 24px;
            text-align: left;
        }
        
        br{
            display: none;
            
            @media (max-width: 724px){
                display: block;
            }
        }
    }
}

jQuery

(function(){
    $(document).ready(function(){
        var owl = $('.gallery_autowidth__slider');
        owl.owlCarousel({
            loop: true,
            autoWidth:true,
            items: 4,
            margin: 30,
            smartSpeed: 600,
            autoplay: true,
        });
    });
})();