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,
});
});
})();