+ +

3D слайдер-карусель через плагин Waterwheel Carousel для uCoz

3D слайдер-карусель через плагин Waterwheel Carousel для uCoz
Цена: БЕСПЛАТНО
Просмотров: 3545
Добавлено: 06.12.2013
Контакты: Автор (VK) (Онлайн)
Файл добавил: Alan_Writer
Архив шаблона: СКАЧАТЬ
Демо: Смотреть
Информация о материале
3D слайдер-карусель через плагин Waterwheel Carousel для uCoz. Уникальный и неповторимый скрипт 3D галереи для uCoz, работающий через плагин Waterwheel Carousel. Знакомый многим пользователям плагин, теперь слайдер на нем доступен и на uCoz. Карусель отлично подойдет как для фотоальбома, так и для новостей например.

Здесь представлена самая простая комплектация слайдера: он просто выводит картинки и имеет простейшее оформление. Однако возможности его модернизации, под любые ваши нужды и дизайнерские вкусы - почти безграничны.

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

Установка слайдера на uCoz:

1). Скачиваете архив и папку 3D-Slider со всем ее содержимым кидаете в корень вашего сайта.

2). Далее прописываете код самого слайдера там где нужно (в пределах тега <body></body>):
Код
<!-- <основной блок слайдера> -->
<div id="waterwheel-carousel-default" style="margin:0px auto;">
  <!-- <блок стрелок> -->
  <div class="carousel-controls">
  <div class="carousel-prev"><a href="#">< Назад</a></div>  
  <div class="carousel-next"><a href="#">> Вперёд</a></div>
  </div>
  <!-- </блок стрелок> -->
  <!-- <блок материалов> -->
  <div class="carousel-images">
  <img alt="Test Image 1" src="http://fullweb.ucoz.ru/_ph/1/1/825693961.jpg"/>
  <img alt="Test Image 2" src="http://fullweb.ucoz.ru/_ph/1/1/619890330.jpg"/>
  <img alt="Test Image 3" src="http://fullweb.ucoz.ru/_ph/1/1/542156852.jpg"/>
  <img alt="Test Image 4" src="http://fullweb.ucoz.ru/_ph/1/1/151104005.jpg"/>
  <img alt="Test Image 5" src="http://fullweb.ucoz.ru/_ph/1/1/265646593.jpg"/>
  <img alt="Test Image 6" src="http://fullweb.ucoz.ru/_ph/1/1/190656972.jpg"/>
  <img alt="Test Image 7" src="http://fullweb.ucoz.ru/_ph/1/1/277345084.jpg"/>
  <img alt="Test Image 8" src="http://fullweb.ucoz.ru/_ph/1/1/113555294.jpg"/>
  <img alt="Test Image 9" src="http://fullweb.ucoz.ru/_ph/1/1/23611859.jpg"/>
  <img alt="Test Image 10" src="http://fullweb.ucoz.ru/_ph/1/1/177658055.jpg"/>
  </div>
  <!-- </блок материалов> -->
</div>
<!-- </основной блок слайдера> -->
<!-- <скрипты и стили слайдера> -->
<link type="text/css" rel="stylesheet" href="/3D-Slider/local.css"/>  
<script type="text/javascript" src="/3D-Slider/jquery-1.5.min.js"></script>  
<script type="text/javascript" src="/3D-Slider/jquery.waterwheelCarousel.js"></script>  
<script type="text/javascript">  
$jqNew = jQuery.noConflict(true);  
$jqNew(document).ready(function () {  
$jqNew("#waterwheel-carousel-default").waterwheelCarousel();  
});  
</script>
<!-- </скрипты и стили слайдера> -->

Если вы выводите в слайдере материалы какого-то модуля, а не просто определенные картинки, то можно конечно использовать для этого информер, который сам будет выводить новые материалы в том порядке - каком вам надо.

На этом все готово! Если что-то не получается и вам нужна помощь - пишите мне, я помогу - возможно даже бесплатно smile !

Теги: Waterwheel Carousel, 3D слайдер-карусель, вид галереи, слайдер галереи, слайдер для ucoz, Карусель
Комментарии (1)
avatar
1
А на доску объявлений встанет? Например что бы загрузить несколько фотографий пользователем на объявления и что б не нужно было вставлять $image1$ и т. д.???