Главная » Файлы » Прочие скрипты » jQuery

Качественный слайдер через плагин Countdown Image на jQuery
23.06.14, 11:30:45

Скачать файл




Очень интересный плагин на основе jQuery. Здесь есть красиво оформленная шкала обратного отсчёта до переключения на следующий слайд, красиво всплывающая подсказка и панель навигации

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<style type="text/css">
#featured { width: 565px; height: 290px; background: #009cff url('/images/loading.gif') no-repeat center center; overflow: hidden; }  
</style>
<link rel="stylesheet" href="/css/orbit.css">  
<style type="text/css">  
.timer { display: none !important; }  
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }  
</style>  

<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="Описание картинки" />
<img src="Ссылка на картинку" alt="Описание картинки" />
<img src="Ссылка на картинку" alt="Описание картинки" />
<img src="Ссылка на картинку" alt="Описание картинки" />
</div>


Нам осталось лишь залить скрипт из прикреплённого архива в папку js, стиль в папку css и все картинки в папку images

Материал подготовлен ECCO

Категория: jQuery | Добавил: Apocalypse | Теги: качественный, Через, на, image, плагин, JQuery, Countdown, слайдер
Просмотров: 257 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: