« Красивый скрипт слайдера для uCoz »

Описание материала:

Красивый, качественный скрипт слайдера, для сайтов в системе uCoz. Слайдер состоит из 5 изображений, с описание и с переходом на другой сайт или страницу материала. Ширина слайдера 739px, а высота 341px, у каждого изображения размеры одинаковые - 570x270px. Слайдер можно переключать, на кнопки вправо и влево, а так же слайдер работает и автоматическом режиме. Установка данного скрипта, не очень сложна.

Установка:
1. Скачиваем архив с нашего сайта, далее загружаем папки js, css и img в корень своего сайта
2. Заходим в ПУ - Управление дизайном и туда где хотите видеть слайдер, ставим данный код:

Код
<script src="/js/jquery-1.4.4.min.js"></script>
<script src="/js/slides.min.jquery.js"></script>
<script>
  $(function(){
  $('#slides').slides({
  preload: true,
  preloadImage: '/img/loading.gif',
  play: 5000,
  pause: 2500,
  hoverPause: true,
  animationStart: function(){
  $('.caption').animate({
  bottom:-35
  },100);
  },
  animationComplete: function(current){
  $('.caption').animate({
  bottom:0
  },200);
  if (window.console && console.log) {
  // example return of current slide number
  console.log(current);
  };
  }
  });
  });
</script>
<link rel="stylesheet" href="/css/slides_style.css">
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div>
<a href="#" title="Текст описание" target="_blank"><img src="/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
<div class="caption"><p>Текст описание</p></div>
</div>
<div>
<a href="#" title="Текст описание" target="_blank"><img src="/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
<div class="caption"><p>Текст описание</p></div>
</div>
<div>
<a href="#" title="Текст описание" target="_blank"><img src="/img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
<div class="caption"><p>Текст описание</p></div>
</div>
<div>
<a href="#" title="Текст описание" target="_blank"><img src="/img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
<div class="caption"><p>Текст описание</p></div>
</div>
<div>
<a href="#" title="Текст описание" target="_blank"><img src="/img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
<div class="caption"><p>Текст описание</p></div>
</div>
</div>
<a href="#" class="prev"><img src="/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
<img src="/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
</div>


Готово, слайдер установлен!


Скачать ( Размер архива 1013.0 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 742 | Загрузок: 42

Теги к материалу: для, слайдера, красивый, ucoz, скрипт

Поделиться в соц. сетях:
Комментариев к материалу: 7
trem200 Я тебя на каждом сайте вижу.
0
Александр 06.02.2016 в 19:11Спам
А где можно поменять текст описания в слайдере?
0
Виктор Ягодин 06.02.2016 в 19:22
Там в HTML коде, написано "Текст описания"
0
Александр 06.02.2016 в 21:46Спам
Я хотел другое спросить, мне интересно как поменять цвет описания.
0
Виктор Ягодин 06.02.2016 в 22:14
Вы имеете ввиду белый цвет на другой или что?
0
Александр 06.02.2016 в 22:19Спам
Я имею цвет текста описание, на слайдере
0
Виктор Ягодин 07.02.2016 в 16:42
В CSS возможно поменять, дайте свой сайт, я скажу какой код менять
0
avatar