Почему вам не подходят 90% плагинов каруселей?

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

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

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

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

jQuery плагин чистой и мощной карусели

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

Его можно оформлять как угодно.

И так, вот этот плагин: Owl Carousel.

Демо

Установка плагина

1. Подключаем jQuery, если он еще не подключен, например так

<script src="js/jquery.js"></script>

2. Копируем файлы плагина в папку с сайтом

  • Скачиваем
  • Распаковываем
  • Копируем на сайт папку owl-carousel

3. Подключаем эти файлы к сайту:

Стили

<link rel="stylesheet" href="owl-carousel/owl.carousel.css"/>

Скрипт

<script src="owl-carousel/owl.carousel.min.js"></script>

4. Добавляем на страницу код

<!-- Html код карусели -->
<div id="carousel">
	<div class="carousel-element">1</div>
	<div class="carousel-element">2</div>
	<div class="carousel-element">3</div>
	<div class="carousel-element">4</div>
	<div class="carousel-element">5</div>
	<div class="carousel-element">6</div>
	<div class="carousel-element">7</div>
	<div class="carousel-element">8</div>
	<div class="carousel-element">9</div>
	<div class="carousel-element">10</div>
	<div class="carousel-element">11</div>
	<div class="carousel-element">12</div>
	<div class="carousel-element">13</div>
	<div class="carousel-element">14</div>
</div>

5. Запускаем плагин

$(document).ready(function(){
	
	// Находим блок карусели
	var carousel = $("#carousel");

	// Запускаем плагин карусели
	carousel.owlCarousel();
});

6. Оформляем

/* Основной блок */
.owl-wrapper-outer {
	border: 1px solid #777;
	border-radius: 5px;
	overflow: hidden;
	background: white;
}

/* 1 квадратик карусели */
.carousel-element {
	padding: 30px;
	text-align: center;
	font-size: 300%;
	border-right: 1px solid #777;
}

Готово :)

Дальше можно сделать еще всякие штуки.

Кнопки «Назад» и «Вперед»

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

1. Добавляем сами кнопки

<!-- Назад Вперед -->
<p class="center-text"><a href="#" id="js-prev">Назад</a>
<a href="#" id="js-next">Вперед</a></p>

2. Присоединяем кнопки к плагину карусели

После запуска плагина добавляем код

// Назад
// При клике на "Назад"
$('#js-prev').click(function () {

	// Запускаем перемотку влево
	carousel.trigger('owl.prev');

	return false;
});

// Вперед
// При клике на "Вперед"
$('#js-next').click(function () {

	// Запускаем перемотку вправо
	carousel.trigger('owl.next');

	return false;
});

Теперь при клике на «Назад» и «Вперед» будет срабатывать перемотка.

Маркеры

Это такие точки, которые показывают, где мы сейчас находимся.

Их можно включить при запуске плагина, добавив следующий параметр

// Запускаем плагин карусели
carousel.owlCarousel({
	// Точки под каруселью
	pagination: true
});

И дальше просто их оформляем

/* Блок с точками */
.owl-pagination {
	text-align: center; /* Выравниваем точки по-середине */
}
/* 1 Точка */
.owl-page {
	width: 10px;
	height: 10px;
	border: 1px solid #777;
	display: inline-block;
	background: white;
	margin: 10px;
	border-radius: 5px;
}
/* Активная точка */
.owl-page.active {
	background: #777;
}

Чтобы показывался только 1 блок

Это довольно часто нужно, для этого добавляем следующий параметр

// Запускаем плагин карусели
carousel.owlCarousel({
	singleItem: true, // Показывать только 1 блок на всю ширину
});

Разное количество блоков на разных устройствах

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

// Запускаем плагин карусели
carousel.owlCarousel({
	// Количество отображающихся блоков 
	// в зависимости от устройства (ширины экрана)
	
	// Количество блоков на больших экранах
	items:             10,
	
	// 5 блоков на компьютерах (экран от 1400px до 901px)
	itemsDesktop:      [1400, 5],
	
	// 3 блока на маленьких компьютерах (экран от 900px до 601px)
	itemsDesktopSmall: [900, 3],
	
	// 2 элемента на планшетах (экран от 600 до 480 пикселей)
	itemsTablet:       [600, 2],
	
	// Настройки для телефона отключены, в этом случае будут
	// использованы настройки планшета
	itemsMobile:       false
});

А что за сюрприз то?

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

Я открываю, смотрю футболка. Разворачиваю. Вот блин, что за тупость. Я вижу на этой футболке 3 своих фотографии. Одеваю футболку и все начинают ржать, получилось тупо и весело.

Хотите уже через 3 недели
начать зарабатывать
на веб-разработке?

Получите мою книгу в подарок. Просто введите свой e-mail в форму ниже и нажмите на оранжевую кнопку.

Вам понравился этот материал? Тогда, пожалуйста:

  1. Поставьте лайк.
  2. Поделитесь этой страницей в социальных сетях.
  3. И, конечно же, оставьте свой комментарий :)
Загрузка комментариев...
Share This
Хотите получать 2000-3000 рублей в час на веб-разработке?

Хотите получать
2000-3000 рублей в час
на веб-разработке?

 

* Делаете много, а зарабатываете мало?

* Надоело каждый день ездить в офис?

* Работа не приносит радость?


Получите книгу «Как зарабатывать 2000-3000 рублей в час на веб-разработке» в подарок.

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

 

Пожалуйста, подтвердите Вашу почту для получения книги