X
Заказать услугу

Универсальный слайдер на jQuery

Плагины и Шаблоны для Wordpress
  • 2020-11-24
  • 4068 просмотр

    3 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

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

Универсальный слайдер на jQuery

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



Пример




Скачать

Плагины и Шаблоны для WordPress


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

Первым делом нужно добавить 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>

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

  1. orientation : - вид слайдера горизонтальный или вертикальный нужно прописывать - horizontal или vertical
  2. speed : - скорость анимации при перелистывании в миллисекундах. Сейчас 1000 - это одна секунда.
  3. minItems : - минимальное количество слайдов при уменьшении всего слайдера. Сейчас 1, если поставить, например 5, то при сужении если ширина меньше ширины 5 слайдов, то они будут сжиматься до нужной ширины.
  4. 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 с помощью этого слайдера, а здесь все. Кому была полезна информация пишите комментарии и оценивайте материал.

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

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 11, в среднем: 5 из 5
Читайте также
Опубликовано 3 комментария

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.