CODYSHOP
темы и плагины для WordpressОтзывы – один из способов эффективного представления контента. Этот инструмент позволяет убедить клиента, что услуга или товар уже опробован, и… он нравится людям. В сети существует масса интересных каруселей отзывов, однако в этой статье я хочу поделиться собственным. Идею дизайна и анимации карусели я заимствовал на сайте 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'); }); });
На этом всё. У нас получилась замечательная карусель отзывов клиентов.