Красивый слайдер изображении для ucoz

14417 просмотров Alan_Writer 19.05.2013

Скачать 📥 Демо ▶️

Красивый слайдер изображении для ucoz. Простой и без лишних наворотов слайдер, подойдет для сериалов или для галереи, также вы можете переделать его под себя: изменить дизайн и размеры.

Установка

1. Скачайте архив. Создайте в корне файлового менеджера папку sliderb, и в нее залейте все содержимое архива.

2. Теперь нужно прописать пути к файлам скрипта, стилей и вставить код вызова плагина. Все это прописываем перед </body>:
Код
<script type="text/javascript" src="/sliderb/sliderb.js"></script>
<link type="text/css" rel="StyleSheet" href="/sliderb/sliderb.css"/>

3. По месту ставим сам блок со слайдами указав в нем ссылки на страницы и изображения:
Код
<div class="infiniteCarousel">  
<div class="wrapper">  
<ul>  
<li><a href="url страницы 1" title=""><img src="ссылка на картинку 1"></a></li>
<li><a href="url страницы 2" title=""><img src="ссылка на картинку 2"></a></li>
<li><a href="url страницы 3" title=""><img src="ссылка на картинку 3"></a></li>
<li><a href="url страницы 4" title=""><img src="ссылка на картинку 4"></a></li>
<li><a href="url страницы 5" title=""><img src="ссылка на картинку 5"></a></li>
</ul>
</div>  
</div>


Теги: красивый, Слайдер, Карусель, для uCoz, изображения, Горизонтальный
8 Комментариев
avatar
7
изменила код до нужных размеров, но выводит по 3 картинки в странном порядке) подскажите, что не так).
Где настроить количество отображаемых картинок?
avatar
6
Здравствуйте, все работает! А можно ли изменить его так что бы выводилась одна картинка размером примерно 750 на 500 и осуществлялись переходы на другие картинки с таким же размером? Очень нужен слайдер, но такой, что бы содержание всех картинок можно было просмотреть в большом размере. Подскажите, пожалуйста ,как реализовать.
avatar
8
.infiniteCarousel {width:850px;}
.infiniteCarousel .wrapper {width:750px;height:500px;}
.infiniteCarousel ul li {width:730px;height:480px;}
.infiniteCarousel ul li a img {width:720px;height:470px;}

И в скрипте заменить значение 140, на 750
avatar
5
Здравствуйте! Все работает, огромное спасибо! Подскажите, как увеличить слайды?
avatar
3
А как сделать так, чтобы вместо ссылок на нужные картинки был информер? Сколько не пробовал - либо слайдер перестает работать, либо показывает только первую картинку в списке, размноженную до бесконечности.
avatar
4
Не понял. То есть выводить картинки с помощью информера, а не вручную?
avatar
1
Как его на сайт поставить?
avatar
2
Материал обновил, теперь все должно быть понятно.