ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Слайдер для сайта с шаблона №1718

Слайдер для сайта с шаблона №1718

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

По правую и левую сторону идут переключатели, здесь нужно заметить, что он будет корректно работать на системных шаблонах, а точнее на площадке uCoz. Также есть в самом низу несколько кнопок, которые аналогично отвечают за смену изображений.

Был проверен на работоспособность, где на темном формате и также на светлом портале, он на любой гамме цвета отлично отображается. Для этого с ним идет CSS, где можно все самостоятельно выставить по палитре цвета, чтоб влился как родной элемент функций на сайте.

Вот как раз вид обзора со светлого портала:

Слайдер на CSS для сайта

Здесь уже идет на темном формате интернет ресурса:

Адаптивный слайдер сайта

И остается мобильная версия, где автоматически все срабатывает:

Мобильный слайдер для сайта

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

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

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



HTML

Код
<section class="slider2">
  <div class="carousel-wrapper">
  <div class="slide-c">  
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/7763355.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/1090069.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/9813158.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/1707551.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/5276259.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/1134855.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/2652672.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/7369685.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/9883165.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/3297417.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/9581592.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  <div class="slide-c">
  <div class="img-wrapp"><img src="http://zornet.ru/_fr/79/3525568.jpg" alt="cover"></div>
  <div class="title"><a href="ссылка">Название темы</a></div>
  </div>
  </div>
  </section>
  <script src="/.s/t/1718/jquery.bxslider.min.js"></script>
  <script>
  $(function () {
  $('.slider-wrapper').bxSlider({
  useCSS: false,
  nextText: 'keyboard_arrow_right',
  prevText: 'keyboard_arrow_left'
  });
  $('.carousel-wrapper').bxSlider({
  useCSS: false,
  nextText: 'keyboard_arrow_right',
  prevText: 'keyboard_arrow_left',
  minSlides: 2,
  maxSlides: 7,
  slideWidth: 138,
  slideMargin: 8,
  autoStart: true,
  autoHover: true
  });
  });
  </script>

CSS

Код
<style>  
.slider2 a{color:#d3d4d6}
.slider2 {
  padding: 25px 40px 50px;
  background: #141f2d;
}
.slider2 .bx-wrapper{margin:0 auto}
.slider2 .title{text-align:center; line-height:1.3}
.slider2 .title a:hover{color:#ffbb28}
.slider2 .bx-pager.bx-default-pager{bottom:-25px}
.slider-wrapper{background-color:#3e4b7d; color:#fff}
.slider2 a.bx-prev {
  left: -40px;
  margin-top: 18px;
}
.slider2 a.bx-next {
  right: -40px;
  margin-top: 18px;
}
.slider2 .img-wrapp{width:135px; height:200px; margin-bottom:5px}
.slide .photo img, .slider2 .img-wrapp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #797b80;
  border-radius: 2px;
}
.slide{max-height:30vw}
.text-block{padding:20px 40px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; text-align:center}
.text-block h1{font-size:28px; font-weight:500; line-height:1.5; margin:10px 0}
.text-block p{font-size:14px; line-height:1.5; margin:5px 0}
.slider-wrapper .info-btn{display:inline-block; color:#1d2538; font-size:14px; line-height:1.4; background-color:#ffbb28; padding:8px 25px; transition:all .3s; margin-top:10px; font-weight:500}
.slider-wrapper .info-btn:hover{background-color:#ffd438; text-decoration:none}
.slider-wrapper .info-btn:active{background-color:#e5a225}
.slide .photo img{border:0; max-width:100%; object-position:center}
.slide .photo{filter:brightness(.7)}
.slider2 .bx-controls-direction{top:64px}
.bx-wrapper, .main-menu li, .main-menu li ul>li{position:relative}
.bx-wrapper {
  position: relative;
  margin-bottom: 60px;
  padding: 0;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  border: 1px solid rgba(255, 255, 255, 0);
}  
.bx-controls-direction{position:absolute; top:calc(50% - 24px); width:100%}
.bx-controls-direction a{position:absolute; font-family:'Material Icons'; font-size:48px; color:rgba(255,255,255,.5); opacity:.5; text-rendering:optimizeLegibility; font-feature-settings:'liga'; ms-font-feature-settings:'liga'}
.bx-controls-direction a:hover{color:#ffbb28; opacity:1; text-decoration:none}
a.bx-prev{left:0}
a.bx-next{right:0}
.bx-pager.bx-default-pager{position:absolute; bottom:25px; width:100%; text-align:center}
.bx-pager.bx-default-pager>div{display:inline-block; margin:0 5px}
.bx-pager-link{text-indent:-1000px; display:inline-block; width:8px; height:8px; border-radius:4px; background-color:#7181a7; overflow:hidden}
.bx-pager-link:hover, .navItemMore:hover .nav_menu_toggler span{background-color:#ffbb28}  

@media only screen and (max-width:768px){
  .slide{max-height:40vw}
  .slider-wrapper{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){
  .text-block p{display:none}
}
@media only screen and (max-width:360px){
  .slider2{padding:15px 20px 30px}
  .bx-controls-direction{display:none}
  .text-block{width:100%; padding:10px 10px 30px}
  .bx-pager.bx-default-pager{bottom:10px}
  .slider2 .bx-pager.bx-default-pager{bottom:-19px}
}
  </style>

Теперь веб разработчик может сделать свой сайт более информированным и функциональным, ведь под каждым изображением идет название. Что в нашем случай все делается в ручном режиме, а это устанавливаем картинки, также ставим ссылки на переход.

Источник: blogas.info
10 Апреля 2019 Просмотров: 2089 Комментариев: (16)

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

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

Оставь свой отзыв

Комментарии: 16
-SAM-
-SAM- 11 Апреля 2019 01:281
0
Цитата Kosten ()
Очередной системный слайдер в одну колонку от конструктора uCoz [...] здесь нужно заметить, что он будет корректно работать на системных шаблонах, а точнее на площадке uCoz.
Тут нет привязки к системе, о чём уже изложил здесь. Просто сняты стили с этого шаблона, библиотека bxSlider залита на серверы uCoz. Материал описывает установку под систему uCoz и только, а привязки к ней - нет, кто ставит на другую площадку. Если сайт на uCoz - библиотеку не нужно заливать (почти как в случае с jQuery), вот и всё. Оформление слайдера, его настройка - это может быть самостоятельно сделано также, как и можно взять стили слайдера от системного шаблона этого - поставить на другую площадку. И что пишится:
Цитата Kosten ()
Ведь слайдер настроен, а если стили разместить в CSS, то здесь есть большая вероятность, что может произойти конфликт между стилями, что оставил их в блоке.
Это то же самое, что начинать переписывать то, в чём не разбираетесь (тогда как понимающий прочитав это сразу скажет - не есть истина). //UPD.: ниже еще написал - тут таки под этот номер шаблона и заточено всё.
Цитата Kosten ()
Что в нашем случай все делается в ручном режиме, а это устанавливаем картинки, также ставим ссылки на переход.
Слайдеры часто в связке с информером делают, что так динамическая информация идёт (то есть в ручном режиме не правиться код, просто подключается раз). То есть как конечный пользователь посчитает нужным сделать, исходя из назначения слайдера.
Kosten
Kosten 11 Апреля 2019 02:122
0
Здесь если автономным его делать, то нужно изначально вытащить стили под кнопки, которые нашел и хотел закрепить к основной стилистике, но здесь как заметили, что направление идет на конструктор, что автоматически появятся. Но как уже писал, что некоторые кнопки не появляются, возможно на некоторых слайдах, где сайта материал берется не указаны все ссылки CSS.

Вот по этой причине пришлось идти по по простому пути, вот этот слайдер мне изначально хотелось разместить на сайте, так как посчитал его актуальным. А вот этот слайдер был размещен на сайте по другой причине, он просто работает.
-SAM-
-SAM- 11 Апреля 2019 02:223
0
Просто этот слайдер собирать нужно под себя через конструктор (почти как и в случае с HighSlide). Это и есть самый простой путь, а не делать привязки к шаблонам, которые могут даже не стоять на сайтах у людей.
Если кнопки не видны - убираться из кода физически могут, могут делаться невидимыми через css и есть соответствующая настройка в самом js (переменная).
Kosten
Kosten 11 Апреля 2019 02:404
0
В большинстве не могу понять как вывести кнопки переключение, кажется все выставил, а вместо кнопок название.

Пример http://forums.ucoz.com/
Kosten
Kosten 11 Апреля 2019 02:445
0
Все спасибо разобрался, не когда не подумал, что так знаки выводятся по ссылке.

Код
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-SAM-
-SAM- 11 Апреля 2019 02:586
0
В общем, uCoz сконфигурировал эту библиотеку под отдельно взятый шаблон свой. Чтобы всё работало - нужно ставить на шаблон того же номера, системный (и явно же, что в большинстве случаев под себя переписывают и полностью на том, что система изначально отдала - после не сидят). Там даже в пути библиотеки фигурирует номер шаблона (хотя файл и версия - одна и та же, как понял, что идентичные).
То есть не предполагается то, что кто-то будет вытаскивать и ставить с одного шаблона на другой, или вовсе на другую площадку. Больше инфы по запросу настройка bxSlider.
Kosten
Kosten 11 Апреля 2019 03:067
+1
Все таки их нужно сильно еще подгонять, это не просто скопировал и поставил, настройка, и как оказалось не все ссылки представлены для вывод кнопок к примеру.
uNick
uNick 22 Июня 2022 18:368
-1
У меня такой вопрос почему при нажатии на ссылку нет никаких действий.


Сайт: www.gruzok.site

Помогите или подскажите почему???
Kosten
Kosten 22 Июня 2022 20:409
0
Не нашел данного слайда на сайте. А если говорить про сам слайдер, то он сейчас установлен на одном сайте и полностью работает.

PS - не одна функция не менялась, все как здесь в материале по установке.
Kosten
Kosten 22 Июня 2022 20:4410
0
Как вижу, у вас все работает корректно по слайдеру, и автоматически показ и ручная прокрутка.

uNick
uNick 22 Июня 2022 21:1111
0
А почему при нажатие на картинку должно переходить на материал он тупо неагирует
Gerat
Gerat 23 Июня 2022 02:1512
0
Возможно резчики реклам у вас подключены, они стали сильно вмешиваться функционал сайта. Хоть по идее там должен оператор за данный перевод отвечать.
uNick
uNick 23 Июня 2022 09:4713
0
На другой сайт ставлю такая же ситуация, а вот выбираю стандартный шаблон откуда взят слайдер там все ровно
Kosten
Kosten 23 Июня 2022 14:0214
0
По стандартному слайдеру прочтите в комментариях, что написал -SAM-, где все подробно описано.
uNick
uNick 24 Июня 2022 12:4415
0
Лазил по интернету долго искал смотрел есть легкий способ оказывается прописать функцию и заработает
Код
touchEnabled: false
Kosten
Kosten 24 Июня 2022 14:0816
0
Что сказать, сами решили проблему, и думаю многим другим помогли.
avatar