ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер отзывов клиентов сайта на CSS

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

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

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

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

При проверке на работоспособность, что сами посмотрите, так выглядит в реальности.

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

HTML

Код

<div class="container">
<div class='row'>
  <div class='col-md-offset-2 col-md-8'>
<div class="carousel slide" data-ride="carousel" id="gamucto-necagus">

<ol class="carousel-indicators">
  <li data-target="#gamucto-necagus" data-slide-to="0" class="active"></li>
<li data-target="#gamucto-necagus" data-slide-to="1"></li>
<li data-target="#gamucto-necagus" data-slide-to="2"></li></ol>

<div class="carousel-inner">
<div class="item active">
<blockquote>
  <div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="http://www.menucool.com/slider/prod/image-slider-1.jpg"></div>
<div class="col-sm-9">
<p>Пишем реальные отзывы на материал или продукт
</p> <small>Ник или простые слова</small>
</div>
</div>
</blockquote>
</div>

  <div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="http://www.menucool.com/slider/prod/image-slider-2.jpg"></div>
<div class="col-sm-9">
<p>Можно написать различный отзыв
</p>
<small>Подпись автора</small>
</div>
</div>
</blockquote>
</div>
  
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="http://www.menucool.com/slider/prod/image-slider-3.jpg"></div>
<div class="col-sm-9">
<p>Здесь пишем описание под материал.
</p>
<small>ZorNet - портал для вебмастера 3</small>
</div>
</div>
</blockquote>
</div>
</div>

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

CSS

Код

#gamucto-necagus {
  padding: 0 10px 30px 10px;
  margin-top: 30px 0px 0px;
}

#gamucto-necagus .carousel-control {
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}

#gamucto-necagus .carousel-control.left {
  left: -12px;
}

#gamucto-necagus .carousel-control.right {
  right: -12px !important;
}

#gamucto-necagus .carousel-indicators {
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}

#gamucto-necagus .carousel-indicators li {
  background: #d0cbcb;
}
#gamucto-necagus .carousel-indicators .active {
  background: #312f2f;
}
#gamucto-necagus img {
  width: 100px;
  height: 100px;
  border: 4px solid #e8dede;
  box-shadow: 0px 0px 1px 1px #656161;
}

.item blockquote {
  border-left: none;
  margin: 0;
}

.item blockquote img {
  margin-bottom: 10px;
}

.item blockquote p:before {
  content: "\f10d";
  font-family: 'Fontawesome';
  float: left;
  margin-right: 10px;
}

@media (min-width: 768px) {
  #gamucto-necagus
  {
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;
  }

}

@media (max-width: 768px) {

  #gamucto-necagus .carousel-indicators {
  bottom: -20px !important;
  }
  #gamucto-necagus .carousel-indicators li {
  display: inline-block;
  margin: 0px 5px;
  width: 15px;
  height: 15px;
  }
  #gamucto-necagus .carousel-indicators li.active {
  margin: 0px 5px;
  width: 20px;
  height: 20px;
  }
}

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

Код

Также на этой страницы прописываем основные стили под формат карусели.

Код

Это все можно найдете на странице demo, но так понятнее для установки такого формате, где размещаются как информация, так и отзывы на тот или иной продукт.

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

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

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

27 Января 2019 Загрузок: 13 Просмотров: 6406 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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