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


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

  Просмотров: 13863 | Категория: Скрипты / Слайдера для ucoz | Добавил: NA

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


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


Ссылка:
BB-code:
HTML:
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
slide пишет: | 25 января 2013 20:16
очень хороший слайдер, но у меня почему-то не обновляются картинки, надо переключать вручную, вроде все сделала правильно...
AID пишет: | 25 января 2013 20: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 - время показа слайда
slide пишет: | 26 января 2013 09:27
админчик))), спасибо большущее!!!!!!!!!!!! biggrin
boss021 пишет: | 17 марта 2013 10:28
помогите!!как поставить слайдер по середине вверху сайта???он у меня в левой части стоит....а автору огромное спасибо))
Zmeyqa пишет: | 10 апреля 2013 17:43
Как сделать, чтобы слайды автоматически менялись и был индикатор страниц?
AID пишет: | 10 апреля 2013 17:55
Читайте ниже.
Zmeyqa пишет: | 10 апреля 2013 17:57
Ок, тогда в чем измеряется задержка между слайдами?
Zmeyqa пишет: | 10 апреля 2013 17:59
<script>
$("#slideshow").craftyslide({
'height': 300,
'width': 873,

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

___________________________________
и все равно слайды не меняются, когда добавляю pagination false - слайды меняются, но нет ручного управления
AID пишет: | 10 апреля 2013 17:59
В миллисекундах наверно.
AID пишет: | 10 апреля 2013 18:07
pagination (true/false)
Определяет, будет выводиться индикатор страниц или нет. Задайте false, чтобы скрыть индикатор страниц и включить автоматический режим.
Видимо слайдер одновременно с индикаторами и в автоматическом режиме работать не будет. Нужно выбрать только одну опцию.
Zmeyqa пишет: | 10 апреля 2013 18:24
Блин. печально.
Спасибо за ответ