» »

Слайдер для отзыва клиента на HTML + JS

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

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

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

Так выглядит в реальности, после установки:

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

Установочный процесс:

На страницы, где будут находиться отзывы.

Код
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>

HTML

Код
<div class="vospominan">
  <div class="karusetulava">
  <div>
  <figure class="testimonial">
  <blockquote>Instagram имеет более 1 миллиарда активных пользователей в месяц и является одной из крупнейших социальных сетей. Интерактивный и привлекательный характер приложения делает его еще более интересным для пользователей. Возможно, это причина того, что более 500 миллионов человек ежедневно смотрят «Истории».  
  <div class="btn"></div>
  </blockquote>
  <img src="http://zornet.ru/_fr/83/3246094.jpg" alt="ZorNet.Ru — сайт для вебмастера" />
  <div class="peopl">
  <h3>Нил Патель</h3>
  <p class="indentity">SEO Эксперт</p>
  </div>
  </figure>
  </div>

  <div>
  <figure class="testimonial">
  <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  <div class="btn"></div>
  </blockquote>
  <img src="http://zornet.ru/_fr/83/1334968.jpg" alt="Ключевое слово" />
  <div class="peopl">
  <h3>Shaan</h3>
  <p class="indentity">Веб-разработчик</p>
  </div>
  </figure>
  </div>

  <div>
  <figure class="testimonial">
  <blockquote>Также необходимо проверить их тон, чтобы увидеть, соответствует ли он тону вашего бренда. Вы также должны проверить их уровень вовлеченности, охват, число подписчиков и их аудиторию. Если их аудитория не соответствует вашей целевой аудитории, нет смысла в партнерстве с ними.  
  <div class="btn"></div>
  </blockquote>
  <img src="http://zornet.ru/_fr/83/4982205.jpg" alt="" />
  <div class="peopl">
  <h3>Brian Dean</h3>
  <p class="indentity">SEO блогер</p>
  </div>
  </figure>
  </div>

  <div>
  <figure class="testimonial">
  <blockquote>Как правило, нано-влияющие имеют ограниченный охват, но высокий уровень вовлеченности и очень доступны для брендов. С другой стороны, знаменитости имеют огромный охват, но их уровень вовлеченности довольно низок. Вы также должны иметь гораздо больший бюджет, чтобы сотрудничать с ними.  
  <div class="btn"></div>
  </blockquote>
  <img src="https://design.sva.edu/wp-content/uploads/2018/08/Sagmeister.jpg" alt="Maksim Goffin" />
  <div class="peopl">
  <h3>Стефан Сагмайстер</h3>
  <p class="indentity">Графический дизайнер</p>
  </div>
  </figure>
  </div>
  </div>
</div>

CSS

Код
.vospominan {
  box-sizing: content-box;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.indentity {
  margin: 0!important
}
figure.testimonial {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  padding: 0 20px;
  text-align: left;
  box-shadow: none !important;
}
figure.testimonial * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
figure.testimonial img {
  max-width: 100%;
  vertical-align: middle;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  margin: 40px 0 0 10px;
}
figure.testimonial blockquote {
  background-color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  margin: 0;
  padding: 25px 50px 30px;
  position: relative;
}
figure.testimonial blockquote:before, figure.testimonial blockquote:after {
  content: "\201C";
  position: absolute;
  color: #ff5057;
  font-size: 50px;
  font-style: normal;
}
figure.testimonial blockquote:before {
  top: 25px;
  left: 20px;
}
figure.testimonial blockquote:after {
  content: "\201D";
  right: 20px;
  bottom: 0;
}
figure.testimonial .btn {
  top: 100%;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 25px solid transparent;
  border-top: 25px solid #fff;
  margin: 0;
  position: absolute;
}
figure.testimonial .peopl {
  position: absolute;
  bottom: 45px;
  padding: 0 10px 0 120px;
  margin: 0;
  color: #ffffff;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}
figure.testimonial .peopl h3 {
  opacity: 0.9;
  margin: 0;
}
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}
.slick-track:before, .slick-track:after {
  display: table;
  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-btn.slick-hidden {
  display: none;
}

.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 40%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
  opacity: 1;
}
.slick-prev:before, .slick-next:before {
  font-family: "FontAwesome";
  font-size: 40px;
  line-height: 1;
  opacity: .75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-prev {
  left: -40px;
}
.slick-prev:before {
  content: "";
}
.slick-next {
  right: -40px;
}
.slick-next:before {
  content: "";
}

JS

Код
$(document).ready(function () {
  $('.karusetulava').slick({
  slidesToShow: 2,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 1500,
  responsive: [{
  breakpoint: 850,
  settings: {
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  }
  }]
  });
});

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

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

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

Видно обзор:


В нашем случай создается сайт с нуля, где такая функция будет вам полезна в привлечение большинства, где очень важны отзывы, которые уже приобрели или пользовались предоставленными услугами.
2019-09-07 Просмотров: 277 Комментарий: (0)

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

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

Оставь свой отзыв

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