ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Слайдер-карусель отзывов клиентов сайта

Слайдер-карусель отзывов клиентов сайта

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

Включая подробное описание и все что нужно, и здесь идут реальные отзывы, что движение осуществляется автоматически и также в ручном режиме. Надеемся, что эти три шаблона помогут вам в этой задаче. Его можно поставить на адаптивный портал, где автоматически будет подстраиваться под разные размеры большого монитора или самого малого экрана. Здесь к этому слайду закреплены шрифтовые значки Font Awesome.

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

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

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

Установка:

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

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

HTML

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

Код
<div class="container">
  <div class="row">
  <div class="col-md-12">
  <div class="carousel slide" data-ride="carousel" id="quote-carousel">
  <div class="carousel-inner text-center">
  <div class="item active">
  <blockquote>
  <div class="row">
  <div class="col-sm-8 col-sm-offset-2">
  <p>Описание отзыва покупателя №1</p>
  <small>Покупатель</small>
  </div>
  </div>
  </blockquote>
  </div>
  <!-- Quote 2 -->
  <div class="item">
  <blockquote>
  <div class="row">
  <div class="col-sm-8 col-sm-offset-2">
  <p>Описание отзыва покупателя №2</p>
  <small>Уважаемый покупатель</small>
  </div>
  </div>
  </blockquote>
  </div>
  <!-- Quote 3 -->
  <div class="item">
  <blockquote>
  <div class="row">
  <div class="col-sm-8 col-sm-offset-2">
  <p>Описание отзыва покупателя №3</p>
  <small>Довольный покупатель</small>
  </div>
  </div>
  </blockquote>
  </div>
  </div>

  <ol class="carousel-indicators">
  <li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/zornet-1.jpg" alt="">
  </li>
  <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/zornet-2.jpg" alt="">
  </li>
  <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/zornet-3.jpg" alt="">
  </li>
  </ol>

  <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
  <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
  </div>
  </div>
  </div>
  </div>

CSS

Поскольку большая часть стилей реализуется классами Bootstrap, CSS может четко сосредоточиться на индивидуальном дизайне.

Код
#quote-carousel {
  padding: 0 10px 30px 10px;
  margin-top: 60px;
}
#quote-carousel .carousel-control {
  background: none;
  color: #CACACA;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
#quote-carousel .carousel-indicators {
  position: relative;
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-top: 20px;
  margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  opacity: 0.4;
  overflow: hidden;
  transition: all .4s ease-in;
  vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
  width: 128px;
  height: 128px;
  opacity: 1;
  transition: all .2s;
}
.item blockquote {
  border-left: none;
  margin: 0;
}
.item blockquote p:before {
  content: "\f10d";
  font-family: 'Fontawesome';
  float: left;
  margin-right: 10px;
}

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

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

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

Демонстрация
21 Февраля 2019 Загрузок: 11 Просмотров: 3595 Комментариев: (14)

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

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

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

Комментарии: 14
noavatar
Qwazor 23 Февраля 2019 11:471
0
Его возможно использовать для вывода в слайд комментариев? Если да как сделать слайдер комментариев?
waak
waak 23 Февраля 2019 12:522
0
создать информер комментариев и подключить в слайдер
noavatar
Qwazor 23 Февраля 2019 13:033
0
пробовал, что то он все коменты крутит, а надо по 1
Kosten
Kosten 23 Февраля 2019 17:004
0
Так это слайдер карусель, только сделан под комментарий, который больше подойдет под интернет магазин или под услуги, где ставят комментарий, и крутят.
waak
waak 23 Февраля 2019 21:525
0
правильно потому что вы не правильно настроили информер а точнее его шаблон он должен соответствовать коду одного отзыва из кода в данном посте затем в место всех комментов(отзывов) ставите свой код информера
Kosten
Kosten 23 Февраля 2019 22:116
0
Так как этот скрипт нашел на codepen, он был без название, что в сети начал что то похожее искать, и в комментариях, на зарубежных ресурсах написано, что основном устанавливают под услуги, с выбором комментарий, даже можно сказать, что самому с другого профиля можно написать, все для рекламы.

Также его вижу виде новостного блока, который гоняет актуальную информацию, но здесь нужно каждый раз обновлять и ставить ссылку на основную новость.
waak
waak 23 Февраля 2019 22:487
0
Не бери в голову! тут просто нужно немного понимать суть работы слайдера так как для картинки используется список отдельно от основного вида там где текст то придётся создать 2 информера с одинаковыми параметрами но в одном выводить текст и ник автора а в другом аватарку что бы сделать такой вид как на скриншоте или полностью переписать структуру так что бы можно было использовать один информер
Kosten
Kosten 24 Февраля 2019 00:298
0
Да старался найти, но есть такой вид и по функциям аналогичен, только немного по дизайн по другому исполнено, скрины впереди выводит, а остальной все по аналогу.
noavatar
Qwazor 24 Февраля 2019 08:489
0
А этот для комментариев не годится?
waak
waak 24 Февраля 2019 12:3510
0
Можно использовать но нужно создать 2 информера я же написал выше
noavatar
Qwazor 24 Февраля 2019 21:0811
0
а поточнее? почему 2 ?
waak
waak 24 Февраля 2019 23:1712
0
Потому что слайдер состоит из двух видов первый для текста второй с картинкой

по этому в один информер а точнее в его шаблон нужно поставить
Код

  <div class="item <?if($NUMBER$="1")?>active<?endif?>">  
  <blockquote>  
  <div class="row">  
  <div class="col-sm-8 col-sm-offset-2">  
  <p>ТУТ ОПЕРАТОР ТЕКСТА КОММЕНТАРИЯ</p>  
  <small>ТУТ ОПЕРАТОР НИКА</small>  
  </div>  
  </div>  
  </blockquote>  
  </div>  


а во второй
Код

<li data-target="#quote-carousel" data-slide-to="0" <?if($NUMBER$="1")?>class="active"<?endif?>><img class="img-responsive " src="ТУТ ОПЕРАТОР АВАТАРА" alt="">  
  </li>  


Затем там где будет слайдер
Код

<div class="container">  
  <div class="row">  
  <div class="col-md-12">  
  <div class="carousel slide" data-ride="carousel" id="quote-carousel">  
  <div class="carousel-inner text-center">  
  $MYINF_НОМЕР ПЕРВОГО ИНФОРМЕРА$
  </div>  

  <ol class="carousel-indicators">  
  
  $MYINF_НОМЕР ВТОРОГО ИНФОРМЕРА$
  
  </ol>  

  <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>  
  <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>  
  </div>  
  </div>  
  </div>  
  </div>
noavatar
Qwazor 25 Февраля 2019 10:3813
0
Как из этой кучи выделить, только то что нужно? Потому как если ставить эту ссылку капец весь сайт летит.

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
noavatar
SneakyLie 26 Февраля 2019 14:5214
0
Создай тему на форуме и подробно опиши что ты подключаешь
avatar