Слайдер изображений на 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 | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
