» »

Слайдер для отзывов клиентов сайта на CSS

Слайдер для отзывов клиентов сайта на CSS

Отзывы клиентов или пользователей на сайте стали очень важны для продвижения сайта и безусловно влияет на продажи, если сайт является магазином. Или интернет ресурсы, которые предоставляют услуги, то здесь обязательно найдите отзывы под каждым материалом. А если тот или иной продукт востребован, чтоб не делать несколько страниц, то под него можно поставить слайдер, где будут написаны все отзывы или те, которые посчитают нужными для себя.

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

Здесь идет не карусель, где не станет автоматически проматывать что нужно самостоятельно кликать и читать, что очень большой плюс считаю. Так как если карусель, то на чтение дается не очень много времени, здесь же вы можете все прочесть и узнать, что думают о покупке, те которые уже приобрели.

На каждое описание идет своя палитра цвета, что безусловно отлично запоминается, они не яркие цвета, но уже по цвету можно запомнить, где какой отзыв был оставлен покупателем. Также считаю, что его можно поставить не под разные описание, круто или нет, а вообще сделать ветреной, где станет на показ различные материалы, что как на слайде по клику переходим, плюс идет еще к нему описание.

Так выглядит первый отзыв с таким оттенком цвета:

Слайдер на CSS для сайта с отзывами

Приступаем к установке:

HTML

Код
<div id="kagepisuceng" class="kagepisuceng">
  <ol class="kagepisuceng__indicators">
  <li class="kagepisuceng__indicator kagepisuceng__indicator_active" data-slide-to="0"></li>
  <li class="kagepisuceng__indicator" data-slide-to="1"></li>
  <li class="kagepisuceng__indicator" data-slide-to="2"></li>
  <li class="kagepisuceng__indicator" data-slide-to="3"></li>
  </ol>
  <div class="kagepisuceng__items">
  <div class="kagepisuceng__item kagepisuceng__item_1 kagepisuceng__item_active">
  <div class="kagepisuceng__item_inner">
  <span class="kagepisuceng__item_img">
  <img class="kagepisuceng__item_photo" src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/photo-1.jpg" alt="">
  </span>
  <span class="kagepisuceng__item_testimonial">
  <span class="kagepisuceng__item_name">Валентин Маликов</span>
  <span class="kagepisuceng__item_post">Web Дизайн</span>
  <span class="kagepisuceng__item_text">
  Здесь идет описание, что он думает вообще об этом материале.
  </span>
  </span>
  </div>
  </div>
  <div class="kagepisuceng__item kagepisuceng__item_2">
  <div class="kagepisuceng__item_inner">
  <span class="kagepisuceng__item_img">
  <img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/photo-2.jpg" alt="">
  </span>
  <span class="kagepisuceng__item_testimonial">
  <span class="kagepisuceng__item_name">Олеся Маркова</span>
  <span class="kagepisuceng__item_post">Web Стилист</span>
  <span class="kagepisuceng__item_text">
  Вообщем опять идет описание материала, что она приобрела, или простая реклама, которую предлагает на интернет ресурсе.
  </span>
  </span>
  </div>
  </div>
  <div class="kagepisuceng__item kagepisuceng__item_3">
  <div class="kagepisuceng__item_inner">
  <span class="kagepisuceng__item_img">
  <img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/photo-3.jpg" alt="">
  </span>
  <span class="kagepisuceng__item_testimonial">
  <span class="kagepisuceng__item_name">Имя Фамилия</span>
  <span class="kagepisuceng__item_post">Какой Статус</span>
  <span class="kagepisuceng__item_text">
  Дело тонкое про описание
  </span>
  </span>
  </div>
  </div>
  <div class="kagepisuceng__item kagepisuceng__item_4">
  <div class="kagepisuceng__item_inner">
  <span class="kagepisuceng__item_img">
  <img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/photo-4.jpg" alt="">
  </span>
  <span class="kagepisuceng__item_testimonial">
  <span class="kagepisuceng__item_name">Ирина Раентова</span>
  <span class="kagepisuceng__item_post">Web админ</span>
  <span class="kagepisuceng__item_text">
  Аналогично по описанию. то что нужно знать для своей рекламы.
  </span>
  </span>
  </div>
  </div>
  </div>
  <a class="kagepisuceng__control kagepisuceng__control_prev" href="#" role="button"></a>
  <a class="kagepisuceng__control kagepisuceng__control_next" href="#" role="button"></a>
  </div>

CSS

Код
.kagepisuceng {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 960px;
  }

  .kagepisuceng__items {
  position: relative;
  width: 100%;
  overflow: hidden;
  }

  .kagepisuceng__item {
  position: relative;  
  display: none;
  width: 100%;
  transition: transform 0.6s ease;
  backface-visibility: hidden;
  }

  .kagepisuceng__item_active,
  .kagepisuceng__item_next,
  .kagepisuceng__item_prev {
  display: block;
  }

  .kagepisuceng__item_next,
  .kagepisuceng__item_prev {
  position: absolute;

  top: 0;
  }

  .kagepisuceng__item_next.kagepisuceng__item_left,
  .kagepisuceng__item_prev.kagepisuceng__item_right {
  transform: translateX(0);
  }

  .kagepisuceng__item_next,
  .kagepisuceng__item_right.kagepisuceng__item_active {
  transform: translateX(100%);
  }

  .kagepisuceng__item_prev,
  .kagepisuceng__item_left.kagepisuceng__item_active {
  transform: translateX(-100%);
  }

   

  .kagepisuceng__control {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  }

  .kagepisuceng__control:hover,
  .kagepisuceng__control:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: .9;
  }

  .kagepisuceng__control_prev {
  left: 0;
  }

  .kagepisuceng__control_next {
  right: 0;
  }

  .kagepisuceng__control::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  }

  .kagepisuceng__control_prev::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  }

  .kagepisuceng__control_next::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
  }

  /* индикаторы слайдера */

  .kagepisuceng__indicators {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
  }

  .kagepisuceng__indicator {
  position: relative;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  }

  .kagepisuceng__indicator::before {
  position: absolute;
  top: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
  }

  .kagepisuceng__indicator::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
  }

  .kagepisuceng__indicator_active {
  background-color: #fff;
  }

  img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  border-radius: 50%;
  }

  .kagepisuceng__item {}

  .kagepisuceng__item_1 {
  background: linear-gradient(45deg, #085078 10%, #85d8ce 90%);
  }

  .kagepisuceng__item_2 {
  background: linear-gradient(to right, #dd1818, #333333);
  }

  .kagepisuceng__item_3 {
  background: linear-gradient(to right, #093028, #237a57);
  }

  .kagepisuceng__item_4 {
  background: linear-gradient(to right, #243B55, #141E30);
  }

  .kagepisuceng__item {
  height: 320px;
  overflow: hidden;
  }

  .kagepisuceng__item_inner {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 36px;
  bottom: 36px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  }

  .kagepisuceng__item_img {
  flex: 0 0 80px;
  max-width: 80px;
  }

  .kagepisuceng__item_testimonial {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  text-align: center;

  }

  @media (min-width: 576px) {
  .kagepisuceng__item {
  height: 250px;
  }
  .kagepisuceng__item_inner {
  flex-direction: row;
  }
  .kagepisuceng__item_testimonial {
  margin-left: 15px;
  }
  .kagepisuceng__item_img {
  flex: 0 0 150px;
  max-width: 150px;
  }
  .kagepisuceng__item_testimonial {
  text-align: left;
  }
  }

  .kagepisuceng__item_name {
  font-size: 20px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
  }

  .kagepisuceng__item_post {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
  }

  .kagepisuceng__item_text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  }

JS

Код
'use strict';
  var kagepisuceng = (function (config) {

  const ClassName = {
  INDICATOR_ACTIVE: 'kagepisuceng__indicator_active',
  ITEM: 'kagepisuceng__item',
  ITEM_LEFT: 'kagepisuceng__item_left',
  ITEM_RIGHT: 'kagepisuceng__item_right',
  ITEM_PREV: 'kagepisuceng__item_prev',
  ITEM_NEXT: 'kagepisuceng__item_next',
  ITEM_ACTIVE: 'kagepisuceng__item_active'
  }

  var
  _isSliding = false, // индикация процесса смены слайда
  _interval = 0, // числовой идентификатор таймера
  _transitionDuration = 700, // длительность перехода
  _kagepisuceng = {}, // DOM элемент слайдера
  _items = {}, // .kagepisuceng-item (массив слайдов)  
  _kagepisucengIndicators = {}, // [data-slide-to] (индикаторы)
  _config = {
  selector: '', // селектор слайдера
  isCycling: true, // автоматическая смена слайдов
  direction: 'next', // направление смены слайдов
  interval: 5000, // интервал между автоматической сменой слайдов
  pause: true // устанавливать ли паузу при поднесении курсора к слайдеру
  };

  var
  // функция для получения порядкового индекса элемента
  _getItemIndex = function (_currentItem) {
  var result;
  _items.forEach(function (item, index) {
  if (item === _currentItem) {
  result = index;
  }
  });
  return result;
  },
  // функция для подсветки активного индикатора
  _setActiveIndicator = function (_activeIndex, _targetIndex) {
  if (_kagepisucengIndicators.length !== _items.length) {
  return;
  }
  _kagepisucengIndicators[_activeIndex].classList.remove(ClassName.INDICATOR_ACTIVE);
  _kagepisucengIndicators[_targetIndex].classList.add(ClassName.INDICATOR_ACTIVE);
  },

  // функция для смены слайда
  _slide = function (direction, activeItemIndex, targetItemIndex) {
  var
  directionalClassName = ClassName.ITEM_RIGHT,
  orderClassName = ClassName.ITEM_PREV,
  activeItem = _items[activeItemIndex], // текущий элемент
  targetItem = _items[targetItemIndex]; // следующий элемент

  var _slideEndTransition = function () {
  activeItem.classList.remove(ClassName.ITEM_ACTIVE);
  activeItem.classList.remove(directionalClassName);
  targetItem.classList.remove(orderClassName);
  targetItem.classList.remove(directionalClassName);
  targetItem.classList.add(ClassName.ITEM_ACTIVE);
  window.setTimeout(function () {
  if (_config.isCycling) {
  clearInterval(_interval);
  _cycle();
  }
  _isSliding = false;
  activeItem.removeEventListener('transitionend', _slideEndTransition);
  }, _transitionDuration);
  };

  if (_isSliding) {
  return;  
  }
  _isSliding = true;  

  if (direction === "next") {
  directionalClassName = ClassName.ITEM_LEFT;
  orderClassName = ClassName.ITEM_NEXT;
  }

  targetItem.classList.add(orderClassName);  
  _setActiveIndicator(activeItemIndex, targetItemIndex);  
  window.setTimeout(function () {  
  targetItem.classList.add(directionalClassName);
  activeItem.classList.add(directionalClassName);
  activeItem.addEventListener('transitionend', _slideEndTransition);
  }, 0);

  },

  _slideTo = function (direction) {
  var
  activeItem = _kagepisuceng.querySelector('.' + ClassName.ITEM_ACTIVE),  
  activeItemIndex = _getItemIndex(activeItem),  
  lastItemIndex = _items.length - 1,  
  targetItemIndex = activeItemIndex === 0 ? lastItemIndex : activeItemIndex - 1;
  if (direction === "next") {  
  targetItemIndex = activeItemIndex == lastItemIndex ? 0 : activeItemIndex + 1;
  }
  _slide(direction, activeItemIndex, targetItemIndex);
  },
   
  _cycle = function () {
  if (_config.isCycling) {
  _interval = window.setInterval(function () {
  _slideTo(_config.direction);
  }, _config.interval);
  }
  },

  _actionClick = function (e) {
  var
  activeItem = _kagepisuceng.querySelector('.' + ClassName.ITEM_ACTIVE),  
  activeItemIndex = _getItemIndex(activeItem),  
  targetItemIndex = e.target.getAttribute('data-slide-to');

  if (!(e.target.hasAttribute('data-slide-to') || e.target.classList.contains('kagepisuceng__control'))) {
  return;
  }
  if (e.target.hasAttribute('data-slide-to')) {
  if (activeItemIndex === targetItemIndex) {
  return;
  }
  _slide((targetItemIndex > activeItemIndex) ? 'next' : 'prev', activeItemIndex, targetItemIndex);
  } else {
  e.preventDefault();
  _slideTo(e.target.classList.contains('kagepisuceng__control_next') ? 'next' : 'prev');
  }
  },

  _setupListeners = function () {
   
  _kagepisuceng.addEventListener('click', _actionClick);

  if (_config.pause && _config.isCycling) {
  _kagepisuceng.addEventListener('mouseenter', function (e) {
  clearInterval(_interval);
  });
  _kagepisuceng.addEventListener('mouseleave', function (e) {
  clearInterval(_interval);
  _cycle();
  });
  }
  };

  for (var key in config) {
  if (key in _config) {
  _config[key] = config[key];
  }
  }
  _kagepisuceng = (typeof _config.selector === 'string' ? document.querySelector(_config.selector) : _config.selector);
  _items = _kagepisuceng.querySelectorAll('.' + ClassName.ITEM);
  _kagepisucengIndicators = _kagepisuceng.querySelectorAll('[data-slide-to]');
  // запуск функции cycle
  _cycle();
  _setupListeners();

  return {
  next: function () {  
  _slideTo('next');
  },
  prev: function () {  
  _slideTo('prev');
  },
  stop: function () {
  clearInterval(_interval);
  },
  cycle: function () {  
  clearInterval(_interval);
  _cycle();
  }
  }
  }({
  selector: '.kagepisuceng',
  isCycling: false,
  direction: 'next',
  interval: 5000,
  pause: true
  }));

В данном материале как можно подробнее рассмотрим этот скрипт, который больше похоже по функциям на информер, но является реальным слайдером. Вы узнаете как правильно создать и где лучше его разместить на сайте и под какие тематические ресурсы он может отлично подойти.

Это безусловно отличный способ создания простого модуля, где есть вариант для оставления своего пожелание или отзыва, который может помочь другим покупателям, но также не сложно поставить под свой дизайн.

Сколько постов в него можно разместить, все зависит от разработчика, но думаю нужно как положительные поставить, так и отрицательные, это для реального обзора. То если только будут продукт хвалить, то сразу возникнут подозрение, но это уже маркетинг, наше дело его поставить, чтоб отлично смотрелся на сайте.

Демонстрация
2019-02-28 Загрузок: 1 Просмотров: 334 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar