Слайдер отзывов клиентов: бесконечная карусель на JS

5 years ago40580Ян Александров
Темы Wordpress — HTML+CSS — Слайдер отзывов клиентов: бесконечная карусель на JS
3kb
вес скрипта без минификации v1.0 – сентябрь 2019

Отзывы – один из способов эффективного представления контента. Этот инструмент позволяет убедить клиента, что услуга или товар уже опробован, и… он нравится людям. В сети существует масса интересных каруселей отзывов, однако в этой статье я хочу поделиться собственным. Идею дизайна и анимации карусели я заимствовал на сайте dribbble.com. Кто не знает, это социальная сеть для веб дизайнеров.

Особенности карусели:

  • Переключение вперёд-назад мы реализуем через тег span. Никаких ссылок с атрибутом href="#", так как считается, что это не очень хорошо для СЕО.
  • Минимальное количество кода.
  • Поддержка современных и не очень браузеров.
  • Адаптивность (это уже само собой).
  • Бесконечная прокрутка вперёд-назад.
Оформление слайдера карусели
Демо
Скачать

#1 Вёрстка

Карусель состоит из 3 блоков: блока списка слайдов, блока с текстом текущего отзыва и кнопками “вперёд-назад”. Элементы в списке слайдов содержат атрибут data-*, откуда мы и будем подтягивать текст отзыва и имя клиента.

<div class="carousel">
    <div class="carousel-counter">04/05</div>
    <div class="carousel-box">
        <div class="carousel-box__item" data-name="Евгения Светлова" data-who="житель города Москва" data-review="Магазин — супер! Всегда буду здесь покупать! Доставили точно в срок, предварительно позвонили, помогли подключить и сделали скидку. Ребята, я вас обожаю!">
            <div class="carousel-box__item_img">
                <i style="background-image: url('https://i.postimg.cc/tgtfL2TX/review-2.jpg');"></i>
            </div>
            <span class="carousel-box__item_desc">Евгения Светлова</span>
        </div>
        <div class="carousel-box__item" data-name="Арам Карапятян" data-who="частный предприниматель" data-review="Микрофинансовая компания хотя и имеет схожие параметры работы с банком - это не одно и тоже. Наш сервис поможет вам подобрать мгновенные займы онлайн, вне зависимости от того, в каком регионе России вы живете. Преимущества МФО заключаются в следующем:">
            <div class="carousel-box__item_img">
                <i style="background-image: url('https://i.postimg.cc/Y0jsL7x9/review-1.jpg');"></i>
            </div>
            <span class="carousel-box__item_desc">Арам Карапятян</span>
        </div>
        <div class="carousel-box__item" data-name="Бабуля" data-who="житель города Москва" data-review="Девайс неплохой. Качество сборки оставляет желать лучшего, но зато по функционалу модель ощутимо превосходит предыдущие серии.">
            <div class="carousel-box__item_img">
                <i style="background-image: url('https://i.postimg.cc/5yGkwrPm/review-4.jpg');"></i>
            </div>
            <span class="carousel-box__item_desc">Бабуля</span>
        </div>
        <div class="carousel-box__item" data-name="Иванов Станислав" data-who="житель города Москва" data-review="Ужасный сервис! Мало того что пришлось ждать полтора часа, так и менеджер оказался неотесанным хамлом. Люди, не ходите в эту шаражкину контору! Уважайте свои нервы и время!">
            <div class="carousel-box__item_img">
                <i style="background-image: url('https://i.postimg.cc/15kjXLVm/review-3.jpg');"></i>
            </div>
            <span class="carousel-box__item_desc">Иванов Станислав</span>
        </div>
        <div class="carousel-box__item" data-name="Инкогнито" data-who="Пользователь пожелал остаться неизвестным" data-review="На бирже довольно давно, заработать средства в размере 4000 - 9000 рублей/месяц легко! По началу в статусе школьника было мало заказов (в основном копеечные), но по достижении статуса Бакалавр, потом Магистр дело пошло в гору. На поднятие статуса потратила около двух недель - цены совершенно другие. На сегодняшний день чуть осталось до Аспиранта.">
            <div class="carousel-box__item_img">
                <i style="background-image: url('https://i.postimg.cc/tgtfL2TX/review-2.jpg');"></i>
            </div>
            <span class="carousel-box__item_desc">Инкогнито</span>
        </div>
    </div>
    <div class="carousel-content">
        <div class="carousel-content__name">Евгения Светлова</div>
        <div class="carousel-content__who">житель города Москва</div>
        <div class="carousel-content__review">Магазин — супер! Всегда буду здесь покупать! Доставили точно в срок, предварительно позвонили, помогли подключить и сделали скидку. Ребята, я вас обожаю!</div>
    </div>
    <div class="carousel-arrow">
        <span class="carousel-arrow__next"></span>
        <span class="carousel-arrow__prev"></span>
    </div>
</div>

#2 Оформление CSS

Здесь всё вполне стандартно. Из того, что заслуживает внимания – использование свойства direction для контейнера со слайдами .carousel-box. Мы изменяем направление отображения блоков. Это важный момент, без которого слайдер может неправильно работать.

.carousel {
	width: 100%;
	float: left;
	padding: 0;
	position: relative;
}
.carousel-counter{
	position: absolute;
	top: 60px;
	font-size: 20px;
	left: 0;
}
.carousel-box {
	position: relative;
	padding-top: 20px;
	width: calc(66.6666% - 50px);
	margin: 0 50px 20px 0;
	overflow: hidden;
	height: 100%;
	font-size: 0;
	white-space: nowrap;
	display: inline-block;
	float: left;
	direction: rtl;
}
.carousel-box__item {
	display: inline-block;
	vertical-align: bottom;
	white-space: normal;
	position: relative;
	font-size:inherit;
	width: 25%;
	margin-bottom: 20px;
}
.carousel-box__item_img{
	width: calc(100% - 35px);
	margin-right: 37px;
	box-sizing: border-box;
	float: left;
	overflow: hidden;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
	height: 414px;
}
.carousel-box__item_img i{
	width: 100%;
	float: left;
	cursor: pointer;
	height: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	max-width: inherit;
	position: relative;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-position: center 0;
	top: 155px;
}
.carousel-box__item:first-child .carousel-box__item_img i{
	top: 0px;
}
.carousel-box__item_img:hover{
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transform: scale(1.05);
}
.carousel-box__item_img:active{
	-webkit-transform: scale(0.95);
	-moz-transform: scale(0.95);
	transform: scale(0.95);
}
.carousel-box__item_desc {
	visibility: hidden;
	font-weight: 900;
	padding-top: 20px;
	line-height: 19px;
	display: none;
	float: left;
	width: calc(100% - 35px);
	font-size: 12px;
	font-family: sans-serif;
}
.carousel-box__item_desc:before {
	display: block;
	content: "";
	height: 2px;
	margin-bottom:8px;
	width: 0%;
	background-color: #8BC34A;
	transition: width .3s ease-in-out;
}
.carousel-box__item_img:hover + span:before,
.carousel-box__item_img:focus + span:before {
	width: 100%;
}
.carousel-content{
	width: 25%;
	padding-top: 20px;
	position: relative;
	display: inline-block;
	float: left;
}
.carousel-content__name{
	margin-bottom: 5px;
}
.carousel-content__who {
	color: #9e9e9e;
	margin-bottom: 15px;
}
.carousel-content__review{
	font-size: 15px;
	line-height: 1.4;
}
.carousel-arrow{
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
}
.carousel-arrow__prev, .carousel-arrow__next {
	position: absolute;
	bottom: 40px;
	cursor: pointer;
	margin: auto;
	width: 50px;
	height: 50px;
	background-color: #8BC34A;
	border-radius: 100%;
	line-height: 50px;
	text-align: center;
	-webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}
.carousel-arrow__prev:hover, .carousel-arrow__next:hover{
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	transform: scale(1.2);
}
.carousel-arrow__prev:active, .carousel-arrow__next:active{
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	transform: scale(0.9);
}
.carousel-arrow__prev:after, .carousel-arrow__next:after, .carousel-arrow__prev:before, .carousel-arrow__next:before{
	content: "";
	width: 12px;
	height: 2px;
	position: absolute;
	background-color: #fff;
	top: 20px;
	left: 20px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.carousel-arrow__prev:after, .carousel-arrow__next:before{
	top: 28px;
	left: 20px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.carousel-arrow__next:before{
	top: 20px;
	left: 18px;
}
.carousel-arrow__next:after{
	top: 28px;
	left: 18px;
}
.carousel-arrow__prev {
	right: calc(33.333% - 50px);
}
.carousel-arrow__next {
	left: 0;
	/* display: none; */
}
@media only screen and (max-width: 991px) {
	.carousel-box__item{
		width: 33.33333%;
	}
}
@media only screen and (max-width: 768px) {
	.carousel-box__item{
		width: 50%;
	}
	.carousel-box{
		width: calc(45% - 15px);
		margin-right: 15px;
	}
	.carousel-content{
		width: 55%;
	}
	.carousel-arrow__prev{
		right: calc(55% - 50px);
	}
}
@media only screen and (max-width: 640px) {
	.carousel-box__item{
		width: 100%;
	}
	.carousel-box__item_img{
		width: calc(100% - 15px);
		margin-right: 15px;
	}
}

#3 Обработка событий на jQuery

$(document).ready(function(){
	function liteCarousel(obj, block, item) {
		var parent = $(obj).parents(),
			items  = parent.find(block + ' ' + item),
			first  = parent.find(block + ' ' + item + ':eq(0)');
			options = {
				speed: 500,
			};
		
		if(first.is(':animated')) {
			return;
		}
		
		parent.find(block + ' ' + item).stop(true, true);

		if ($(obj).hasClass('carousel-arrow__prev')) {
		
			elem = parent.find(block + ' ' + item + ':eq(0)');
			
			elem.find('i').animate({
				top: items.eq(1).find('i').css('top')
			}, options.speed);
				
			items.eq(1).find('i').animate({
				top: items.eq(0).find('i').css('top')
			}, options.speed);
		
			elem.animate({
				marginRight: 0 - elem.width()
			}, options.speed, function() {
				elem.css('margin-right', 0).appendTo(elem.parent());
			});
			curr = items.eq(1)[0].dataset;
		} else {

			elem = items.last();
			
			elem.find('i').animate({
				top: items.eq(0).find('i').css('top')
			}, options.speed);
				
			items.eq(0).find('i').animate({
				top: items.eq(1).find('i').css('top')
			}, options.speed);
		
			elem.prependTo(elem.parent()).css('margin-right','-'+elem.width()+'px').animate({marginRight:0}, options.speed);
			
			curr = elem[0].dataset;
		}
		
		// меняем текст отзывов
		review = $(obj).parents('.carousel');
		$.each(curr, function( key, value ) {
			review.find('.carousel-content__' + key).text(value);
		});
		
		items.each(function(i,elem) {
			$(elem).attr('data-id',i+1);
		});
		
	}

	$(document).on('click', '.carousel-arrow__prev, .carousel-arrow__next', function(e) {
		liteCarousel(this,'.carousel-box','.carousel-box__item');
	});
});

На этом всё. У нас получилась замечательная карусель отзывов клиентов.

Leave a Reply

B I PHP JS

Made with ❤ by CodyShop