Стильный слайдер сайта 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> | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 11 | |
| |
