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

Стильный слайдер контента через плагин slideJS на jQuery для uCoz
23.06.14, 14:54:05

Скачать файл




Отличный стильный слайдер любого вашего контента. Отлично подойдёт для большинства сайтов

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

Установка:

После /head на нужных страницах вставляйте:
Код
<script src="/js/slides.min.jquery.js"></script>
<script>
$(function(){  
// Set starting slide to 1  
var startSlide = 1;  
// Get slide number if it exists  
if (window.location.hash) {  
startSlide = window.location.hash.replace('#','');  
}  
// Initialize Slides  
$('#slides').slides({  
preload: true,  
preloadImage: '/images/loading.gif',  
generatePagination: true,  
play: 5000,  
pause: 2500,  
hoverPause: true,  
// Get the starting slide  
start: startSlide,  
animationComplete: function(current){  
// Set the slide number as a hash  
window.location.hash = '#' + current;  
}  
});  
});  
</script>
<link rel="stylesheet" href="/css/global.css">


Следующий код в то место, где будет сам слайдер:
Код
<center>  
  <div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<h1>Первый слайд</h1>

Текст первого слайда

<a href="#4" class="link">Перейти в слайд 2</a>
</div>

<div class="slide">
<h1>Второй слайд</h1>

Текст второго слайда

<a href="#1" class="link">Перейти в первый слайд</a>
</div>
</div>
<a href="#" class="prev"><img src="/images/arrow-prev.png" width="24" height="43"></a>
<a href="#" class="next"><img src="/images/arrow-next.png" width="24" height="43"></a>
</div>
<img src="/images/example-frame.png" width="739" height="341" id="frame">
</div>
  </center>


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

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

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