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

Простой слайдер с эффектом вертикального перелистывания на jQuery
23.06.14, 09:27:00

Скачать файл




Очень простой слайдер с эффектом перелистывания изображений. Вы можете перелистывать изображения как нажатием кнопок "вперёд" и "назад", так и колёсиком мышки. К тому же данный слайдер автоматически перелистывает изображения с указанным периодом

Для начала посмотрите ДЕМО (Первый слайдер)

Установка:

После /head на страницах, где будет расположен данный слайдер, вставляйте:
Код
<script type="text/javascript" src="/js/jquery.mousewheel.js"></script>  
  <script type="text/javascript" src="/js/jquery.ulslide.js"></script>  
<style type="text/css">  
#slide2-pager {  
clear:both;  
list-style-type:none;  
overflow:hidden;  
margin:0;  
padding:0;  
}  
#slide2-pager li {  
float: left;  
}  
#slide2-pager li a{  
margin:0 2px;  
padding:0 7px;  
border:1px solid #ccc;  
display:inline-block;  
}  
#slide2-pager li a.usl-current{  
text-decoration: underline;  
background-color: #777;  
}  
</style>


Далее в то место, где будет сам слайдер, вставляйте:
Код
<a href="#" id="slide1_prev">« prev</a> | <a href="#" id="slide1_next">next »</a>  
<ul id="slide1">
<li>
<img src="Ссылка на картинку" alt="" />
</li>
<li>
<img src="Ссылка на картинку" alt="" />
</li>
<li>
<img src="Ссылка на картинку" alt="" />
</li>
<li>
<img src="Ссылка на картинку" alt="" />
</li>
<li>
<img src="Ссылка на картинку" alt="" />
</li>
</ul>

<script type="text/javascript">
$(function() {  
$('#slide1').ulslide({  
statusbar: true,  
width: 443,  
height: 300,  
bnext: '#slide1_next',  
bprev: '#slide1_prev',  
axis: 'y',  
mousewheel: true,  
duration: 500,  
autoslide: 3000  
});  
});  
</script>


Осталось лишь залить два скрипта из прикреплённого архива в папку js

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