» »

Слайдер с шаблона №1810 для uCoz

Слайдер с шаблона №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
2019-04-09 Просмотров: 342 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
Kosten
Kosten 2019-04-10 17:171
0
Кто знает, разместил слайдер от стандартного шаблона, по источнику можно найти все слайды. Но потом решил проверить, все нормально и корректно смотрится, вот только не листает, в чем может быть проблема. Возможно такое, что ставил на совершенно другой шаблон, хотя он системный и должен работать, видать что то по установки не хватает.
-SAM-
-SAM- 2019-04-10 22:492
0
Поставил был на тестовый - листает всё у меня. Если у вас не работает, то может действительно какой конфликт (например, с версией jquery на сайте).
Что материала касается: нужно еще расписывать, хотя на сайте-источнике этого не сделали тоже (мол, кого интересует - спрашивать в комментариях). Новичку нужно разбираться в настройке, что параметры там идут в переменных скрипта, а также, как пример - не ясно как скорость слайдов изменить (по умолчанию стоит авто-запуск, а также нет кнопок на управление - типо след.\пред. слайд, остановка... и, как мне кажется, очень быстро переход идёт, если сделать какую-то инфу для вывода - её и прочитать не успеют толком). Листинг может быть осуществлён кнопками влево\вправо на клавиатуре еще.
bxSlider - в поисковик, больше инфы будет (описание, установка, настройка, примеры оформления). Что делается привязка к uCoz - это не важно, просто на него залили библиотеку.
Kosten
Kosten 2019-04-11 00:443
0
Здесь вероятно библиотека, хотя менял ее, и также, все корректно устанавливается, но как на этом слайде, переходов нет. То поставил другой, то там видно по кнопкам, что в низу, что меняются, это производится переход на новое изображение, но по существу его в реальности не происходит. Что решил еще попробовать, где все нормально работает, что на сайте его разместил.

Но тут возник другой вопрос, который заключается в том, что можно сделать так, чтоб и на другие сайты поставить, вопрос теоретический.
avatar