Содержание
В стандартных шаблонах uCoz имеется много слайдеров и часто возникает необходимость один из этих слайдеров установить на свой сайт в uCoz, но на другом шаблоне, который вы не хотите менять на другой в котором есть слайдер который вам нужен. Сегодня мы рассмотрим материал о том, как установить слайдер с шаблона 1211 себе на сайт.
Первым делом вам нужно перейти в глобальный блок "Верхняя часть сайта" или глобальный блок Promo или Slider который вы специально для данной задачи создали. Далее в внутрь глобального блока установить код слайдера:
<div id="head-b"> <div id="slider-w"> <div id="slider"> <ul class="slides"> <li> <div class="slide"><img src="ссылка на слайд 1" alt="" class="slide-img"> <div class="slide-ds"><div class="slide-tt">Название к слайду 1</div>Описание к слайду 1</div> <div class="slide-but"> <a href="ссылка для 1 кнопки" class="green-lnk">Название кнопки 1</a> <a href="ссылка для второй кнопки" class="brown-lnk">Название второй кнопки</a> </div></div> </li> <li> <div class="slide"><img src="ссылка на слайд 2" alt="" class="slide-img"> <div class="slide-ds"><div class="slide-tt">Название к слайду 2</div>Описание к слайду 2</div> <div class="slide-but"> <a href="ссылка для 1 кнопки" class="green-lnk">Название кнопки 1</a> <a href="ссылка для второй кнопки" class="brown-lnk">Название второй кнопки</a> </div></div> </li> <li> <div class="slide"><img src="ссылка на слайд 3" alt="" class="slide-img"> <div class="slide-ds"><div class="slide-tt">Название к слайду 3</div>Описание к слайду 3</div> <div class="slide-but"> <a href="ссылка для 1 кнопки" class="green-lnk">Название кнопки 1</a> <a href="ссылка для второй кнопки" class="brown-lnk">Название второй кнопки</a> </div></div> </li> </ul> </div></div></div> <script type="text/javascript" src="/.s/t/1211/jquery.flexslider-min.js"></script> <script type="text/javascript"> var SLIDER = { animation: "slide", direction: "horisontal", prevText: "", nextText: "", slideshowSpeed: 7000, animationSpeed: 500, pauseOnHover: true }; </script> <script type="text/javascript" src="/js/shb/slider1211.js"></script>
сохраняем изменения. Частично мы выполнили установку слайдера, пока лишь тело, осталось еще стили установить.
Перейдите в таблицу стилей CSS и установите следующие стили:
#head-b {background:url(/.s/t/1211/top.png) 50% -68px no-repeat;padding:20px 0 0;} #slider-w {position:relative;border:3px solid #292114;background:#5c9630;} #slider {height:100%;width:100%;overflow:hidden;} #slider ul,#slider li {padding:0;margin:0;list-style:none;} .slide {position:relative;overflow:hidden;} .slide-img {display:block;width:100%;min-height:100%;} .slide-ds {position:absolute;max-width:50%;bottom:130px;left:60px;color:#fff;text-shadow:0 1px 1px #000;font-size:14px;font-weight:bold;} .slide-tt,.slide-tt a {color:#fff;text-shadow:0 1px 1px #000;font-size:22px;padding:0 0 10px;text-transform: uppercase;} .slide-but {position:absolute;left:60px;bottom:60px;} #slider-w,.slide {margin: 0 auto; width: 980px; height: 290px;} .slide {width:974px;} .green-lnk,.brown-lnk {display:inline-block;margin:0 20px 0 0;padding:0 20px;height:40px;line-height:40px;border:3px solid #292114;background:#7c4500 url(/.s/t/1211/side.jpg);color:#fff;text-transform:uppercase;font-weight:bold;text-shadow:0 1px 1px #250d03;} .green-lnk {background:#447e18 url(/.s/t/1211/title.jpg);text-shadow:0 1px 1px #32561b;} .green-lnk:hover,.brown-lnk:hover {background:#2f2318 url(/.s/t/1211/bottom.jpg);border-color:#447e18;text-decoration:none;} .flex-prev,.flex-next {position:absolute;display:block;width:36px;height:42px;border:3px solid #292114;background:#7c4500 url(/.s/t/1211/side.jpg);top:50%;margin:-20px 0 0;} .flex-prev {left:-42px;} .flex-next {right:-42px;} .flex-prev:before {position:absolute;left:0;top:-13px;content:"";width:0;height:0;border-right:36px solid #292114;border-top:10px solid transparent;} .flex-prev:after {position:absolute;left:12px;top:11px;content:"";width:0;height:0;border-right:10px solid #1a1109;border-top:10px solid transparent;border-bottom:10px solid transparent;} .flex-prev:hover:after {border-right-color:#fff;} .flex-next:before {position:absolute;right:0;top:-13px;content:"";width:0;height:0;border-left:36px solid #292114;border-top:10px solid transparent;} .flex-next:after {position:absolute;right:12px;top:11px;content:"";width:0;height:0;border-left:10px solid #1a1109;border-top:10px solid transparent;border-bottom:10px solid transparent;} .flex-next:hover:after {border-left-color:#fff;} @media only screen and (min-width:768px) and (max-width:979px) { #head-b {background-position:50% -49px;} .slide {width:800px;} } @media only screen and (max-width:767px) { #head-b {display:none;} } @media only screen and (min-width:480px) and (max-width:767px) { #head-b {background-position:50% -21px;} #head-b {display:block;} .slide {width:500px;} #slider-w,.slide {height:210px;} .slide-ds {bottom:90px;left:30px;font-size:10px;} .slide-but {position:absolute;left:30px;bottom:40px;} .green-lnk,.brown-lnk {padding:0 10px;height:26px;line-height:26px;font-size:10px;} .flex-prev,.flex-next {display:none;} }
Если у вас остаются вопросы по установке или настройке отдельных частей слайдера, оставляйте свои вопросы в комментариях к материалу. При желании вы можете загрузить скрипт выше который подгружается с моего блога себе в файловый менеджер и сменить ссылку на скрипт на свою (рекомендую так всегда делать чтобы не зависеть от сайта куда загружен скрипт).
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Благодарность автору!Здравствуй Гость, как Вы видите еще никто не оставил свой комментарий, будьте первым, поделитесь мнением о материале выше.
Здравствуй Гость, комментарии могут оставлять только зарегистрированные пользователи, зарегистрируйтесь и поделитесь мнением о материале выше Регистрация или Войти.