Как установить слайдер с шаблона 1211

В стандартных шаблонах uCoz имеется много слайдеров и часто возникает необходимость один из этих слайдеров установить на свой сайт в uCoz, но на другом шаблоне, который вы не хотите менять на другой в котором есть слайдер который вам нужен. Сегодня мы рассмотрим материал о том, как установить слайдер с шаблона 1211 себе на сайт.

Установка тела слайдера с шаблона 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>

сохраняем изменения. Частично мы выполнили установку слайдера, пока лишь тело, осталось еще стили установить.

Установка стилей к слайдеру с шаблона 1211

Перейдите в таблицу стилей 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;}
}

Если у вас остаются вопросы по установке или настройке отдельных частей слайдера, оставляйте свои вопросы в комментариях к материалу. При желании вы можете загрузить скрипт выше который подгружается с моего блога себе в файловый менеджер и сменить ссылку на скрипт на свою (рекомендую так всегда делать чтобы не зависеть от сайта куда загружен скрипт).