Плавная смена фона блока
В блоке плавно меняется фон из заданного списка картинок.
Скопировано
<div class='block_1'> <?
$backgrounds = [
'/wp-content/themes/skywaykz_com/img/front-top-1.webp',
'/wp-content/themes/skywaykz_com/img/front-top-2.webp',
'/wp-content/themes/skywaykz_com/img/front-top-3.webp',
'/wp-content/themes/skywaykz_com/img/front-top-4.webp',
'/wp-content/themes/skywaykz_com/img/front-top-5.webp',
]; ?>
<div class="slide active" style="background-image: url('<? echo esc_url($backgrounds[0]); ?>');"></div> <?
for( $i = 1; $i < count( $backgrounds ); $i++) { ?>
<div class="slide" style="background-image: url('<? echo esc_url($backgrounds[$i]); ?>');"></div> <?
} ?>
</div>
Скопировано
.block_1 {
height: 400px;
position: relative;
overflow: hidden;
}
.block_1 .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.2s ease-in-out;
}
.block_1 .active {
opacity: 1;
}
Скопировано
var $slides = $( '.block_1 .slide' );
var currentIndex = 0;
var totalSlides = $slides.length;
setInterval( function() {
$slides.eq(currentIndex).removeClass('active');
currentIndex = (currentIndex + 1) % totalSlides;
$slides.eq(currentIndex).addClass('active');
}, 3000);