Слайдер для главной страницы сайта uCoz
 | |
| Когда видишь ресурс и у него установлен слайдер, то смотрится совершенно по другому и теперь вы можете поставить Слайдер для главной страницы сайта uCoz где выставите свои изображение и он будет работать. А точнее показывать ту информацию, которую вам нужно и вы сами ее настроили. Все сделать можно на главной странице и здесь идет под светлые стили и что означает, сам портал, должен соответствовать такому же оттенку. Хотел сделать ещё одну подборку слайдеров для ваших сайтов, да вот наткнулся на один слайдер и захотелось его отдельно разместить для вас и ваших сайтов. Слайдер смотрится аккуратно и немного строго. При наводки мыши на слайдер будут появляться кнопки переключения изображения и старт + пуск слайд-шоу. Думаю не плохая получится реализация слайдера на сайт и впишется под любой дизайн сайта . Установка слайдера: И так давайте мы с вами установим данный слайдер на сайт и первым делом вам нужно скачать архив и загрузить папки img и js в файловый менеджер вашего сайта. После того как загрузили папки нам следует установить код самого слайдера в нужное место на вашем сайте и для этого скопируйте код ниже и вставьте куда вы уже определились. Код <div id="wrapper"> <div id="inner"> <div id="carousel"> <img src="img/rally1.jpg" alt="rally1" width="600" height="400" border="0" /> <img src="img/rally2.jpg" alt="rally2" width="600" height="400" border="0" /> <img src="img/rally3.jpg" alt="rally3" width="600" height="400" border="0" /> <img src="img/rally4.jpg" alt="rally4" width="600" height="400" border="0" /> </div> <div id="navi"> <div id="timer"></div> <a id="prev" href="#"></a> <a id="play" href="#"></a> <a id="next" href="#"></a> </div> </div> </div> Далее а точнее следующим действием действием мы пропишем стили к данному слайдеру и вам нужно в ваши стили сайта добавить стили которые я указал чуть ниже. Код #wrapper { border: 1px solid #ccc; background-color: #fff; width: 600px; height: 400px; padding: 20px; box-shadow: 0 5px 10px #ccc; } #inner { position: relative; width: 600px; height: 400px; overflow: hidden; } #carousel img { display: block; float: left; } #navi { background-color: #333; background-color: rgba(30, 30, 30, 0.8); border-top: 1px solid #000; width: 600px; height: 70px; position: absolute; bottom: -60px; left: 0; z-index: 10; } #timer { background-color: #222; background-color: rgba(20, 20, 20, 0.8); width: 0; height: 70px; position: absolute; z-index: 20; top: 0; left: 0; } #prev, #next, #play { display: block; position: absolute; z-index: 30; } #prev, #next { width: 47px; height: 47px; top: 13px; } #play { width: 53px; height: 53px; top: 10px; background: url(/img/ui/pause.png) 0 0 no-repeat transparent; left: 50%; margin-left: -27px; } #play.paused { background: url(/img/ui/play.png) 0 0 no-repeat transparent; } #prev { background: url(/img/ui/prev.png) 0 0 no-repeat transparent; left: 220px; } #next { background: url(/img/ui/next.png) 0 0 no-repeat transparent; right: 220px; } #donate-spacer { height: 100%; } #donate { border-top: 1px solid #999; width: 750px; padding: 50px 75px; margin: 0 auto; overflow: hidden; } #donate p, #donate form { margin: 0; float: left; } #donate p { width: 650px; } #donate form { width: 100px; } И напоследок мы подключим скрипт отвечающий за работу слайдера и вам нужно установить в нижнюю или в верхнюю часть сайта код скрипта который находится чуть ниже. Код <script src="/jsjquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#carousel').carouFredSel({ prev: '#prev', next: '#next', auto: { button: '#play', progress: '#timer', pauseOnEvent: 'resume' }, scroll: { fx: 'fade' } }); $('#wrapper').hover(function() { $('#navi').stop().animate({ bottom: 0 }); }, function() { $('#navi').stop().animate({ bottom: -60 }); }); }); </script> Вот и всё слайдер установлен и вы можете с помощью стилей настраивать его под свои нужды!  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 14 | |
| |
