Универсальный слайдер на jQuery - Дизайн та розробка сайту

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

Если Вас заинтересовал данный скрипт, то давайте посмотрим как его установить.

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

<ul id="carousel" class="elastislide-list">
	<li><img src="images/large/1.jpg" alt="image01" /></li>
	<li><img src="images/large/2.jpg" alt="image02" /></li>
	<li><img src="images/large/3.jpg" alt="image03" /></li>
	<li><img src="images/large/4.jpg" alt="image04" /></li>
	<li><img src="images/large/5.jpg" alt="image05" /></li>
	<li><img src="images/large/6.jpg" alt="image06" /></li>
	<li><img src="images/large/7.jpg" alt="image07" /></li>
	<li><img src="images/large/8.jpg" alt="image08" /></li>
	<li><img src="images/large/9.jpg" alt="image09" /></li>
	<li><img src="images/large/10.jpg" alt="image10" /></li>
</ul>

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Теперь нужно подключить файлы со скриптами слайдера. Данные файлы находятся в архиве, который можете скачать, по ссылке в начале статьи. при подключении указывайте правильно путь. У меня они лежат в папке js.

<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>

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

		<script type="text/javascript">$( '#carousel' ).elastislide({
		orientation : 'horizontal',
		speed : 1000,
		minItems : 1,
		autoplay : true
		});</script>

Давайте разберем все настройки:

orientation : - вид слайдера горизонтальный или вертикальный нужно прописывать - horizontal или vertical
speed : - скорость анимации при перелистывании в миллисекундах. Сейчас 1000 - это одна секунда.
minItems : - минимальное количество слайдов при уменьшении всего слайдера. Сейчас 1, если поставить, например 5, то при сужении если ширина меньше ширины 5 слайдов, то они будут сжиматься до нужной ширины.
autoplay : - автопрокрутка слайдера. Устанавливаются значения true и false. Сейчас true - автопрокрутка включена.

Последний шаг - задать корректный внешний вид с помощью CSS, для этого в файл стилей добавляйте такой код:

.elastislide-list {
	list-style-type: none;
	display: none;
}

.no-js .elastislide-list {
	display: block;
}

.elastislide-carousel ul li {
height: 174px;
width: 174px;
}
.elastislide-wrapper {
	position: relative;
	background-color: #f1f1f1;
	margin: 0 auto;
	min-height: 60px;
}

.elastislide-wrapper.elastislide-loading {
	background-image: url(images/loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

.elastislide-horizontal {
	padding: 10px 40px;
	width:70%;
	margin:0 auto;
	
}

.elastislide-vertical {
	padding: 40px 10px;
}

.elastislide-carousel {
	overflow: hidden;
	position: relative;
}

.elastislide-carousel ul {
	position: relative;
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
}

.elastislide-horizontal ul {
	white-space: nowrap;
}

.elastislide-carousel ul li {
	margin: 0;
	-webkit-backface-visibility: hidden;
}

.elastislide-horizontal ul li {
	height: 100%;
	display: inline-block;
	height: 174px;
	width: 174px;
	margin:0 5px;
}

.elastislide-vertical ul li {
	height: 174px;
	width: 174px;
	display: block;
	float:left;
	margin:0 5px;
}

/* Настройка навигации */

.elastislide-wrapper nav span {
	position: absolute;
	background: #999 url(images/nav.png) no-repeat 4px 3px;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	text-indent: -9000px;
	cursor: pointer;
	opacity: 0.8;
}

.elastislide-wrapper nav span:hover {
	opacity: 1.0
}

.elastislide-horizontal nav span {
	top: 50%;
	left: 10px;
	margin-top: -11px;
}

.elastislide-vertical nav span {
	top: 10px;
	left: 50%;
	margin-left: -11px;
	background-position: -17px 5px;
}

.elastislide-horizontal nav span.elastislide-next {
	right: 10px;
	left: auto;
	background-position: 4px -17px;
}

.elastislide-vertical nav span.elastislide-next {
	bottom: 10px;
	top: auto;
	background-position: -17px -18px;
}

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

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

На этом все, спасибо за внимание. 🙂