» »

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

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

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

Включая подробное описание и все что нужно, и здесь идут реальные отзывы, что движение осуществляется автоматически и также в ручном режиме. Надеемся, что эти три шаблона помогут вам в этой задаче. Его можно поставить на адаптивный портал, где автоматически будет подстраиваться под разные размеры большого монитора или самого малого экрана. Здесь к этому слайду закреплены шрифтовые значки 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;
}

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

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

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

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

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

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

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

Также его вижу виде новостного блока, который гоняет актуальную информацию, но здесь нужно каждый раз обновлять и ставить ссылку на основную новость.
waak
waak 2019-02-23 22:487
0
Не бери в голову! тут просто нужно немного понимать суть работы слайдера так как для картинки используется список отдельно от основного вида там где текст то придётся создать 2 информера с одинаковыми параметрами но в одном выводить текст и ник автора а в другом аватарку что бы сделать такой вид как на скриншоте или полностью переписать структуру так что бы можно было использовать один информер
Kosten
Kosten 2019-02-24 00:298
0
Да старался найти, но есть такой вид и по функциям аналогичен, только немного по дизайн по другому исполнено, скрины впереди выводит, а остальной все по аналогу.
avatar
Qwazor 2019-02-24 08:489
0
А этот для комментариев не годится?
waak
waak 2019-02-24 12:3510
0
Можно использовать но нужно создать 2 информера я же написал выше
avatar
Qwazor 2019-02-24 21:0811
0
а поточнее? почему 2 ?
waak
waak 2019-02-24 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>
avatar
Qwazor 2019-02-25 10:3813
0
Как из этой кучи выделить, только то что нужно? Потому как если ставить эту ссылку капец весь сайт летит.

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