+ +

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

3D слайдер-карусель через плагин Waterwheel Carousel для uCoz
Цена: БЕСПЛАТНО
Просмотров: 4697
Добавлено: 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, Карусель
Комментарии (11)
avatar
2
скажите пожалуйста где менять размер фото, по скрипту они все одного размера и прямоугольные горизонтального вида, а мне надо разного
avatar
3
Проще всего в самой картинке изменить - width="268" height="188"
avatar
4
спасибо за ответ
я так сделала , но у меня фотографии остаются все одинакового вида, но только увеличиваются или уменьшаются в размере
avatar
5
А какими они должны быть?
avatar
6
они, как в выложенном демо-примере, горизонтальный прямоугольник, а у меня только одна такая фотка, а остальные вертикальные, вставленные высота и ширина ни чего не поменяли, я так подозреваю размер задан в одном из файлов, но не нашла там ни чего похожего sad
avatar
7
Размеры там нигде не заданы, если в самой картинке их не указать, то они просто выводятся в оригинальном разрешении. Принцип там такой: та картинка что в центре - выводиться либо в оригинальном размере, либо в том что задан в ее параметрах или стилях, а размеры остальных картинок которые по бокам - рассчитываются уже относительно центральной в процентном отношении. Поэтому делать их разными - нет смысла, нужно задать всем наиболее подходящий одинаковый размер, а чтоб они не растягивались неестественно и сохраняли пропорции, добавить в стили:
Код
.carousel-images img {object-fit:cover;object-position:top;}
avatar
8
аааа, вот почему они с начала у меня были огромных размеров, т.е. если их изначально надо сделать нужного размера, а потом грузить на сайт
avatar
9
Можно сами изображения сделать нужного размера, а можно как я уже сказал указать размер на странице, хоть так хоть так - результат одинаковый:
Код
<img width="268" height="188" src="/image.jpg" alt="title"/>
avatar
10
спасибо огромное!!!! получилось
только теперь у меня новая проблема - у меня вся композиция сместилась ниже таблицы, а не как в примере по середине sad
avatar
11
Все это в стилях настраивается. Пишите в ВК если что, тут это все обсуждать не удобно.
avatar
1
А на доску объявлений встанет? Например что бы загрузить несколько фотографий пользователем на объявления и что б не нужно было вставлять $image1$ и т. д.???