Слайдер с навигацией изображений для 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 в файловый менеджер вашего сайта. На этом слайдер у нас установлен и вы можете начинать настраивать его под свои нужды.  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 12 | |
|
| |
