javascript 光滑滑块3d

Posted 2021-05-03

<!--Отзывы-->
	<div class="review-wrap sect-gap">
		<div class="section">
			<div class="section-title review-title">Отзывы довольных клиентов</div>
			<div class="slider-review">
				
				<div class="slider-review__block">
					<div class="slider-review__img"><img src="/images/delete/rev-1.png" alt=""></div>
					<div class="slider-review__title">СК "ФАКТ"</div>
					<div class="slider-review__desc">Уже не первый год арендуем строительные бытовки в этой компании. Хотим выразить благодарность руководителю отдела аренды Александре за оперативность, неизменную вежливость и тактичность в любой ситуации, а также компании «АрмадаСтрой» за предоставление в пользование всегда чистого и исправного оборудования.</div>
				</div>
				
				<div class="slider-review__block">
					<div class="slider-review__img"><img src="/images/delete/rev-2.png" alt=""></div>
					<div class="slider-review__title">ООО “Персонал Плюс”</div>
					<div class="slider-review__desc">У меня свой вахтовый поселок, который состоит в основном из модульных. Заказывал их строительство в вашей компании, понравилось, что выдержали все сроки и составили адекватную смету. Работы все выполнили качественно, придраться не к чему. Благодарю!</div>
				</div>
				
				<div class="slider-review__block">
					<div class="slider-review__img"><img src="/images/delete/rev-3.png" alt=""></div>
					<div class="slider-review__title">CК “Базис”</div>
					<div class="slider-review__desc">Хотим выразить благодарность менеджеру Александре  и монтажной бригаде во главе с бригадиров Максимом, которые рассчитали и построили нам в  Люблино прекрасный уютный каркасный домик для постоянного проживания. Спасибо огромное за аккуратность,  красоту исполнения и особенно за соблюдение сроков сдачи дома! Всего за две недели мы стали обладателями чудесного загородного жилья.</div>
				</div>
				
			</div>
		</div>
	</div>
	<!--Отзывы-->

.review-wrap .slick-list {
	padding-top: 1%!important;
	padding-bottom: 1%!important;
	padding-left: 0%!important;
	padding-right: 0%!important;
}
.review-wrap .slick-track {
	max-width: 100%!important;
	transform: translate3d(0, 0, 0) scale(1)!important;
	width: 555px !important;
}
.review-wrap .slick-slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
	width: 100%!important;
	transform: translate3d(0, 0, 0) scale(1);
	transition: transform 1s, opacity 1s;
}
.review-wrap .slick-snext,
.review-wrap .slick-sprev {
	display: block;
}
.review-wrap .slick-current {
	opacity: 1;
	position: relative;
	display: block;
	transform: translate3d(0, 0, 20px) scale(1);
	z-index: 2;
}
.review-wrap .slick-snext {
	opacity: 1;
	transform: translate3d(64%, 0, 0px) scale(0.75);
	z-index: 1;
}
.review-wrap .slick-sprev {
	opacity: 1;
	transform: translate3d(-64%, 0, 0px) scale(0.75);
}

$(document).ready(function () {
	//slider-review
	var rev = $('.slider-review');
	rev.on('init', function(event, slick, currentSlide) {
		var
			cur = $(slick.$slides[slick.currentSlide]),
			next = cur.next(),
			prev = cur.prev();
		prev.addClass('slick-sprev');
		next.addClass('slick-snext');
		cur.removeClass('slick-snext').removeClass('slick-sprev');
		slick.$prev = prev;
		slick.$next = next;
	}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
		console.log('beforeChange');
		var
			cur = $(slick.$slides[nextSlide]);
		console.log(slick.$prev, slick.$next);
		slick.$prev.removeClass('slick-sprev');
		slick.$next.removeClass('slick-snext');
		next = cur.next(),
			prev = cur.prev();
		prev.prev();
		prev.next();
		prev.addClass('slick-sprev');
		next.addClass('slick-snext');
		slick.$prev = prev;
		slick.$next = next;
		cur.removeClass('slick-next').removeClass('slick-sprev');
	});
	
	rev.slick({
		speed: 500,
		arrows: true,
		dots: true,
		focusOnSelect: true,
		prevArrow: '<button type="button" class="navigation-prev button-arrow far fa-long-arrow-left"></button>',
		nextArrow: '<button type="button" class="navigation-next button-arrow far fa-long-arrow-right"></button>',
		infinite: true,
		centerMode: true,
		slidesPerRow: 1,
		slidesToShow: 1,
		slidesToScroll: 1,
		centerPadding: '0',
		swipe: true
	});
)};