Зеркальный слайдер

Сделаем такой симпатичный слайдер. Он не имеет элементов управления, не нужно устанавливать дополнительные скрипты.

Верстка

<div class="row slider-mirror">

	<div class="col-6">

		<div class="mirror-item mirror-item-left">

			<img src="/wp-content/uploads/2024/07/3-2-1-scaled-1.webp">

			<div class="slides">
				<div><img src="/wp-content/uploads/2024/07/1-1-scaled-1.webp"></div>
				<div><img src="/wp-content/uploads/2024/07/2-2-scaled-1.webp"></div>
			</div>

		</div>

	</div>

	<div class="col-6">

		<div class="mirror-item mirror-item-right">

			<img src="/wp-content/uploads/2024/07/3-2-1-scaled-1.webp">

			<div class="slides">
				<div><img src="/wp-content/uploads/2024/07/1-1-scaled-1.webp"></div>
				<div><img src="/wp-content/uploads/2024/07/2-2-scaled-1.webp"></div>
			</div>

		</div>

	</div>

</div>

Стили

<style>
.slider-mirror {
    margin: 0;
    height: 80vh;
    position: relative;
}	
.slider-mirror > * {
    padding: 0;
}	
.slider-mirror img {
    display: block;
    object-fit: cover;
    height: 100%;
}


.mirror-item {
    position: relative;
    overflow: hidden;
    height: 100%;

}

.mirror-item .slides {
    position: absolute;
    top: 0;
    display: flex;
    height: 100%;
    background: #455d58;
    transition: all 1.5s ease;
    -o-transition: all 1.5s;
    -webkit-transition: all 1.5s ease 0s;
}

.mirror-item-right .slides > * {
	margin-right: 500px;
}

.mirror-item-left .slides > * {
	margin-left: 500px;
}

.mirror-item:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.64);
}
</style>

Скрипт

jQuery(document).ready(function($){	
	
	$mirror_width = $('.mirror-item-left').width() + 500;
	$slider_count = $('.mirror-item-left .slides').children().length;
	$slider_width = $mirror_width * $slider_count;

	$('.mirror-item .slides').css('width', $slider_width);
	$('.mirror-item-left .slides').css('right', -$slider_width);
	$('.mirror-item-right .slides').css('left', -$slider_width);

	$('.mirror-item-right .slides').after('<style>.mirror-item-left .slides.slide-1{right:'+ (-$mirror_width) +'px !important}.mirror-item-left .slides.slide-2{right:0 !important}</style>');
	$('.mirror-item-right .slides').after('<style>.mirror-item-right .slides.slide-1{left:'+ (-$mirror_width) +'px !important}.mirror-item-right .slides.slide-2{left:0 !important}</style>');


	setInterval(function(){ 

		// Добавить автоматический цикл от количества слайдов

		if ( $('.mirror-item .slides').hasClass('slide-1') ) {

			$('.mirror-item .slides').removeClass('slide-1');
			$('.mirror-item .slides').addClass('slide-2');

		} else if ( $('.mirror-item .slides').hasClass('slide-2') )  {

			$('.mirror-item .slides').removeClass('slide-2');

		} else {

			$('.mirror-item .slides').addClass('slide-1'); 

		}

	}, 3000);
	
});

[site-socialshare]