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

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

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

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

 <section class="slider">
 <div class="slider-wrapper">
 <div class="slide">
 <div class="info-block">
 <div class="text-block">
 <h1>Заголовок</h1>
 <p>Описание</p>
 <a href="ссылка для кнопки" class="info-btn">More</a>
 </div>
 <div class="promo-img">
 <img src="ссылка на слайд 1" alt="promo">
 </div>
 </div>
 </div>
 <div class="slide">
 <div class="info-block">
 <div class="text-block">
 <h1>Заголовок</h1>
 <p>Описание</p>
 <a href="ссылка для кнопки" class="info-btn">More</a>
 </div>
 <div class="promo-img">
 <img src="ссылка на слайд 2" alt="promo">
 </div>
 </div>
 </div>
 <div class="slide">
 <div class="info-block">
 <div class="text-block">
 <h1>Заголовок</h1>
 <p>Описание</p>
 <a href="ссылка для кнопки" class="info-btn">More</a>
 </div>
 <div class="promo-img">
 <img src="ссылка на слайд 3" alt="promo">
 </div>
 </div>
 </div>
 </div>
 <div id="bx-pager">
 <a data-slide-index="0" href=""><img src="ссылка на слайд 1" /></a>
 <a data-slide-index="1" href=""><img src="ссылка на слайд 2" /></a>
 <a data-slide-index="2" href=""><img src="ссылка на слайд 3" /></a>
 </div>
 </section>
 <script src="/.s/t/1804/jquery.bxslider.min.js"></script>
 <script>
 $(function () {
 $('.slider-wrapper').bxSlider({
 useCSS: false,
 mode: 'fade',
 auto: true,
 autoStart: false,
 infiniteLoop: true,
 nextText: '<img src="/.s/t/1804/arrow.svg" alt="arrow">',
 prevText: '<img src="/.s/t/1804/arrow.svg" alt="arrow">',
 pagerCustom: '#bx-pager'
 });
 });
 </script>

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

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

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

.slide{max-height:50vw}
.info-block{display:flex;align-items:center;padding-right:30px}
.text-block{padding-right:30px;width:50%}
.promo-img{width:50%}
.promo-img img{height:100%;object-fit:cover;max-width:570px;width:100%;border-radius:50%}
.info-block h1{line-height:1.2;margin:10px auto;color:#a19564;font-weight:400;font-size:49px}
.info-block p{margin:5px auto;color:#c5c7d2;font-size:18px;line-height:1.44}
.slider{max-width:1240px;padding:30px 20px;position:relative;margin:0 auto}
.slider .slider-wrapper .info-btn,a.info-btn{display:inline-block;border:1px solid #a19564;padding:9px 30px;-webkit-transition:all .3s;transition:all .3s;margin-top:10px;color:#fff;font-size:18px}
.slider .slider-wrapper .info-btn:hover,a.info-btn:hover{border:1px solid #a19564;background-color:#beb179}
.slider .slider-wrapper .info-btn:active,a.info-btn:active{background-color:#958959}
a.info-btn {color: #a59a6a!important;}
a.info-btn:hover {color: #fff!important;}
a.bx-next, a.bx-prev,a.bx-next:hover, a.bx-prev:hover {border:0!important;background-color: transparent;}    
.slider .bx-wrapper{position:relative}
.bx-controls-direction{position:absolute;bottom:160px;width:56%;right:0;z-index:99}
.bx-controls-direction a{position:absolute;font-family:'Material Icons';font-size:30px;padding:0 7px;border-radius:50%;color:#958959;z-index:2;-webkit-transition:all .3s;transition:all .3s;text-rendering:optimizeLegibility;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';ms-font-feature-settings:"liga"}
.bx-controls-direction a:hover{text-decoration:none}
.slider a.bx-next img{transform:rotate(180deg)}
a.bx-prev{left:15px}
a.bx-next{right:15px}
#bx-pager{position:absolute;bottom:75px;right:95px;text-align:center;z-index:99;}
#bx-pager a{display:none}
#bx-pager a.active+a{display:block}
#bx-pager .next-active{display:block}
div#bx-pager img{width:120px;filter:grayscale(100%);border-radius:50%;height:120px;object-fit:cover}    
div#bx-pager{width:inherit!important;padding-right:inherit!important;display:inherit!important;justify-content:inherit!important;}
@media only screen and (max-width:1240px){
    .info-block{width:100%}
    .bx-controls-direction{bottom:50px}
}
@media screen and (max-width:960px){
    .bx-controls-direction{bottom:20px}
    #bx-pager{display:none}
}
@media only screen and (max-width:768px){
    .info-block h1{font-size:20px;margin:0}
    .text-block{width:70%;padding:0}
    .promo-img{width:30%}
    .bx-controls-direction{width:35%}
}
@media screen and (max-width:640px){
    .info-block p{display:none}
    .bx-controls-direction{width:100%;top:40%}
    .info-block{padding:0 20px}
    .info-block{text-align:center;flex-direction:column-reverse;padding:0}
    .slider{padding:20px 10px}
    a.bx-prev{left:0}
    a.bx-next{right:0}
    .slider .bx-controls-direction a img{max-width:25px}
    .bx-viewport{min-height:230px}
}
@media only screen and (max-width:360px){
    .info-block{width:100%;padding:10px 10px 30px}
}

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