Слайдер 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качиваний: 285)
Посмотреть демо Слайдер Craftyslide для ucoz
Слайдер Craftyslide для ucoz(посмотрели: 9714)
5 | Zmeyqa пишет: | 10.04.2013 | 18:43
Как сделать, чтобы слайды автоматически менялись и был индикатор страниц?
+ (0) -
6 | AID пишет: | 10.04.2013 | 18:55
Читайте ниже.
+ (0) -
7 | Zmeyqa пишет: | 10.04.2013 | 18:57
Ок, тогда в чем измеряется задержка между слайдами?
+ (0) -
9 | AID пишет: | 10.04.2013 | 18:59
В миллисекундах наверно.
+ (0) -
8 | Zmeyqa пишет: | 10.04.2013 | 18:59
<script>
$("#slideshow").craftyslide({
'height': 300,
'width': 873,

'fadetime': 0.1,
'delay': 0.1
});
</script>

___________________________________
и все равно слайды не меняются, когда добавляю pagination false - слайды меняются, но нет ручного управления
+ (0) -
10 | AID пишет: | 10.04.2013 | 19:07
pagination (true/false)
Определяет, будет выводиться индикатор страниц или нет. Задайте false, чтобы скрыть индикатор страниц и включить автоматический режим.
Видимо слайдер одновременно с индикаторами и в автоматическом режиме работать не будет. Нужно выбрать только одну опцию.
+ (0) -
11 | Zmeyqa пишет: | 10.04.2013 | 19:24
Блин. печально.
Спасибо за ответ
+ (0) -
4 | boss021 пишет: | 17.03.2013 | 12:28
помогите!!как поставить слайдер по середине вверху сайта???он у меня в левой части стоит....а автору огромное спасибо))
+ (-1) -
1 | slide пишет: | 25.01.2013 | 22:16
очень хороший слайдер, но у меня почему-то не обновляются картинки, надо переключать вручную, вроде все сделала правильно...
+ (+2) -
2 | AID пишет: | 25.01.2013 | 22:29
Для этого в первом коде следует заменить это:
Код
<script>    
    $("#slideshow").craftyslide();    
    </script>

На это:
Код
<script>
    $("#slideshow").craftyslide({
    'width': 640,
    'height': 400,
    'pagination': false,
    'fadetime': 200,
    'delay': 2000
});
    </script>


width - ширина слайдшоу
height - высота слайдшоу
pagination(true/false) - определяет, будет выводиться индикатор страниц или нет. Задайте false, чтобы скрыть индикатор страниц и включить автоматический режим.
fadetime - скорость анимации
delay - время показа слайда
+ (+2) -
3 | slide пишет: | 26.01.2013 | 11:27
админчик))), спасибо большущее!!!!!!!!!!!! biggrin
+ (+2) -
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Хостинг от uCoz