» »

Стильный слайдер сайта AtGron для uCoz


Стильный слайдер сайта AtGron для uCoz

Сейчас трудно представить некие тематики сайта без слайдера. И здесь вы можете посмотреть и оценить стильный по своему формату слайдер и скачать его. Он создан под систему uCoz, что очень редко делают, основном адаптация идет, сам нужно поставить пять изображений, думаю для такого скрипта в самый раз будет.

Давайте с начала узнаем его ширину: 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>
04.02.2016 Загрузок: 8 Просмотров: 565 Комментарий: (11)

Поделиться в социальных сетях

Материал разместил

Комментарий: 11
Tergran
Tergran 04.02.2016 23:251
0
Этот вид слайдер только на светлый дизайн подойдет, стильного не чего не вижу, простой и рабочий как лошадь.)
ucozmental
ucozmental 04.02.2016 23:292
0
Стилей на его не идут, но думаю оттенок не проблема изменить.
Maryges
Maryges 04.02.2016 23:324
0
Да, если захотеть, все можно сделать и из слайдера видео плеер в него установить.) Нормальный.
ucozmental
ucozmental 04.02.2016 23:303
0
Хотя нужно скачивать же здесь.
Kosten
Kosten 04.02.2016 23:467
0
Вот там как раз можно все найти, чтоб поменять цвет, так думаю, но без этого редко какой скрипт идет.
Сафрон
Сафрон 04.02.2016 23:355
0
На новостной или игрой пойдет, но не знаю, возможно в шапку установить кто то сможет.
Kvint
Kvint 04.02.2016 23:456
0
Много где можно слайдер увидеть, главное, чтоб был по теме, а не так для красоты.
AnTron
AnTron 05.02.2016 00:448
0
Не очень мне такой вид дизайн нравиться, но видел один сайт, где он стоял, и нормально, просто удачно выставлен было.
YaVi
YaVi 05.02.2016 10:539
0
А можно на сайт AtGron взглянуть? Что это за слайдер там?
Kosten
Kosten 05.02.2016 11:3310
0
Нет, нельзя) это для писка, но не брать же полностью название.
YaVi
YaVi 05.02.2016 11:5811
0
Понятно)
avatar