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

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

Установка тела слайдера с шаблона 1051

Первым делом вам нужно перейти в глобальный блок "Верхняя часть сайта" или глобальный блок Promo или Slider который вы специально для данной задачи создали. Далее в внутрь глобального блока установить код слайдера:

<div class="slider-row">
<div class="cap"></div>
<div class="cont-wrap">
<div class="slider pattern" id="camera_wrap">
<div data-src="ссылка на изображение">
<div class="camera_caption fadeFromLeft">
<h2 class="slide-ttl">Название которое выводится над изображением</h2>
<div class="slide-descr">Описание к слайду</div>
<a href="ссылка куда перейти по нажатию на кнопку" class="btn-lnk dark-gr">Название кнопки к первому  слайду</a>
</div>
<div class="fadeIn camera_effected slide-inner-b"></div>
</div> <div data-src="ссылка на изображение">
<div class="camera_caption fadeFromLeft">
<h2 class="slide-ttl">Название которое выводится над изображением</h2>
<div class="slide-descr">Описание к слайду</div>
<a href="ссылка куда перейти по нажатию на кнопку" class="btn-lnk dark-gr">Название кнопки к второму  слайду</a>
</div>
<div class="fadeIn camera_effected slide-inner-b"></div>
</div> <div data-src="ссылка на изображение">
<div class="camera_caption fadeFromLeft">
<h2 class="slide-ttl">Название которое выводится над изображением</h2>
<div class="slide-descr">Описание к слайду</div>
<a href="ссылка куда перейти по нажатию на кнопку" class="btn-lnk dark-gr">Название кнопки к третьему  слайду</a>
</div>
<div class="fadeIn camera_effected slide-inner-b"></div>
</div> <div data-src="ссылка на изображение последнего слайда">
<div class="camera_caption fadeFromLeft">
<h2 class="slide-ttl">Название которое выводится для изображения последнего слайда</h2>
<div class="slide-descr">Описание к последнему слайду</div>
<a href="ссылка куда перейти по нажатию на кнопку" class="btn-lnk dark-gr">Название кнопки к последнему слайду</a>
</div>                     
                    
<div class="fadeIn camera_effected" style="position: absolute;"></div>
                    
</div> 
</div>
</div> <div class="cap"></div>
</div> <script type='text/javascript' src='/.s/t/1051/template.min.js'></script>    
<script>  
jQuery(function(){    
jQuery('#camera_wrap').camera({   
height: '390px',   
loader: 'none',   
pagination: true,   
thumbnails: false,   
navigation: false,   
hover: false,   
opacityOnGrid: false,   
overlayer: true,   
playPause: false,   
time: 30000,   
imagePath: '/.s/t/1051/'  });   });  
</script>
 

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

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

Перейдите в таблицу стилей CSS и установите следующие стили:

.cap {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
max-width: 960px;
width: 100%;
height: 0;
    border-right: 25px solid transparent;
border-bottom: 28px solid #343434;
    border-left: 25px solid transparent;
} .slider-row .cap:first-child {
border-width: 0 20px 20px;
}
.slider-row {
background: url(/.s/t/1051/sldr-bg.jpg) no-repeat 50% 0;
} .slider {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 0 !important;
padding: 20px;
background: #373737;
-webkit-box-shadow: 0px 40px 20px -28px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 40px 20px -28px rgba(0, 0, 0, 0.75);
box-shadow: 0px 40px 20px -28px rgba(0, 0, 0, 0.75);
text-align: center;
}  .slider img, 
.slider ol, .slider ul, .slider li,
.slider table, .slider tbody, .slider tfoot, .slider thead, .slider tr, .slider th, .slider td {
margin: 0;
padding: 0;
border: 0;
background: none;
list-style: none;
vertical-align: baseline;
font: inherit;
font-size: 100%;
}
.slider {
position: relative;
z-index: 0;
display: none;
}
.slider img {
max-width: none!important;
}
.camera_fakehover {
position: relative;
z-index: 1;
min-height: 60px;
width: 100%;
height: 100%;
}
.slider {
width: 100%;
}
.camera_src {
display: none;
}
.cameraCont, .cameraContents {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.cameraSlide {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
.cameraContent {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
width: 100%;
}
.camera_target {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow: hidden;
width: 100%;
height: 100%;
text-align: left;
}
.camera_overlayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.camera_target_content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
overflow: hidden;
}
.camera_target_content .camera_link {
display: block;
height: 100%;
    background: url(/imag/blank.gif);
text-decoration: none;
}
.camera_nav_cont {
position: absolute;
top: 15px;
right: 9px;
z-index: 4;
overflow: hidden;
width: 120px;
height: 65px;
}
.camerarelative {
position: relative;
overflow: hidden;
}
.imgFake {
cursor: pointer;
}
.camera_command_wrap .hideNav {
display: none;
}
.camera_command_wrap {
position: relative;
right:0;
left: 0;
z-index: 4;
} .camera_pag {
position: absolute;
bottom: 13px;
z-index: 1000;
width: 100%;
} .slider .camera_pag .camera_pag_ul {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0;
min-width: 240px;
background: #373737 url(/.s/t/1051/slider-pag-m.png) repeat 0 0;
list-style: none;
vertical-align: bottom;
text-align: center;
} .slider .camera_pag .camera_pag_ul:before,
.slider .camera_pag .camera_pag_ul:after {
position: absolute;
top: 0;
display: block;
width: 30px;
height: 32px;
content: '';
} .slider .camera_pag .camera_pag_ul:before {
left: -30px;
background: url(/.s/t/1051/slider-pag-l.png) no-repeat 0 0;
} .slider .camera_pag .camera_pag_ul:after {
right: -30px;
background: url(/.s/t/1051/slider-pag-r.png) no-repeat 0 0;
} .slider .camera_pag .camera_pag_ul li {
position: relative;
display: inline-block;
margin: 9px 2px 5px;
width: 16px;
height: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: #4a4a4a;
-webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
-moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
text-align: left;
text-indent: -9999px;
cursor: pointer;
} .slider .camera_pag .camera_pag_ul li:hover {
background-color: #2e2e2e;
-webkit-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
-moz-box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
box-shadow: inset 0px 1px 3px rgba(0,0,0,.7);
} .slider .camera_pag .camera_pag_ul li.cameracurrent {
background-color: #73b52a;
-webkit-box-shadow:  inset 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,1);
box-shadow:  inset 0px 1px 0px rgba(255,255,255,1);
} .camera_pag_ul li img {
position: absolute;
display: none;
}
.camera_pag_ul .thumb_arrow {
position: absolute;
top: 0;
left: 50%;
margin-left: -4px;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
} .slider .camera_pag .camera_pag_ul li {
position: relative;
display: inline-block;
margin: 9px 2px 5px;
width: 16px;
height: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
text-indent: -9999px;
cursor: pointer;
}
.camera_clear {
display: block;
clear: both;
}
.showIt {
display: none;
}
.camera_clear {
position: relative;
display: block;
clear: both;
margin: -1px 0 25px;
height: 1px;
} .pattern .camera_overlayer {
background: url(/.s/t/1051/slide-ol.png) repeat;
} .camera_caption {
position: absolute;
top: 70px;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 3px 20px 35px;
width: 350px;
background-color: #000;
background-color: rgba(0,0,0,.5);
color: #fff;
text-align: left;
font-family: 'Roboto Condensed', sans-serif;
} .slide-ttl {
margin: 0;
padding: 0 0 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 30px;
} .slide-descr {
font-weight: normal;
font-size: 12px;
line-height: 1.6;
} .camera_caption .btn-lnk {
position: absolute;
bottom: -50px;
padding: 10px 24px;
}
/*------ slider style ------*/ @media screen and (max-width: 960px) {
.cont-wrap {
width: auto;
}
}
@media screen and (max-width: 640px) {
.slider-row .cap {
display: none;
}
.slider {
-webkit-box-shadow: 0px 10px 30px 0px #000;
-moz-box-shadow: 0px 10px 30px 0px #000;
box-shadow: 0px 10px 30px 0px #000;
}
.slider-row .cont-wrap {
padding: 20px 0;
background: #373737 url('/.s/t/1051/hatch.jpg') repeat-x 0 0;
}
}

Если у вас остаются вопросы по установке или настройке отдельных частей слайдера, оставляйте свои вопросы в комментариях к материалу.

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Похожие материалы:
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar
Я попробовал установить этот слайдер. У меня получилось.
Только не забывайте очищать кэш.
Вот только не пойму, этот слайдер очень долго пререлистывается автоматически, и с последней картинки на первую. Какой параметр отвечает за время задержки, где исправить время?
Сколько можно поместить картинок в слайдер с соответствующим описанием?
Автор: Задержка регулируется в значении time: 30000,
avatar
Сколько можно поместить картинок в слайдер с соответствующим описанием?
Автор: Ограничений нет. Главное чтобы это корректно смотрелось. Штук 10-15 точно впишется корректно.