Скрипт замечательной карусели изображений, отлично подойдёт для любого сайта:
Установка:
1. Открываем:
Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), вставляем код в самый вверх:
Код
div.slideshow {display: block; margin: 0px 0px 20px 0px; padding: 0px 0px 0px 0px; height: 329px;}
ul.carousel {display: block; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style: none; width: 513px; height: 329px; float: left;}
ul.carousel li {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 513px; height: 329px;}
ul.carousel li a {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-decoration: none;}
ul.carousel li a img {border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: solid 0.6em rgb(113,91,99); width: 100%; height: 100%;}
.roundabout-holder {}
.roundabout-moveable-item {cursor: pointer; background: none;}
.roundabout-in-focus {cursor: auto;}
.prev {display: block; margin: 150px 157px 0px 60px; padding: 0px 0px 0px 0px; text-decoration: none; width: 23px; height: 46px; background: url("http://fotki.ucoz.ua/file_forum/carousel/button-prev.png") no-repeat left top; float: left;}
.next {display: block; margin: 150px 0px 0px 163px; padding: 0px 0px 0px 0px; text-decoration: none; width: 23px; height: 46px; background: url("http://fotki.ucoz.ua/file_forum/carousel/button-next.png") no-repeat left top; float: left;}
2. Эту часть кода вставляем в место, где должна быть наша карусель:
Цитата
<script src="http://fotki.ucoz.ua/file_forum/carousel/carousel.js"></script>
<script>
$(document).ready(function() {
$('ul.carousel').roundabout({
btnPrev: ".next",
btnNext: ".prev",
minScale: 0.4,
maxScale: 1.0,
minOpacity: 1.0,
maxOpacity: 1.0,
tilt: 0.0
});
});
</script>
<div class="slideshow">
<a href="#" class="prev"></a>
<ul class="carousel">
<li>
<a href="##up"><img src="Адрес картинки 1" alt=""></a>
</li>
<li>
<a href="##up"><img src="Адрес картинки 2" alt=""></a>
</li>
<li>
<a href="##up"><img src="Адрес картинки 3" alt=""></a>
</li>
<li>
<a href="##up"><img src="Адрес картинки 4" alt=""></a>
</li>
</ul>
<a href="#" class="next"></a>
<div style="clear: both;"></div>
</div>
Вместо надписей Адрес картинки 1, 2, 3, 4 прописываем адреса своих изображений.
Количество изображений можно увелличивать, для этого перед </ul> прописать код?
Цитата
<li>
<a href="##up"><img src="Адрес новой картинки" alt=""></a>
</li>