06:58
Нестандартный слайдер, который больше подойдёт для странички-портфолио. Пользователи системы uCoz не смогут его использовать из-за конфликта разных версий jQuery
Для начала посмотрите ДЕМО
Установка:
После /head на нужных страницах вставляйте:
Code
<script type="text/javascript" src="/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Следующий код в то место, где будет сам слайдер:
Code
<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>
Следующий код сразу после предыдущего:
Code
<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
