Содержание
В стандартных шаблонах uCoz имеется много слайдеров и часто возникает необходимость один из этих слайдеров установить на свой сайт в uCoz, но на другом шаблоне, который вы не хотите менять на другой в котором есть слайдер который вам нужен. Сегодня мы рассмотрим материал о том, как установить слайдер с шаблона 1322 себе на сайт.
Первым делом вам нужно перейти в глобальный блок "Верхняя часть сайта" или глобальный блок Promo или Slider который вы специально для данной задачи создали. Далее в внутрь глобального блока установить код слайдера:
<section> <div id="slider"> <ul class="slides"> <li class="slide"> <img src="ссылка на изображение 1" alt=""> <div class="caption"> <div class="cap-ttl"><a href="ссылка куда перейти при нажатии на слайд">название ссылки</a></div> <div class="cap-ds">описание к слайду 1</div> </div> </li> <li class="slide"> <img src="ссылка на изображение 2" alt=""> <div class="caption"> <div class="cap-ttl"><a href="ссылка куда перейти при нажатии на слайд">название ссылки</a></div> <div class="cap-ds">описание к слайду 2</div> </div> </li> <li class="slide"> <img src="ссылка на изображение 3" alt=""> <div class="caption"> <div class="cap-ttl"><a href="ссылка куда перейти при нажатии на слайд">название ссылки</a></div> <div class="cap-ds">описание к слайду 3</div> </div> </li> </ul> </div> <script type="text/javascript" src="/.s/t/1322/jquery.flexslider-min.js"></script> </section> <div class="clr"></div> <script> $('#slider').flexslider({ animation: "slide", slideshowSpeed: 10000, directionNav: false }); </script>
сохраняем изменения. Частично мы выполнили установку слайдера, пока лишь тело, осталось еще стили установить.
Перейдите в таблицу стилей CSS и установите следующие стили:
#slider { width: 1200px; position: relative; overflow: hidden; margin: 0 auto; } .slides,.slide {padding:0; margin:0; list-style:none;} .slide {position:relative; display:none;} .slide:first-child {display:block;} .slide img {display:block; padding:0; margin:0;} .caption {position:absolute; padding:0 0 20px; left:0; bottom:0; width:100%; background:rgba(26,188,156,.8); color:#fff;} .cap-ttl {padding:20px 20px 10px; font-size:20px; text-transform:uppercase;font-family:'PT Sans';} .cap-ttl a {color:#fff;} .cap-ds {padding:0 20px 20px; font-size:15px;} #slider {text-align: center;} .flex-viewport {text-align: left;} .flex-control-nav {margin: 0; padding: 0; list-style: none;} .flex-control-nav {position: relative;bottom:25px; text-align: center; display: inline-block;} .flex-control-nav li {margin: 0 6px; display: block; float: left;} .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #fff; cursor: pointer; text-indent:100%; overflow:hidden; white-space:nowrap; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;} .flex-control-paging li a:hover { background: #f27935; } .flex-control-paging li a.flex-active { background: #f27935; cursor: default; } .clr {clear:both;} @media only screen and (max-width: 960px) { .cap-ttl {padding:15px 20px 10px; font-size:18px;} .cap-ds {padding:0 20px 15px; font-size:14px;} } @media only screen and (max-width: 640px){ .cap-ttl {font-size:15px;} .cap-ds {font-size:12px;} } @media only screen and (max-width: 480px) { .cap-ttl {padding:10px 20px; font-size:14px;} .cap-ds {display:none;} } @media only screen and (max-width: 360px) { #slider {display:none;} }
Если у вас остаются вопросы по установке или настройке отдельных частей слайдера, оставляйте свои вопросы в комментариях к материалу.
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Благодарность автору!Здравствуй Гость, как Вы видите еще никто не оставил свой комментарий, будьте первым, поделитесь мнением о материале выше.
Здравствуй Гость, комментарии могут оставлять только зарегистрированные пользователи, зарегистрируйтесь и поделитесь мнением о материале выше Регистрация или Войти.