Слайдер с шаблона №1810 для uCoz
 | |
| Это стандартный слайдер в адаптивном виде от шаблона под номером 1810, который идет по умолчанию, что теперь веб мастер может поставить на сайт. Ведь иногда бывает так, что от конструктора идет шаблон по своему дизайн отлично сделанный, но вот слайдер по стилистике не сильно впечатляет или вообще не предусмотрен. Теперь у вас появилась возможность установить слайдеры, что предоставляет система. Если ваш сайт на uCoz, то вам только остается выбрать место под слайд и установить его. Ведь установка здесь не сложная и отличается от других. Также есть возможность выставить несколько слайдов, если говорить про этот, но здесь идет карусель. Где по левую сторону можно разместить как название или описание, по правую сторону идет тематическое изображение. Приступаем к установке: Для начало нужно зайти в админ панель и пройти в глобальный блок, под названием "Верхняя часть сайта", также можно задействовать блок Promo и Slider, который создаем под установку, где через эти блоки выводим основу. Как создали, то копируем ниже код слайда и устанавливаем в блок с последующим сохранением. Так реально выглядит слайдер, который появится после полной установки:  Установка: HTML Код <section class="slider"> <div class="slider-wrapper"> <div class="slide"> <div class="photo"> <img src="http://zornet.ru/_fr/56/9951978.jpg" alt="ZORNET.RU"> </div> <div class="text-block"> <div> <h1>ZorNet - портал для вебмастера №1</h1> <a href="http://zornet.ru/load/81" class="info-btn">Переход</a> </div> </div> </div> <div class="slide"> <div class="photo"> <img src="http://zornet.ru/_fr/56/7972691.jpg" alt="скрипты для сайта"> </div> <div class="text-block"> <div> <h1>ZorNet - портал для вебмастера №2</h1> <a href="http://zornet.ru/load/146" class="info-btn">Прочитайте больше</a> </div> </div> </div> <div class="slide"> <div class="photo"> <img src="http://zornet.ru/_fr/56/8767948.jpg" alt="Шаблоны для сайта"> </div> <div class="text-block"> <div> <h1>ZorNet - портал для вебмастера №3</h1> <a href="http://zornet.ru/load/145" class="info-btn">Перейти</a> </div> </div> </div> </div> </section> <script src="/.s/t/1810/jquery.bxslider.min.js"></script> <script> $(function () { $('.slider-wrapper').bxSlider({ useCSS: false, auto: true, autoStart: true, nextText: 'keyboard_arrow_right', prevText: 'keyboard_arrow_left', controls: false }); }); </script> CSS Код .slider-wrapper{background-color:#3e4b7d;color:#fff} .slide .photo img{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover} .text-block{position:absolute;top:0;left:0;width:450px;height:100%;padding:30px;box-shadow:0 1px 3px rgba(1,1,1,0.3);background-color:#2196f3;display:flex;align-items:center} .text-block h1{color:#fafafa;font-family:"Istok Web";font-size:26px;font-weight:400;line-height:1.38} .slider{max-width:1240px;margin:0 auto;overflow:hidden;position:relative;max-height:460px} .slider-wrapper .info-btn{display:none;background-color:#fff;padding:12px 35px;border-radius:30px;-webkit-transition:all .3s;transition:all .3s;margin-top:10px;color:#2196f3;font-size:18px} .slider-wrapper .info-btn:hover{background-color:#1fc4ff;text-decoration:none} .slider-wrapper .info-btn:active{background-color:#03a2da} .slide .photo img{border:0;max-width:100%;-o-object-position:center;object-position:center} .bx-wrapper {position:relative} .bx-pager.bx-default-pager{position:absolute;bottom:15px;-webkit-transform:translateX(50%);transform:translateX(50%);right:50%;text-align:center} .bx-pager.bx-default-pager>div{margin:2px 8px;display:inline-block} .bx-pager-link{text-indent:-1000px;display:inline-block;transition:all .3s;width:10px;height:10px;transform:scale(.8);border-radius:50%;overflow:hidden;background-color:#2196f3} .bx-pager-link.active,.bx-pager-link:hover{transform:scale(1.2)} @media screen and (max-width:960px){ .text-block{padding:20px;left:50%;top:45%;transform:translate(-50%,-50%);height:70%} .bx-pager.bx-default-pager{bottom:-30px} .slider-wrapper .info-btn{padding:10px 20px;font-size:16px} } @media only screen and (max-width:768px){ .slide{max-height:40vw} .slider-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column} .text-block{padding:20px 20px 40px;width:90%} .text-block h1{font-size:20px;margin:0} } @media screen and (max-width:640px){ .bx-pager.bx-default-pager{bottom:-35px} .text-block{padding:15px} } @media only screen and (max-width:480px){ .text-block h1{font-size:16px} } @media only screen and (max-width:360px){ .text-block{top:50%;padding:10px} .slider-wrapper .info-btn{font-size:14px} } Здесь нужно подчеркнуть, что только этот слайд корректно работает на конструкторе uCoz, ведь изначально его создавали под эту систему, что теперь можно поставить или сменить на тот вид, который больше вам нравится. Источник: blogas.info | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
