» »

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

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

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

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

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

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

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