Rss
Site-Best.net Адаптация шаблона под uCoz manucoz
Поиск на сайте Расширенный поиск
ПОДДЕРЖАТЬ ПРОЕКТ Prog-rami.3de.ru   Yandex.Money:4100115189866119
Ваш Ip адрес: 216.73.216.35

Название сайта!

Главная » Статьи » Всё для uCoz » Скрипты для ucoz
Слайдер Craftyslide для ucoz





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

Установка(Ucoz):

Для начало нужно подключить бибилиотеку jQuery, для этого нужно вставить данный код в нижнюю часть сайта:
Выделить всё
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="http://webuilder.info/Demo/Craftyslide/craftyslide.min.js"></script>
   
  <script>
  $("#slideshow").craftyslide();
  </script>


Затем нам нужно установить стили слайдера, для этого вам нужно вставить этот код в таблицу стилей вашего шаблона:
Выделить всё
/*

Craftyslide CSS Styles

*/

#slideshow {
  margin:0;
  padding:0;
  position:relative;
  border:15px solid #fff;
  -webkit-box-shadow:0 3px 5px #999;
  -moz-box-shadow:0 3px 5px #999;
  box-shadow:0 3px 5px #999;
}

#slideshow ul {
  position:relative;
  overflow:hidden;
  margin:0;
  padding:0;
}

#slideshow ul li {
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
  list-style:none;
}

#pagination {
  clear:both;
  width:75px;
  margin:25px auto 0;
  padding:0;
}

#pagination li {
  list-style:none;
  float:left;
  margin:0 2px;
}

#pagination li a {
  display:block;
  width:10px;
  height:10px;
  text-indent:-10000px;
  background:url(http://webuilder.info/Demo/Craftyslide/pagination.png);
}

#pagination li a.active {
  background-position:0 10px;
}

.caption {
  width:100%;
  margin:0;
  padding:10px;
  position:absolute;
  left:0;
  font-family:Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:lighter;
  color:#fff;
  border-top:1px solid #000;
  background:rgba(0,0,0,0.6);
}


Ну и напоследок нужно вывести данный слайдер на нужном нам месте, для этого установите этот код там где хотите видеть слайдер:
Выделить всё
  
<div id="slideshow">
  <ul>
  <li>
  <img src="Ссылка на картинку" alt="" title="Название картинки" />
  </li>
   
  <li>
  <img src="Ссылка на картинку" alt="" title="Название картинки" />
  </li>
   
  <li>  
  <img src="Ссылка на картинку" alt="" title="Название картинки" />
  </li>
   
  <li>  
  <img src="Ссылка на картинку" alt="" title="Название картинки" />
  </li>
   
  <li>  
  <img src="Ссылка на картинку" alt="" title="Название картинки" />
  </li>  
  </ul>
  </div>


Готово, слайдер установлен. Главная особенностью слайдера является то что он имеет маленький размер веса, тем самим не грузит сайт удобен в использовании, к нему легко пристроить информер.
Категория: Скрипты для ucoz | Добавил: Alexander218 (04.04.2013)
Просмотров: 345 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Навигация
Всё для uCoz
Популярное...
Статистика
Top.Mail.Ru http://catcut.net/friend/39913
Block title
Всё Для minecraft
Block title
Всё для Cs 1.6
Всё Для сервера CS 1.6
Подняться наверх страницы
О проекте Новости сайта Правила сайта Правообладателям Контакты

softucoz.com - ucoz шаблоны и скрипты, freestorrent.com - торрент трекер, softdle.com - всё для DataLife Engine, forwebz.com - всё для вебмастера
Сайт создан в системе uCoz