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

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

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

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

Первый слайдер

Это в большей части слайдер с статическим фоном для перелистывания блоков с заголовком который ссылается на нужную вам страницу сайта. В нужный вам глобальный блок установить код слайдера:

<section class="slider1">
 <div class="slider-wrapper">
 <div class="slide">
 <div class="photo">
 <img src="ссылка на слайд 1" alt="photo">
 </div>
 <div class="info-block">
 <div class="promo-img">
 <img src="ссылка на фото миниатюры" alt="promo">
 </div>
 <div class="text-block">
 <h1>Заголовок</h1>
 <p>Описание</p>
 <a href="ссылка для кнопки" class="info-btn">More</a>
 </div>
 </div>
 </div>
 <div class="slide">
 <div class="photo">
 <img src="ссылка на слайд 2" alt="photo">
 </div>
 <div class="info-block">
 <div class="promo-img">
 <img src="ссылка на фото миниатюры" alt="promo">
 </div>
 <div class="text-block">
 <h1>Заголовок</h1>
 <p>Описание</p>
 <a href="ссылка для кнопки" class="info-btn">More</a>
 </div>
 </div>
 </div>
 <div class="slide">
 <div class="photo">
 <img src="ссылка на слайд 3" alt="photo">
 </div>
 <div class="info-block">
 <div class="promo-img">
 <img src="ссылка на фото миниатюры" alt="promo">
 </div>
 <div class="text-block">
 <h1>Заголовок</h1>
 <p>Описание</p>
 <a href="ссылка для кнопки" class="info-btn">More</a>
 </div>
 </div>
 </div>
 </div>
 </section>
<script src="/.s/t/1801/jquery.bxslider.min.js"></script>
 <script>
 $(function () {
 $('.slider-wrapper').bxSlider({
 useCSS: false,
 auto: true,
 autoStart: true,
 nextText: 'keyboard_arrow_right',
 prevText: 'keyboard_arrow_left',
 pager: false
 });
 $('.carousel-wrapper').bxSlider({
 useCSS: false,
 nextText: 'keyboard_arrow_right',
 prevText: 'keyboard_arrow_left',
 minSlides: 5,
 maxSlides: 5,
 slideWidth: 192,
 slideMargin: 5,
 autoStart: true,
 pager: false
 });
 });
 </script>

Второй слайдер

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

 <section class="slider2">
 <div class="carousel-wrapper">
 <div class="slide-c">
 <div class="img-wrapp">
 <div class="under-img"><img src="ссылка на слайд 1" alt="cover"></div>
 <div class="main-img"><img src="ссылка на слайд 1" alt="cover"></div>
 </div>
 <div class="title">
 <a href="ссылка">Заголовок</a>
 <p>Описание</p>
 </div>
 </div>
 <div class="slide-c">
 <div class="img-wrapp">
 <div class="under-img"><img src="ссылка на слайд 2" alt="cover"></div>
 <div class="main-img"><img src="ссылка на слайд 2" alt="cover"></div>
 </div>
 <div class="title">
 <a href="ссылка">Заголовок</a>
 <p>Описание</p>
 </div>
 </div>
 <div class="slide-c">
 <div class="img-wrapp">
 <div class="under-img"><img src="ссылка на слайд 3" alt="cover"></div>
 <div class="main-img"><img src="ссылка на слайд 3" alt="cover"></div>
 </div>
 <div class="title">
 <a href="ссылка">Заголовок</a>
 <p>Описание</p>
 </div>
 </div>
 <div class="slide-c">
 <div class="img-wrapp">
 <div class="under-img"><img src="ссылка на слайд 4" alt="cover"></div>
 <div class="main-img"><img src="ссылка на слайд 4" alt="cover"></div>
 </div>
 <div class="title">
 <a href="ссылка">Заголовок</a>
 <p>Описание</p>
 </div>
 </div>
 <div class="slide-c">
 <div class="img-wrapp">
 <div class="under-img"><img src="ссылка на слайд 5" alt="cover"></div>
 <div class="main-img"><img src="ссылка на слайд 5" alt="cover"></div>
 </div>
 <div class="title">
 <a href="ссылка">Заголовок</a>
 <p>Описание</p>
 </div>
 </div>
 <div class="slide-c">
 <div class="img-wrapp">
 <div class="under-img"><img src="ссылка на слайд 6" alt="cover"></div>
 <div class="main-img"><img src="ссылка на слайд 6" alt="cover"></div>
 </div>
 <div class="title">
 <a href="ссылка">Заголовок</a>
 <p>Описание</p>
 </div>
 </div>
 <div class="slide-c">
 <div class="img-wrapp">
 <div class="under-img"><img src="ссылка на слайд 7" alt="cover"></div>
 <div class="main-img"><img src="ссылка на слайд 7" alt="cover"></div>
 </div>
 <div class="title">
 <a href="ссылка">Заголовок</a>
 <p>Описание</p>
 </div>
 </div>
 <div class="slide-c">
 <div class="img-wrapp">
 <div class="under-img"><img src="ссылка на слайд 8" alt="cover"></div>
 <div class="main-img"><img src="ссылка на слайд 8" alt="cover"></div>
 </div>
 <div class="title">
 <a href="ссылка">Заголовок</a>
 <p>Описание</p>
 </div>
 </div>
 <div class="slide-c">
 <div class="img-wrapp">
 <div class="under-img"><img src="ссылка на слайд 9" alt="cover"></div>
 <div class="main-img"><img src="ссылка на слайд 9" alt="cover"></div>
 </div>
 <div class="title">
 <a href="ссылка">Заголовок</a>
 <p>Описание</p>
 </div>
 </div>
 <div class="slide-c">
 <div class="img-wrapp">
 <div class="under-img"><img src="ссылка на слайд 10" alt="cover"></div>
 <div class="main-img"><img src="ссылка на слайд 10" alt="cover"></div>
 </div>
 <div class="title">
 <a href="ссылка">Заголовок</a>
 <p>Описание</p>
 </div>
 </div>
 </div>
 </section>

 <script src="/.s/t/1801/jquery.bxslider.min.js"></script>
 <script>
 $(function () {
 $('.slider-wrapper').bxSlider({
 useCSS: false,
 auto: true,
 autoStart: true,
 nextText: 'keyboard_arrow_right',
 prevText: 'keyboard_arrow_left',
 pager: false
 });
 $('.carousel-wrapper').bxSlider({
 useCSS: false,
 nextText: 'keyboard_arrow_right',
 prevText: 'keyboard_arrow_left',
 minSlides: 5,
 maxSlides: 5,
 slideWidth: 192,
 slideMargin: 5,
 autoStart: true,
 pager: false
 });
 });
 </script>

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

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

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.slider2{padding:50px 40px;background:#fff;max-height:450px}
.slider2 .bx-wrapper{margin:0 auto}
.slider2 .slide-c{position:relative}
.slider2 .title a:hover{color:#ec174f}
.slider2 .bx-pager.bx-default-pager{bottom:-25px}
.slider-wrapper{color:#fff}
.slider2 a.bx-prev{left:-50px}
.slider2 a.bx-next{right:-50px}
.slider2 .img-wrapp{position:relative;padding:20px 15px}
.under-img{position:absolute;padding:30px 15px;top:0;left:0;filter:blur(7px);z-index:0}
.main-img{position:relative;height:100%}
.main-img img{-webkit-transition:filter .35s,-webkit-transform .35s;transition:filter .35s,transform .35s;filter:brightness(1)}
.main-img:hover img{filter:brightness(0.8)}
.main-img::before{position:absolute;top:10px;right:10px;bottom:10px;pointer-events:none;left:10px;z-index:10;border:1px solid rgba(255,255,255,.4);content:'';-webkit-transform:scale(1.1);transform:scale(1.1)}
.main-img::before{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
.main-img:hover::before{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
.slider2 .img-wrapp .main-img img{position:relative;z-index:2;max-width:165px}
.title{padding:0 15px;text-align:center}
.title a{color:#000;font-weight:900;font-size:15px}
.title p{color:#777;font-size:12px;margin:5px 0}
.slide .photo img,.slider2 .img-wrapp img{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover}
.slide{max-height:50vw}
.info-block{padding:20px 40px 20px 80px;position:absolute;top:0;left:0;width:50%;height:100%;background-image:linear-gradient(to top,rgba(4,6,6,0) 0,rgba(4,6,6,0.9) 100%);display:flex;align-items:center}
.text-block{padding-left:30px;width:65%}
.promo-img{width:35%}
.info-block h1{line-height:1.2;margin:10px auto;color:#fff;font-size:29px;font-weight:500}
.info-block p{color:#fff;font-size:15px;line-height:1.6;margin:5px auto}
.slider-wrapper .info-btn{display:inline-block;background-color:#ec174f;padding:9px 30px;-webkit-transition:all .3s;transition:all .3s;margin-top:10px;color:#fff;font-size:16px;letter-spacing:.56px}
.slider-wrapper .info-btn:hover{background-color:#ff5991;text-decoration:none}
.slider-wrapper .info-btn:active{background-color:#c2185b}
.slide .photo img{border:0;max-width:100%;min-height:250px;-o-object-position:center;object-position:center}
.slide .photo{-webkit-filter:brightness(.8);filter:brightness(.8)}
.slider2 .bx-controls-direction{top:125px}
.bx-wrapper,.main-menu li,.main-menu li ul>li{position:relative}
.bx-controls-direction{position:absolute;top:calc(50% - 24px);width:100%}
.bx-controls-direction a{position:absolute;font-family:'Material Icons';font-size:30px;padding:0 7px;border-radius:50%;color:#000;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{background:rgba(0,0,0,.5);text-decoration:none}
.slider1 a.bx-prev,.slider1 a.bx-next{background:rgba(0,0,0,.5);border-radius:50%}
a.bx-prev{left:15px}
a.bx-next{right:15px}

@media only screen and (max-width:1240px){
.info-block{width:100%;padding:20px 80px}
.slider2 a.bx-next{right:-30px}
.slider2 a.bx-prev{left:-30px}
}

@media screen and (max-width:960px){
.slider2{border-bottom:0}
}

@media only screen and (max-width:768px){
.info-block h1{font-size:20px;margin:0}
.text-block{padding:0 30px;width:100%}
.slider2{padding:15px 15px 30px}
.slider2 a.bx-next{right:-15px}
.slider2 a.bx-prev{left:-15px}
.bx-controls-direction a{padding:0;line-height:1}
}

@media screen and (max-width:640px){
.info-block p{display:none}
.slider2 .slide-c{width:140px!important;margin-right:10px!important}
.slider2 .img-wrapp{width:142px;height:210px}
.slider2 .bx-controls-direction{top:80px}
.slider2{padding:50px 15px 30px}
.info-block{text-align:center}
}

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

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

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

Похожие материалы:
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar
0
Алексей
Добрый день.!
а если я использую (устанавливаю) только Первый Слайдер а второй Нет (он мне НЕнужен)..
то стили CSS НЕнужно ставить к нему.? потому что я вижу, что в стилях везде фигурирует только "slider2"
avatar
0
Алексей
а как можно уменьшить высоту Первого слайдера.?
потому что картинка занимает весь экран (чего бы НЕхотелось), даже при загрузке рекомендованных размеров картинки..
avatar
0
Уточните ссылку на сайт где вы установили слайдер, посмотрим как уменьшить высоту.
Предложить публикацию Услуги
Категории
    SSL [11]
    Материалы по теме SSL как для сайтов так и для вашего мобильного телефона.
    Интернет [21]
    Материалы по теме "Интернет" и все что с ним связано.
    Дизайн [10]
    Материалы по теме дизайна, прочие решения и улучшения в работе дизайна сайта, добавление полезного функционала или скриптов которые улучшают функционал сайта.
    SEO [20]
    В данном разделе вы найдете полезные решения в плане SEO, и статьи по настройке разных типов микроразметок для вашего сайта.
    uCoz [95]
    В данной категории мы будем рассматривать разные решения для сайтов которые созданы в конструкторе сайтов Юкоз (uCoz).
    Мобильные [6]
    Материалы которые помогут еще более обширно использовать свой смартфон и использовать все возможности Android.
    Игры [7]
    Статьи об играх. В большей степени различные решения и советы по игре Fortnite.
    Услуги [6]
    Материалы которые связаны с услугами которые вам могут предоставить (помочь с сайтом или установить SSL сертификат, отредактировать базы данных и прочее).
Читать позже
Популярные записи
При копировании материалов ссылка на источник обязательна. ©2014-2022