Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Самый простой слайдер контента на jQuery

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

Самый простой слайдер контента на jQuery
Содержание статьи

Зачем нужен упрощенный слайдер контента?

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

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

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

Разметка и стили слайдера контента

Итак, давайте перейдем непосредственно к самому скрипту слайдера с использованием jQuery.

Прежде всего нужно прописать некоторые стили для нашего слайдера:

.alexboyko-content-slider {
	list-style: none;
	margin: 0;
	padding: 0;
}
.alexboyko-content-slider li {
	margin: 0;
	padding: 0;
	display: none;
}
.alexboyko-content-slider li:first-child {
	display: block;
}

Как вы уже догадались, слайдер представлен в виде обычного ненумерованного списка и имеет класс alexboyko-content-slider.

Сама разметка на странице будет выглядеть очень просто:

  • Текст первого слайда
  • Текст второго слайда
  • Текст третьего слайда

В контейнер li вы можете поместить что угодно - текст, изображение, таблицу, видеоролик с YouTube и т.д. Иными словами произвольный html код. Как видите, первый элемент мы делаем видимым по умолчанию, в отличие от остальных, которые прячем. Для этого мы используем всем хорошо известный псевдокласс :first-child
Также мы добавили идентификатор "acs-01" (acs - от Alex Boyko slider) к нашему списку. Это нужно на тот случай, если на странице будет несколько подобных слайдеров. Теперь их может быть сколько угодно.

Скрипт слайдера контента

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

$(document).ready(function() {
	if($("#acs-01 li").length > 1) {
		setInterval("alexboykoContentSlider('acs-01')", 10000);
	}
});

function alexboykoContentSlider(id) {
	var c = $("#" + id + " li.current").index();
	var n = $("#" + id + " li").length;
	if(c < n-1) {
		$("#" + id + " li").removeClass('current').fadeOut(100);
		$("#" + id + " li:eq(" + ((c + 1) / 1) + ")").addClass('current').hide().delay(100).fadeIn(200);
	}
	else {
		$("#" + id + " li").removeClass('current').fadeOut(100);
		$("#" + id + " li:eq(0)").addClass('current').hide().delay(100).fadeIn(200);
	}
}

Функцию мы определяем до полной загрузки DOM, поэтому она находится вне $(document).ready(), а после того, как функция определена, ждем загрузки DOM и запускаем ее с неообходимым нам интервалом при помощи старого доброго setInterval.

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

А вот и пример работы скрипта:

открыть в новой вкладке

Также не забудьте подключить jQuery библиотеку перед скриптом слайдера и пользуйтесь на здоровье! 🙂

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


Предыдущая статья:
Проверка email адреса на валидность на PHP

Читайте также:
Параллакс эффект. Простой пример параллакс слайдера


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»