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

Необычный слайдер изображений на jQuery 1.5.2
23.06.14, 14:55:23

Скачать файл




Нестандартный слайдер, который больше подойдёт для странички-портфолио. Пользователи системы uCoz не смогут его использовать из-за конфликта разных версий jQuery

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

Установка:

После /head на нужных страницах вставляйте:
Код
<script type="text/javascript" src="/js/jquery.min.js"></script>  
  <link rel="stylesheet" type="text/css" href="/css/style.css" />


Следующий код в то место, где будет сам слайдер:
Код
<div class="rm_wrapper">
<div id="rm_container" class="rm_container">
<ul>
<li data-images="rm_container_1" data-rotation="-15"><img src="Ссылка на картинку"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="Ссылка на картинку"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="Ссылка на картинку"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="Ссылка на картинку"/></li>
</ul>
<div id="rm_mask_left" class="rm_mask_left"></div>
<div id="rm_mask_right" class="rm_mask_right"></div>
<div id="rm_corner_left" class="rm_corner_left"></div>
<div id="rm_corner_right" class="rm_corner_right"></div>
<h2>Fashion Explosion 2012</h2>
<div style="display:none;">
<div id="rm_container_1">
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
</div>
<div id="rm_container_2">
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
</div>
<div id="rm_container_3">
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
</div>
<div id="rm_container_4">
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
<img src="Ссылка на картинку"/>
</div>
</div>
</div>
<div class="rm_nav">
<a id="rm_next" href="#" class="rm_next"></a>
<a id="rm_prev" href="#" class="rm_prev"></a>
</div>
<div class="rm_controls">
<a id="rm_play" href="#" class="rm_play">Play</a>
<a id="rm_pause" href="#" class="rm_pause">Pause</a>
</div>
</div>


Следующий код сразу после предыдущего:
Код
<script type="text/javascript" src="/js/jquery.transform-0.9.3.min_.js"></script>
  <script type="text/javascript" src="/js/jquery.mousewheel.js"></script>
  <script type="text/javascript" src="/js/jquery.RotateImageMenu.js"></script>


Теперь залейте четыре скрипта из архива в папку js, стиль в папку css и все картинки в папку images

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