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

demosourse

Адаптивный слайдер, созданный при помощи CSS и jQuery.

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

В данном примере мы создадим адаптивный слайдер, где можно будет отобразить множество отзывов ваших клиентов. В нашем арсенале понадобится 2 плагина: FlexSlider для карусели и Masonry layout для сетки.

Структура

Весь слайдер поместим в элемент .cd-testimonials-wrapper. Сам элемент будет представлен в виде ненумерованного списка.

<div class="cd-testimonials-wrapper cd-container">
	<ul class="cd-testimonials">
		<li>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			<div class="cd-author">
				<img src="img/avatar-1.jpg" alt="Author image">
				<ul class="cd-author-info">
					<li>MyName</li>
					<li>CEO, AmberCreative</li>
				</ul>
			</div>
		</li>

		<li><!-- ... --></li>

		<li><!-- ... --></li>
	</ul> <!-- cd-testimonials -->

	<a href="#0" class="cd-see-all">See all</a>
</div> <!-- cd-testimonials-wrapper -->

В элемент .cd-testimonials-all поместим всех клиентов.

<div class="cd-testimonials-all">
	<div class="cd-testimonials-all-wrapper">
		<ul>
			<li class="cd-testimonials-item">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit totam saepe iste maiores neque animi molestias nihil illum nisi temporibus.</p>

				<div class="cd-author">
					<img src="img/avatar-1.jpg" alt="Author image">
					<ul class="cd-author-info">
						<li>MyName</li>
						<li>CEO, CompanyName</li>
					</ul>
				</div> <!-- cd-author -->
			</li>

			<li class="cd-testimonials-item"><!-- ... --></li>
		</ul>
	</div>	<!-- cd-testimonials-all-wrapper -->

	<a href="#0" class="close-btn">Close</a>
</div> <!-- cd-testimonials-all -->

Стили

В CSS ничего сверхъестественного, разве что создание иконок. 2 стрелки для направления слайдов созданы с помощью псевдо элементов (::before и ::after):

.flex-direction-nav li {
  position: absolute;
  height: 100%;
  width: 40px;
  top: 0;
}

.flex-direction-nav li:first-child {
  left: 0;
}

.flex-direction-nav li:last-child {
  right: 0;
}

.flex-direction-nav li a {
  display: block;
  height: 100%;
  width: 100%;

  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;

  transition: background-color 0.2s;
}

.flex-direction-nav li a::before, .flex-direction-nav li a::after {
  /* left and right arrows in css only */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 13px;
  background-color: white;
}

.flex-direction-nav li a::before {
  transform: translateY(-35px) rotate(45deg);
}

.flex-direction-nav li a::after {
  transform: translateY(-27px) rotate(-45deg);
}

.flex-direction-nav li:last-child a::before {
  transform: translateY(-35px) rotate(-45deg);
}

.flex-direction-nav li:last-child a::after {
  transform: translateY(-27px) rotate(45deg);
}

.cd-testimonials-all {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: white;
  z-index: 2;

  visibility: hidden;
  opacity: 0;
  transition: opacity .3s 0s, visibility 0s .3s;
}

.cd-testimonials-all.is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s 0s, visibility 0s 0s;
}

Обработка событий

Для создания карусели воспользуемся Flexslider jQuery plugin by Woothemes:

$('.cd-testimonials-wrapper').flexslider({
	selector: ".cd-testimonials > li",
	animation: "slide",
	controlNav: false,
	slideshow: false,
	smoothHeight: true,
	start: function(){
		$('.cd-testimonials').children('li').css({
			'opacity': 1,
			'position': 'relative'
		});
	}
});

Для отображения сетки клиентов воспользуемся библиотекой Masonry:

$('.cd-testimonials-all-wrapper').children('ul').masonry({
	itemSelector: '.cd-testimonials-item'
});

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/client-testimonials-carousel/
Перевел: Станислав Протасевич
Урок создан: 27 Марта 2016
Просмотров: 12266
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^