Рабочий jQuery слайдер для сайта uCoz
 | |
| Если вы ищете что то интересное в плане показа изображение, то Рабочий jQuery слайдер для сайтов uCoz то что вам нужно, так как по своем характеристикам, он может подойти под любую тематики. К примеру можно создать страницу под него и назвать "Отдых в горах" и разместить в него все свои снимки. Это первое, будет очень оригинально и место не займет, так же можно заметить, что у него есть тени а значит изначально идет под светлую гамму фона. Он работает на автомате, а точнее сам может передвигать, тут только нужно задать скорость. И вы сами можете вытащить то скрин, который вам нужен, а это просто клик навести и в низу появиться небольшие отсеки, для выбора. Установка: Как всегда вам нужно скачать с начало архив и загрузить папку img и js в файловый менеджер вашего сайта. Затем после этого установите код слайдера в нужное место на сайте где по вашему он должен стоять у вас . Код <div id="wrapper"> <div id="carousel"> <img src="img/large/carnaval1.jpg" alt="c1" width="600" height="400" /> <img src="img/large/carnaval2.jpg" alt="c2" width="600" height="400" /> <img src="img/large/carnaval3.jpg" alt="c3" width="600" height="400" /> <img src="img/large/carnaval4.jpg" alt="c4" width="600" height="400" /> <img src="img/large/carnaval5.jpg" alt="c5" width="600" height="400" /> <img src="img/large/carnaval6.jpg" alt="c6" width="600" height="400" /> <img src="img/large/carnaval7.jpg" alt="c7" width="600" height="400" /> <img src="img/large/carnaval8.jpg" alt="c8" width="600" height="400" /> <img src="img/large/carnaval9.jpg" alt="c9" width="600" height="400" /> <img src="img/large/carnaval10.jpg" alt="c10" width="600" height="400" /> </div> <div id="thumbnails"> <img src="img/small/carnaval1.jpg" alt="c1" width="100" height="100" /> <img src="img/small/carnaval2.jpg" alt="c2" width="100" height="100" /> <img src="img/small/carnaval3.jpg" alt="c3" width="100" height="100" /> <img src="img/small/carnaval4.jpg" alt="c4" width="100" height="100" /> <img src="img/small/carnaval5.jpg" alt="c5" width="100" height="100" /> <img src="img/small/carnaval6.jpg" alt="c6" width="100" height="100" /> <img src="img/small/carnaval7.jpg" alt="c7" width="100" height="100" /> <img src="img/small/carnaval8.jpg" alt="c8" width="100" height="100" /> <img src="img/small/carnaval9.jpg" alt="c9" width="100" height="100" /> <img src="img/small/carnaval10.jpg" alt="c10" width="100" height="100" /> </div> </div> Вторым действием я предлагаю прописать стили к слайдеру и для этого вам нужно в ваши стили сайта добавить стили приведённые чуть ниже. Код #wrapper { width: 600px; height: 400px; overflow: hidden; position: relative; box-shadow: 0 20px 50px #333; } #carousel { width: 600px; height: 400px; overflow: hidden; position: absolute; top: 0; left: 0; } #carousel img { display: block; float: left; } #thumbnails { width: 600px; height: 120px; overflow: hidden; position: absolute; top: 375px; left: 0; z-index: 2; } #thumbnails img { display: block; float: left; margin: 10px; width: 100px; height: 100px; box-shadow: 0 0 10px #000; } #thumbnails img:hover { width: 110px; height: 110px; margin: 5px; } #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="/js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#wrapper').hover( function() { $('#carousel').trigger( 'pause' ); $('#thumbnails').parent().animate({ top: 280 }); }, function() { $('#carousel').trigger( 'play' ); $('#thumbnails').parent().animate({ top: 375 }); } ); $('#carousel').carouFredSel({ scroll: { fx: 'crossfade', onBefore: function( data ) { $('#thumbnails').trigger( 'slideTo', [ $('#thumbnails img[alt='+ data.items.visible.attr( 'alt' ) +']'), -2 ] ); } } }); $('#thumbnails').carouFredSel({ auto: false, items: { start: -2 } }); $('#thumbnails img').click(function() { $('#carousel').trigger( 'slideTo', [ $('#carousel img[alt='+ $(this).attr( 'alt' ) +']') ] ); }).css( 'cursor', 'pointer' ); }); </script> Слайдер установлен и думаю вам он пригодится ! На этом всё с вами был Дмитрий и ждите новых скриптов для ваших сайтов uCoz.  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 14 | |
|
| |
