Главная » Файлы » Прочие скрипты » jQuery |
Простой светлый слайдер контента на jQuery для uCoz
24.06.14, 16:44:02 | |
Простенький слайдер любого вашего контента, который неплохо впишется в светлый дизайн Для начала посмотрите ДЕМО Моё тестирование в фидле: КЛИК Установка: После /head на нужных страницах вставляйте: Код <script src="/js/jquery.jcarousel.js"></script> <script> $(document).ready(function () { $('.d-carousel .carousel').jcarousel({ scroll: 1 }); }); </script> Следующий код в самый низ вашего css: Код .d-carousel { color: #787878; font-size: 12px; line-height: 18px; } .d-carousel a { text-decoration: none; color: #4b4b4b; } .d-carousel ul li { background: none; background-color: #FFF; -webkit-box-shadow: 0px 1px 2px 0px #b7b7b7; -moz-box-shadow: 0px 1px 2px 0px #b7b7b7; box-shadow: 0px 1px 2px 0px #b7b7b7; padding: 15px; width: 175px; } .jcarousel-direction-rtl { direction: rtl; } .d-carousel h4 { margin: 5px 0 5px 0; } .d-carousel .jcarousel-container { display: block; overflow: hidden; margin-bottom: 20px; } .d-carousel .jcarousel-item { width: 175px; height: 290px; } .d-carousel .jcarousel-container-horizontal { width: 650px; height: 325px; padding: 0 45px; } .d-carousel .jcarousel-item-horizontal { margin-left: 3px; margin-bottom: 3px; margin-top: 3px; margin-right: 11px; } .d-carousel .jcarousel-next-horizontal { position: absolute; top: 149px; right: 0; margin-right: 3px; width: 15px; height: 28px; cursor: pointer; background: transparent url(/images/blog-arrows.jpg) no-repeat top right; } .d-carousel .jcarousel-direction-rtl .jcarousel-next-horizontal { left: 5px; right: auto; background-image: url(/images/blog-arrows.jpg); } .d-carousel .jcarousel-next-horizontal:hover { background-position: bottom right; } .d-carousel .jcarousel-prev-horizontal { position: absolute; top: 149px; left: 0; margin-left: 3px; width: 15px; height: 28px; cursor: pointer; background: transparent url(/images/blog-arrows.jpg) no-repeat top left; } .d-carousel .jcarousel-direction-rtl .jcarousel-prev-horizontal { left: auto; right: 5px; background-image: url(/images/blog-arrows.jpg); } .d-carousel .jcarousel-prev-horizontal:hover { background-position: bottom left; } .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0 } Далее в то место, где должен располагаться слайдер: Код <div class="d-carousel"> <ul class="carousel"> <li><a href="#"><img src="Ссылка на картинку" /></a> <h4><a href="#">http://apo-ucoz.com</a></h4> Уникальные скрипты для uCoz</p> </li> <li><a href="#"><img src="Ссылка на картинку" /></a> <h4><a href="#">http://apo-ucoz.com</a></h4> Уникальные скрипты для uCoz</p> </li> <li><a href="#"><img src="Ссылка на картинку" /></a> <h4><a href="#">http://apo-ucoz.com</a></h4> Уникальные скрипты для uCoz</p> </li> <li><a href="#"><img src="Ссылка на картинку" /></a> <h4><a href="#">http://apo-ucoz.com</a></h4> Уникальные скрипты для uCoz</p> </li> <li><a href="#"><img src="Ссылка на картинку" /></a> <h4><a href="#">http://apo-ucoz.com</a></h4> Уникальные скрипты для uCoz</p> </li> </ul> </div> <div class="clear"></div> Скрипт из прикреплённого архива залейте в папку js, картинку в папку images Материал подготовлен Apocalypse | |
Просмотров: 524 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |