» »

Слайдер изображений на jQuery для сайта

Слайдер изображений на jQuery для сайта

Отличный слайдер как по функциям и по дизайн, который создан на плагине Orbit плюс jQuery, что подойдет на любой сайт по тематике. Вы его можете поставить как на светлый или темный шаблон. Сами кнопки переключатели будут находиться в утри, что не зависит какой цвет показывать будет, так как они сделаны так, что при любой картинке видны. Но по умолчанию идет автоматический процесс показа. Безусловно есть задержка времени, что будет визуально ее видно в правом верхнем углу.

Так как самому возможно выставить скорость, что вы можете сделать. Что по самим картинкам в слайдере, то можно ставить сколько вам нужно. Это не галерея, что десятки выставлять, но 5 - 7 само то для актуальных тем, чтоб можно было перейти через него на сам материал. Это также можно посмотреть визуально, только уже в левом верхнем углу, что изначально сколько материала будет залито на слайдер. Сам он простой и понятный, как по своей работе, так и по установке.

Приступаем к установке:

В архиве будет 3 папки, это js, css и images, что нужно залить их файловый менеджер.

Второе, это нужно найти страницу, где он будет стоять и поставить скрипт в /head, что в самом начале идет.

Код
<link rel="stylesheet" href="/css/orbit.css">  
<script type="text/javascript" src="/js/jquery.orbit.min.js"></script>  
<script type="text/javascript">  
$(window).load(function() {  
$('#featured').orbit({  
'bullets': true,  
'timer' : true,  
'animation' : 'horizontal-slide'  
});  
});  
</script>


Потом остается установить сам слайдер, где вы хотите его видеть.

Код
<div id="featured">  
<img src="Ссылка к изображению" alt="Link" />  
<a href="Ссылки перехода" target="_blank"><img src="Ссылка к изображению" alt="Краткое описание" rel="ezioCaption" /></a>  
<img src="Ссылка к изображению" alt="Краткое описание" />  
<img src="Ссылка к изображению" alt="Краткое описание" rel="marcusCaption" />  
</div>

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

Источник: imapo.ru
29.07.2017 Загрузок: 4 Просмотров: 378 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Critic©
Critic© 06.08.2017 19:361
0
А этот слайдер адаптивный, просто неплохо для такого типа смотрится.
Kosten
Kosten 06.08.2017 20:272
0
Это старый слайдер и в то время не кто адаптивность не делал, просто она не нужна была. Но можно ему просто задать в медео стилях, где он просто на узких или на мобильных экранах исчезать автоматически будет.
avatar