+ +

Функциональный слайдер с автопрокруткой (карусель) для uCoz

Функциональный слайдер с автопрокруткой (карусель) для uCoz
Цена: БЕСПЛАТНО
Просмотров: 10680
Добавлено: 24.10.2014
Контакты: Автор (VK) (Онлайн)
Файл добавил: Alan_Writer
Архив шаблона: СКАЧАТЬ
Демо: НЕТУ
Информация о материале
Простая, многофункциональная, легко настраиваемая карусель (слайдер) на jQuery для uCoz. Уже не раз при создании сайта для себя или на заказ, возникала необходимость установить сайдер, и нередко требования к этому слайдеру разные: одному надо с автопрокруткой, другому нужна определенная скорость смены слайдов. Поэтому не редко приходилось подыскивать для каждого случая свой вариант слайдера.

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

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

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

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

2. Убедитесь что в общих настройках подключена последняя версия библиотеки jQuery.

3. Теперь можно начать ставить сам код слайдера. Основная часть: каркас, скрипты и стили - ставятся "одним куском" в то место где вы хотите видеть вашу карусель (слайдер):
Код
<script src="/slider/jsCarousel-2.0.js" type="text/javascript"></script>
<link href="/slider/jsCarousel-2.0.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel').jsCarousel({
  autoscroll: true, /*авто-прокрутка: true - вкл, false - выкл*/
  circular: true, /*прокрутка по кругу: true - вкл, false - выкл*/
  masked: true, /*эффект подсвечивания: true - вкл, false - выкл*/
  itemstodisplay: 5, /*кол-во слайдов в контейнере: по умолчанию, в горизонтальном - 5, в вертикальном - 3*/
  orientation: 'h', /*ориентация: v - вертикальная, h - горизонтальная*/
  scrollspeed: 1500, /*скорость анимации смены слайдов: 1000 = 1 сек*/
  delay: 5000, /*частота смены слайдов: 1000 = 1 сек*/
});
});
</script>
<div id="carousel">
[СЛАЙДЫ]
</div>
** Я специально подписал в скрипте - что и за что отвечает, переключив соответствующие опции - вы легко можете активировать нужные функции слайдера, изменить ориентацию, кол-во слайдов, скорость смены слайдов и анимации, и тд.

4. Ну и собственно вместо слова [СЛАЙДЫ] - вы вставляете слайды: либо вручную прописываете каждый слайд - если вам они нужны статичные и добавлять их в будущем вы будете не часто, либо если вы хотите с помощью слайдера выводить информацию из какого-то модуля - то конечно целесообразнее использовать информер, который сам будет выводить в нужном порядке новую информацию.

Слайдов как я уже говорил может быть сколько угодно, а код слайда в любом случае выглядит так:
Код
<div>
<a href="/Ссылка/">
<img src="/Картинка.png" alt=""/><br/>
<span class="thumbnail-text">Заголовок</span>
</a>
</div>

Вот собственно и все. Экспериментируйте, пользуйтесь, пишите отзывы!

Теги: jQuery, автопрокрутка, функциональный, для uCoz, Карусель, Слайдер
Комментарии (0)