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

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

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

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

<link rel="stylesheet" href="/.s/t/1730/zoomslider.css">
<div id="promo" data-zs-src='["/.s/t/1730/image_01.jpg", "/.s/t/1730/image_02.jpg", "/.s/t/1730/image_03.jpg"]' data-zs-overlay="dots">
 <div class="promo-container">
 <h1>Заголовок к слайду </h1>
 <p>Описание к слайду </p>
 <a href="ссылка для кнопки" type="button">Название для кнопки под слайдом</a>
 </div>
 <span class="mouse-scroll"></span>
</div>

<script type="text/javascript" src="/.s/t/1730/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="/.s/t/1730/jquery.zoomslider.min.js"></script>

<style>
#promo{height:90vh;background-image:url(/.s/t/1730/image_01.jpg);background-size:cover;margin-top:-2px;min-height:530px}
.promo-container{position:absolute;z-index:22;width:100%;max-width:940px;text-align:center;color:#fff;top:50%;left:50%;transform:translate(-50%,-50%);padding:0 40px}
.promo-container h1{line-height:1.2;font-size:4.2vw;color:#fff;margin:0}
.promo-container a[type="button"]{margin-top:20px;padding:12px 30px}
 .mouse-scroll{border:2px solid #fff;transition:none;text-align:inherit;margin:0;padding:0;width:32px;height:48px;border-radius:50px;display:block;position:absolute;bottom:40px;z-index:9;left:50%;transform:translateX(-50%)}
html.touch .mouse-scroll{display:none}
.mouse-scroll:after{content:'';width:4px;height:8px;position:absolute;left:50%;top:7px;border-radius:4px;background-color:#fff;margin-left:-2px;opacity:1;transform:translateY(0px) scaleY(1) scaleX(1) translateZ(0px);-webkit-transform:translateY(0px) scaleY(1) scaleX(1) translateZ(0px);animation:1.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s normal none infinite running scrollAnimation;-webkit-animation:1.5s cubic-bezier(0.68,-0.55,0.265,1.55) 0s normal none infinite scrollAnimation}
a[type="button"],input[type="button"]:hover,button:hover,[type="button"]:hover{background:#6277d9;border:2px solid #6277d9;color:#fff}
input[type="button"]:active,[type="button"]:active{background:#5669bf;border:2px solid #5669bf}
input[type="button"]:disabled,select:disabled,[type="button"]:disabled{opacity:.5}   
@media screen and (max-width:640px){
.zs-enabled .zs-slideshow .zs-bullets{left:0;width:100%;top:calc(100% - 15px)}
.promo-container h1{font-size:10vw}}
@media screen and (max-width:960px){.promo-container h1{font-size:8vw}}
</style>

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

Как в этот слайдер добавить больше 3-х слайдов

Выше в коде где описана часть по установке слайдера, вы можете увидеть такой код:

<div id="promo" data-zs-src='["/.s/t/1730/image_01.jpg", "/.s/t/1730/image_02.jpg", "/.s/t/1730/image_03.jpg"]' data-zs-overlay="dots">

к примеру если вам нужно не 3 слайда, а 6, данный код нужно изменить на подобный:

<div id="promo" data-zs-src='["/.s/t/1730/image_01.jpg", "/.s/t/1730/image_02.jpg", "/.s/t/1730/image_03.jpg", "/.s/t/1730/image_04.jpg", "/.s/t/1730/image_05.jpg", "/.s/t/1730/image_06.jpg"]' data-zs-overlay="dots">

надеюсь принцип добавления новых слайдов вы поняли, все достаточно просто.

Выше в коде есть ссылки на слайды:

1. /.s/t/1730/image_01.jpg
2. /.s/t/1730/image_02.jpg
3. /.s/t/1730/image_03.jpg

вместо этих ссылок нужно установить ссылки на свои слайды размерами 1920х1075.

Так же стоит добавить, чтобы данный слайдер у вас работал, вам нужно в панели управления сайтом в разделе Настройки » Общие настройки » Версия библиотеки jQuery, выберите версию 1.12.4 вместо 3.3.1 » Сохранить. При версии 3.3.1 слайдер этот работать не будет.

Вот и все, данный слайдер не требует большой инструкции и много текста как его установить. Если у вас возникнут сложности, спрашивайте в комментариях к материалу.