ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивный слайдер для отзывов сайтов

Адаптивный слайдер для отзывов сайтов

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

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

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

Вид слайдера по ширине:

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

Вид с мобильного аппарата:

Мобильной слайдер для сайта на CSS3

Установка:

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

Шрифтовые знаки в HEAD

Код

HTML

Код

<section id="astiserkan" class="astiserkan">

  <div class="svorachiva">

  <span id="pravaya_strelka" class="strelka right fa fa-chevron-right"></span>
  <span id="strelka_vlevo" class="strelka left fa fa-chevron-left "></span>
  <ul id="astiserkan-tochki" class="tochki">
  <li class="dot destvu"></li><li class="dot"></li><li class="dot"></li><li class="dot"></li><li class="dot"></li>
  </ul>
  <div id="astiserkan-prodolent" class="prodol">

  <div class="destvu">
  <div class="img"><img src="Здесь ссылка или оператор на изображение #1" alt=""></div>
  <h2>Название</h2>
  <p>Здесь идет описание того типа, который сейчас просматривается под ником название. Вообщем все очень просто, картинка пользователя, и что он умеет по тематике, а точнее рулит.</p>
  </div>

  <div>
  <div class="img"><img src="Здесь ссылка или оператор на изображение #2" alt=""></div>
  <h2>Имя или Логин</h2>
  <p>И также сразу следует описание, которое будет представлять данного сотрудника на сайте, а точнее чем он занимается, а чем он может заработать себе на пропитание.</p>
  </div>

  <div>
  <div class="img"><img src="Здесь ссылка или оператор на изображение #3" alt=""></div>
  <h2>Логин</h2>
  <p>Подробное описание.</p>
  </div>

  <div>
  <div class="img"><img src="Здесь ссылка или оператор на изображение #4" alt=""></div>
  <h2>Ваше имя</h2>
  <p>Далее идет описание вашего направления</p>
  </div>

  <div>
  <div class="img"><img src="Здесь ссылка или оператор на изображение #5" alt=""></div>
  <h2>Как величать</h2>
  <p>Ваши интересы, или на чем можете деньги поднять.</p>
  </div>

  </div>

  </div>
  </section>

CSS

Код

.astiserkan {
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translatey(-50%);
  -moz-transform: translatey(-50%);
  -ms-transform: translatey(-50%);
  -o-transform: translatey(-50%);
  transform: translatey(-50%);
}

.astiserkan .svorachiva {
  position: relative;
  width: 100%;
  max-width: 1020px;
  padding: 40px 20px;
  margin: auto;
}

.astiserkan .strelka {
  display: block;
  position: absolute;
  color: #eee;
  cursor: pointer;
  font-size: 2em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  padding: 5px;
  z-index: 22222222;
}

.astiserkan .strelka:before {
  cursor: pointer;
}

.astiserkan .strelka:hover {
  color: #ea830e;
}


.astiserkan .strelka.left {
  left: 10px;
}

.astiserkan .strelka.right {
  right: 10px;
}

.astiserkan .tochki {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 60px;
  left: 0;
  display: block;
  z-index: 3333;
  height: 12px;
}

.astiserkan .tochki .dot {
  list-style-type: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #eee;
  margin: 0 10px;
  cursor: pointer;
  -webkit-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  position: relative;
}

.astiserkan .tochki .dot.destvu,
.astiserkan .tochki .dot:hover {
  background: #ea830e;
  border-color: #ea830e;
}

.astiserkan .tochki .dot.destvu {
  -webkit-animation: astiserkan-scale .5s ease-in-out forwards;
  -moz-animation: astiserkan-scale .5s ease-in-out forwards;
  -ms-animation: astiserkan-scale .5s ease-in-out forwards;
  -o-animation: astiserkan-scale .5s ease-in-out forwards;
  animation: astiserkan-scale .5s ease-in-out forwards;
}

.astiserkan .prodol {
  position: relative;
  overflow: hidden;
}

.astiserkan .prodol > div {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0 70px 0;
  opacity: 0;
}

.astiserkan .prodol > div.indestvu {
  opacity: 1;
}


.astiserkan .prodol > div.destvu {
  position: relative;
  opacity: 1;
}


.astiserkan .prodol div .img img {
  display: block;
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
}

.astiserkan .prodol div h2 {
  color: #ea830e;
  font-size: 1em;
  margin: 15px 0;
}

.astiserkan .prodol div p {
  font-size: 1.15em;
  color: #eee;
  width: 80%;
  margin: auto;
}

.astiserkan .prodol div.destvu .img img {
  -webkit-animation: astiserkan-show .5s ease-in-out forwards;
  -moz-animation: astiserkan-show .5s ease-in-out forwards;
  -ms-animation: astiserkan-show .5s ease-in-out forwards;
  -o-animation: astiserkan-show .5s ease-in-out forwards;
  animation: astiserkan-show .5s ease-in-out forwards;
}

.astiserkan .prodol div.destvu h2 {
  -webkit-animation: astiserkan-prodolent-in .4s ease-in-out forwards;
  -moz-animation: astiserkan-prodolent-in .4s ease-in-out forwards;
  -ms-animation: astiserkan-prodolent-in .4s ease-in-out forwards;
  -o-animation: astiserkan-prodolent-in .4s ease-in-out forwards;
  animation: astiserkan-prodolent-in .4s ease-in-out forwards;
}

.astiserkan .prodol div.destvu p {
  -webkit-animation: astiserkan-prodolent-in .5s ease-in-out forwards;
  -moz-animation: astiserkan-prodolent-in .5s ease-in-out forwards;
  -ms-animation: astiserkan-prodolent-in .5s ease-in-out forwards;
  -o-animation: astiserkan-prodolent-in .5s ease-in-out forwards;
  animation: astiserkan-prodolent-in .5s ease-in-out forwards;
}

.astiserkan .prodol div.indestvu .img img {
  -webkit-animation: astiserkan-hide .5s ease-in-out forwards;
  -moz-animation: astiserkan-hide .5s ease-in-out forwards;
  -ms-animation: astiserkan-hide .5s ease-in-out forwards;
  -o-animation: astiserkan-hide .5s ease-in-out forwards;
  animation: astiserkan-hide .5s ease-in-out forwards;
}

.astiserkan .prodol div.indestvu h2 {
  -webkit-animation: astiserkan-prodolent-out .4s ease-in-out forwards;
  -moz-animation: astiserkan-prodolent-out .4s ease-in-out forwards;
  -ms-animation: astiserkan-prodolent-out .4s ease-in-out forwards;
  -o-animation: astiserkan-prodolent-out .4s ease-in-out forwards;
  animation: astiserkan-prodolent-out .4s ease-in-out forwards;
}

.astiserkan .prodol div.indestvu p {
  -webkit-animation: astiserkan-prodolent-out .5s ease-in-out forwards;
  -moz-animation: astiserkan-prodolent-out .5s ease-in-out forwards;
  -ms-animation: astiserkan-prodolent-out .5s ease-in-out forwards;
  -o-animation: astiserkan-prodolent-out .5s ease-in-out forwards;
  animation: astiserkan-prodolent-out .5s ease-in-out forwards;
}

@-webkit-keyframes astiserkan-scale {
  0% {
  -webkit-box-shadow: 0px 0px 0px 0px #eee;
  box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
  -webkit-box-shadow: 0px 0px 10px 5px #eee;
  box-shadow: 0px 0px 10px 5px #eee;
  }

  70% {
  -webkit-box-shadow: 0px 0px 10px 5px #ea830e;
  box-shadow: 0px 0px 10px 5px #ea830e;
  }

  100% {
  -webkit-box-shadow: 0px 0px 0px 0px #ea830e;
  box-shadow: 0px 0px 0px 0px #ea830e;
  }
}

@-moz-keyframes astiserkan-scale {
  0% {
  -moz-box-shadow: 0px 0px 0px 0px #eee;
  box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
  -moz-box-shadow: 0px 0px 10px 5px #eee;
  box-shadow: 0px 0px 10px 5px #eee;
  }

  70% {
  -moz-box-shadow: 0px 0px 10px 5px #ea830e;
  box-shadow: 0px 0px 10px 5px #ea830e;
  }

  100% {
  -moz-box-shadow: 0px 0px 0px 0px #ea830e;
  box-shadow: 0px 0px 0px 0px #ea830e;
  }
}

@-ms-keyframes astiserkan-scale {
  0% {
  -ms-box-shadow: 0px 0px 0px 0px #eee;
  box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
  -ms-box-shadow: 0px 0px 10px 5px #eee;
  box-shadow: 0px 0px 10px 5px #eee;
  }

  70% {
  -ms-box-shadow: 0px 0px 10px 5px #ea830e;
  box-shadow: 0px 0px 10px 5px #ea830e;
  }

  100% {
  -ms-box-shadow: 0px 0px 0px 0px #ea830e;
  box-shadow: 0px 0px 0px 0px #ea830e;
  }
}

@-o-keyframes astiserkan-scale {
  0% {
  -o-box-shadow: 0px 0px 0px 0px #eee;
  box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
  -o-box-shadow: 0px 0px 10px 5px #eee;
  box-shadow: 0px 0px 10px 5px #eee;
  }

  70% {
  -o-box-shadow: 0px 0px 10px 5px #ea830e;
  box-shadow: 0px 0px 10px 5px #ea830e;
  }

  100% {
  -o-box-shadow: 0px 0px 0px 0px #ea830e;
  box-shadow: 0px 0px 0px 0px #ea830e;
  }
}

@keyframes astiserkan-scale {
  0% {
  box-shadow: 0px 0px 0px 0px #eee;
  }

  35% {
  box-shadow: 0px 0px 10px 5px #eee;
  }

  70% {
  box-shadow: 0px 0px 10px 5px #ea830e;
  }

  100% {
  box-shadow: 0px 0px 0px 0px #ea830e;
  }
}

@-webkit-keyframes astiserkan-prodolent-in {
  from {
  opacity: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  }

  to {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
}

@-moz-keyframes astiserkan-prodolent-in {
  from {
  opacity: 0;
  -moz-transform: translateY(100%);
  transform: translateY(100%);
  }

  to {
  opacity: 1;
  -moz-transform: translateY(0);
  transform: translateY(0);
  }
}

@-ms-keyframes astiserkan-prodolent-in {
  from {
  opacity: 0;
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  }

  to {
  opacity: 1;
  -ms-transform: translateY(0);
  transform: translateY(0);
  }
}

@-o-keyframes astiserkan-prodolent-in {
  from {
  opacity: 0;
  -o-transform: translateY(100%);
  transform: translateY(100%);
  }

  to {
  opacity: 1;
  -o-transform: translateY(0);
  transform: translateY(0);
  }
}

@keyframes astiserkan-prodolent-in {
  from {
  opacity: 0;
  transform: translateY(100%);
  }

  to {
  opacity: 1;
  transform: translateY(0);
  }
}

@-webkit-keyframes astiserkan-prodolent-out {
  from {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }

  to {
  opacity: 0;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  }
}

@-moz-keyframes astiserkan-prodolent-out {
  from {
  opacity: 1;
  -moz-transform: translateY(0);
  transform: translateY(0);
  }

  to {
  opacity: 0;
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
  }
}

@-ms-keyframes astiserkan-prodolent-out {
  from {
  opacity: 1;
  -ms-transform: translateY(0);
  transform: translateY(0);
  }

  to {
  opacity: 0;
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  }
}

@-o-keyframes astiserkan-prodolent-out {
  from {
  opacity: 1;
  -o-transform: translateY(0);
  transform: translateY(0);
  }

  to {
  opacity: 0;
  transform: translateY(-100%);
  transform: translateY(-100%);
  }
}

@keyframes astiserkan-prodolent-out {
  from {
  opacity: 1;
  transform: translateY(0);
  }

  to {
  opacity: 0;
  transform: translateY(-100%);
  }
}

@-webkit-keyframes astiserkan-show {
  from {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  }

  to {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  }
}

@-moz-keyframes astiserkan-show {
  from {
  opacity: 0;
  -moz-transform: scale(0);
  transform: scale(0);
  }

  to {
  opacity: 1;
  -moz-transform: scale(1);
  transform: scale(1);
  }
}

@-ms-keyframes astiserkan-show {
  from {
  opacity: 0;
  -ms-transform: scale(0);
  transform: scale(0);
  }

  to {
  opacity: 1;
  -ms-transform: scale(1);
  transform: scale(1);
  }
}

@-o-keyframes astiserkan-show {
  from {
  opacity: 0;
  -o-transform: scale(0);
  transform: scale(0);
  }

  to {
  opacity: 1;
  -o-transform: scale(1);
  transform: scale(1);
  }
}

@keyframes astiserkan-show {
  from {
  opacity: 0;
  transform: scale(0);
  }

  to {
  opacity: 1;
  transform: scale(1);
  }
}

@-webkit-keyframes astiserkan-hide {
  from {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  }

  to {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  }
}

@-moz-keyframes astiserkan-hide {
  from {
  opacity: 1;
  -moz-transform: scale(1);
  transform: scale(1);
  }

  to {
  opacity: 0;
  -moz-transform: scale(0);
  transform: scale(0);
  }
}

@-ms-keyframes astiserkan-hide {
  from {
  opacity: 1;
  -ms-transform: scale(1);
  transform: scale(1);
  }

  to {
  opacity: 0;
  -ms-transform: scale(0);
  transform: scale(0);
  }
}

@-o-keyframes astiserkan-hide {
  from {
  opacity: 1;
  -o-transform: scale(1);
  transform: scale(1);
  }

  to {
  opacity: 0;
  -o-transform: scale(0);
  transform: scale(0);
  }
}

@keyframes astiserkan-hide {
  from {
  opacity: 1;
  transform: scale(1);
  }

  to {
  opacity: 0;
  transform: scale(0);
  }
}

@media all and (max-width: 300px) {
  body {
  font-size: 14px;
  }
}

@media all and (max-width: 500px) {
  .astiserkan .strelka {
  font-size: 1.5em;
  }

  .astiserkan .prodol div p {
  line-height: 25px;
  }

}

Код

// vars
'use strict'
var astiserkan = document.getElementById("astiserkan"),
  astiserkantochki = Array.prototype.slice.call(document.getElementById("astiserkan-tochki").children),
  astiserkanprodolent = Array.prototype.slice.call(document.getElementById("astiserkan-prodolent").children),
  astiserkanLeftstrelka = document.getElementById("strelka_vlevo"),
  astiserkanRightstrelka = document.getElementById("pravaya_strelka"),
  astiserkanSpeed = 4500,
  currentSlide = 0,
  currentdestvu = 0,
  astiserkanTimer,
  touchStartPos,
  touchEndPos,
  touchPosDiff,
  ignoreTouch = 30;
;

window.onload = function() {

  // astiserkan Script
  function playSlide(slide) {
  for (var k = 0; k < astiserkantochki.length; k++) {
  astiserkanprodolent[k].classList.remove("destvu");
  astiserkanprodolent[k].classList.remove("indestvu");
  astiserkantochki[k].classList.remove("destvu");
  }

  if (slide < 0) {
  slide = currentSlide = astiserkanprodolent.length-1;
  }

  if (slide > astiserkanprodolent.length - 1) {
  slide = currentSlide = 0;
  }

  if (currentdestvu != currentSlide) {
  astiserkanprodolent[currentdestvu].classList.add("indestvu");
  }
  astiserkanprodolent[slide].classList.add("destvu");
  astiserkantochki[slide].classList.add("destvu");

  currentdestvu = currentSlide;

  clearTimeout(astiserkanTimer);
  astiserkanTimer = setTimeout(function() {
  playSlide(currentSlide += 1);
  }, astiserkanSpeed)
  }

  astiserkanLeftstrelka.addEventListener("click", function() {
  playSlide(currentSlide -= 1);
  })

  astiserkanRightstrelka.addEventListener("click", function() {
  playSlide(currentSlide += 1);
  })

  for (var l = 0; l < astiserkantochki.length; l++) {
  astiserkantochki[l].addEventListener("click", function() {
  playSlide(currentSlide = astiserkantochki.indexOf(this));
  })
  }

  playSlide(currentSlide);

  // keyboard shortcuts
  document.addEventListener("keyup", function(e) {
  switch (e.keyCode) {
  case 37:
  astiserkanLeftstrelka.click();
  break;

  case 39:
  astiserkanRightstrelka.click();
  break;

  case 39:
  astiserkanRightstrelka.click();
  break;

  default:
  break;
  }
  })

  astiserkan.addEventListener("touchstart", function(e) {
  touchStartPos = e.changedTouches[0].clientX;
  })

  astiserkan.addEventListener("touchend", function(e) {
  touchEndPos = e.changedTouches[0].clientX;

  touchPosDiff = touchStartPos - touchEndPos;

  console.log(touchPosDiff);
  console.log(touchStartPos);
  console.log(touchEndPos);


  if (touchPosDiff > 0 + ignoreTouch) {
  astiserkanLeftstrelka.click();
  } else if (touchPosDiff < 0 - ignoreTouch) {
  astiserkanRightstrelka.click();
  } else {
  return;
  }

  })
}

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

Демонстрация

Можно посмотреть видео по работе данного слайда с отзывами:

На этом все!

07 Июня 2023 Загрузок: 2 Просмотров: 1080 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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