Главная » Для web-мастера » Скрипты

Слайдер 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>


Готово, слайдер установлен. Главная особенностью слайдера является то что он имеет маленький размер веса, тем самим не грузит сайт удобен в использовании, к нему легко пристроить информер.


  Автор: Crafted Pixelz | Категория: Скрипты | Добавил: AID | Дата: 31.12.2012
Скачать Слайдер Craftyslide для ucoz с сервера
2650_craftyslide.zip Размер: 4.4 Kb (cкачиваний: 335)
Посмотреть демо Слайдер Craftyslide для ucoz
Слайдер Craftyslide для ucoz(посмотрели: 10045)

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
аватар отсутствует
5 | Zmeyqa пишет: | 10.04.2013 | 18:43 Страница с комментарием |
Как сделать, чтобы слайды автоматически менялись и был индикатор страниц?
+ (0) -