» »

Слайдер с навигацией изображений для uCoz


Слайдер с навигацией изображений для uCoz

Такой скрипт в первые вижу а точнее его передвижение картинок, так как Слайдер с навигацией изображений для uCoz имеет как у всех стрелки, но когда наводишь на их клик, то появляется в кружке следующие изображение. По своей конфигураций, подойдет под многие ресурсы, он выполнен в стандартном размере, а это не слишком маленький и не большой. Работает по стандартной форме, это вы можете сами перелистывать и посматривать, и если что то находите то переход производиться на прямую к материалу.

Сидя вечером за компьютером и блуждая в интернете в поисках чего то интересного нашёл очень интересный и красивый слайдер . С виду слайдер как слайдер но у него есть стрелки переключения но не как у обычных слайдеров а при наведение на них будут появляться картинки миниатюры. Так же прикольно сделана панель навигации этого слайдера и будет написано какое изображение будет а какое было . В общем интересный слайдер и красивый и изо этого я решил его настроить под сайты uCoz.

Установка:

Вставьте данный код который я указал ниже в то место на сайте где вы желаете видеть слайдер.

Код
<div class="wrapper">  
  <div id="cn-slideshow" class="cn-slideshow">  
  <div class="cn-images">  
  <img src="/images/large/1.jpg" alt="image01" title="Красивые пейзажи 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/>  
  <img src="/images/large/2.jpg" alt="image02" title="Красивые пейзажи 2" data-thumb="images/thumbs/2.jpg"/>  
  <img src="/images/large/3.jpg" alt="image03" title="Красивые пейзажи 3" data-thumb="images/thumbs/3.jpg"/>  
  <img src="/images/large/4.jpg" alt="image04" title="Красивые пейзажи 4" data-thumb="images/thumbs/4.jpg"/>  
  </div><!-- cn-images -->  
  </div><!-- cn-slideshow -->  
  </div>  
  <noscript>  
  <style>  
  .cn-images img{position: relative;display: block;border-bottom: 5px solid #d0ab47;}  
  .cn-slideshow{height: auto;}  
  </style>  
  </noscript>  
  <script id="barTmpl" type="text/x-jquery-tmpl">  
  <div class="cn-bar">  
  <div class="cn-nav">  
  <a href="#" class="cn-nav-prev">  
  <span>Previous</span>  
  <div style="background-image:url(${prevSource});"></div>  
  </a>  
  <a href="#" class="cn-nav-next">  
  <span>Next</span>  
  <div style="background-image:url(${nextSource});"></div>  
  </a>  
  </div><!-- cn-nav -->  
  <div class="cn-nav-content">  
  <div class="cn-nav-content-prev">  
  <span>ПРЕДЫДУЩЕЕ ИЗОБРАЖЕНИЕ</span>  
  <h3>${prevTitle}</h3>  
  </div>  
  <div class="cn-nav-content-current">  
  <span>Сейчас вы просматриваете</span>  
  <h2>${currentTitle}</h2>  
  </div>  
  <div class="cn-nav-content-next">  
  <span>СЛЕДУЮЩЕЕ ИЗОБРАЖЕНИЕ</span>  
  <h3>${nextTitle}</h3>  
  </div>  
  </div><!-- cn-nav-content -->  
  </div><!-- cn-bar -->  
  </script>


Теперь вам нужно скопировать ниже указанный код скрипта и установить его в нижнюю или в верхнюю часть вашего сайта.

Код
<link rel="stylesheet" type="text/css" href="/css/style.css" />  
<script type="text/javascript" src="/js/jquery.tmpl.min.js"></script>  
<script type="text/javascript" src="/js/jquery.slideshow.js"></script>  
  <script type="text/javascript">  
  $(function() {  
  $('#cn-slideshow').slideshow();  
  });  
  </script>


И последнее что вам нужно сделать так это скачать архив и загрузить папку images, js и css в файловый менеджер вашего сайта.
На этом слайдер у нас установлен и вы можете начинать настраивать его под свои нужды.
15.10.2015 Загрузок: 13 Просмотров: 831 Комментарий: (12)

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

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

Комментарий: 12
Dimstrik
Dimstrik 15.10.2015 15:301
+2
Стильный дизайн слайдера, приятно смотрится !
Kosten
Kosten 15.10.2015 15:412
0
Вообще такой в первые вижу.
Kvint
Kvint 15.10.2015 17:193
0
Но так то сделано очень креативность, но не удивить, уже такие есть и были, но только явно не на uCoz.
Canon
Canon 15.10.2015 17:244
0
Самый нормальный слайдер, если только не было за ранее узнавать, какая картинка будет, так можно его поставить на многие сайты.
ZruBkul
ZruBkul 15.10.2015 17:295
0
Прекрасный слайдер и таких мало по дизайну и самому эффекту.
AnTron
AnTron 15.10.2015 17:366
0
В чем его прелесть? Простой слайдер, только когда нажимаешь на стрелку показывается в следующий, не чего того го не вижу, чтоб было, вах.
Canon
Canon 15.10.2015 17:387
0
AnTron, а разве есть накрученные слайдеры, они все по своему разнве только по дизайну, а работа у них одна.
Kvint
Kvint 15.10.2015 17:418
0
На кино сайт его сделать, что, навел и понимаешь, какой следующий фильм.
Kosten
Kosten 15.10.2015 17:489
0
Да некоторые вообще в первые такой видят, но не дизайн, а сам эффект и думают, где можно применить. Да простой слайдер под разную тематику, если есть чему думать, то и поставит без проблем и сделает все на высоте.
kos
kos 15.10.2015 20:0710
0
Интересный слайдер и простой в плане того что не грузит сайт.
Сопрано
Сопрано 15.10.2015 21:1111
0
Первый сайт, где так много слайдеров, и все разные по своему дизайну и есть на их DEMO а значит они рабочие и что главное, можно посмотреть, и прикинуть как на сайте будет смотреться..
Kosten
Kosten 15.10.2015 21:1312
0
Один только минус, с другого ресурса демонстрация и нужно перекидывать на этот.
avatar