Основной код для слайдера изображений

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

Шаг 1: HTML

Сначала добавьте необходимую минимальную разметку:

<div class="slides">
	<ul>
		<li><img src="http://example.com/img/slide-01.jpg" alt=""></li>
		<li><img src="http://example.com/img/slide-02.jpg" alt=""></li>
		<li><img src="http://example.com/img/slide-03.jpg" alt=""></li>
	</ul>
	<a href="#" class="slide-next">></a> 
	<a href="#" class="slide-prev"><</a>
</div>

Обратите внимание, что разметка максимально упрощена. Только одно имя класса, о котором нужно беспокоиться, и только один внешний <div>. Главное, чтобы все получилось, — убедиться, что изображения существуют, и что пути, указанные для элементов <img>, верны.

Шаг 2: CSS

Далее приведем основные CSS, необходимые для стилизации разметки и придания ей вида настоящего слайдера. Включите на страницу следующее:

<style>
.slides, .slides ul, .slides li { position: relative; overflow: hidden; width: 580px; height: 380px; margin: 0; padding: 0; }
.slides { margin: 0 auto; }
.slides ul li { float: left; list-style: none; }
a.slide-prev, a.slide-next { 
	position: absolute; top: 50%; z-index: 999; display: block; width: 24px; height: 24px; margin-top: -12px; cursor: pointer; opacity: 0.3;
	color: #fff; background: #000; text-decoration: none; text-align: center; font: bold 16px/24px Impact, sans-serif; border-radius: 24px;
	}
	a.slide-prev:hover, a.slide-next:hover { opacity: 0.7; -webkit-transition: all 0.3s ease; }
	a.slide-next { right: 0; }
</style>

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

Обратите внимание, что слайдер имеет размеры 580px (ширина) на 380px (высота). Убедитесь, что ваши изображения имеют соответствующий размер, или измените CSS в соответствии с вашими изображениями.

Шаг 3: jQuery

Наконец, нам нужен следующий сниппет jQuery, чтобы сделать волшебство:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
	var interval;
	
	$('.slides').hover(function() {
		if (interval) clearInterval(interval);
		clearInterval(interval);
		interval = null;
	}, function() {
		interval = setInterval(function() { slideRight(); }, 2000);	
	});
	var slideCount  = $('.slides ul li').length;
	var slideWidth  = $('.slides ul li').width();
	var slideHeight = $('.slides ul li').height();
	var sliderWidth = slideCount * slideWidth;
	
	$('.slides').css({ width: slideWidth, height: slideHeight });
	$('.slides ul').css({ width: sliderWidth, marginLeft: - slideWidth });
	$('.slides ul li:last-child').prependTo('.slides ul');
	
	function slideLeft() {
		$('.slides ul').animate({ left: + slideWidth }, 200, function() {
			$('.slides ul li:last-child').prependTo('.slides ul');
			$('.slides ul').css('left', '');
		});
	};
	function slideRight() {
		$('.slides ul').animate({ left: - slideWidth }, 200, function() {
			$('.slides ul li:first-child').appendTo('.slides ul');
			$('.slides ul').css('left', '');
		});
	};
	$('a.slide-prev').click(function(e) {
		e.preventDefault(); slideLeft();
	});
	$('a.slide-next').click(function(e) {
		e.preventDefault(); slideRight();
	});
});
</script>

Здесь можно настроить различные параметры, например, интервал 2000 и скорость 200 каждого слайда. Опять же, вся идея здесь заключается в том, чтобы оставить все как можно более простым, чтобы дать коллегам-самоучкам надежную отправную точку для реализации их собственного слайдера изображений. Обратите внимание, что мы включаем последнюю версию jQuery через Google API Hosted Libraries.

Вот и все. Вставьте каждый из этих фрагментов кода в HTML-файл и наслаждайтесь супер-минимальной отправной точкой для создания собственного слайдера для изображений и/или другого контента.