ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивный слайд-шоу с выводом слайдов

Адаптивный слайд-шоу с выводом слайдов

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

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

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

Вид при уменьшение экрана, где автоматически каркас меньше по структуре становится.

Устанавливаем в HEAD:

Код

HTML

Код

CSS

Код

div.bxslider {
  margin-left: 25%;
  margin-right: 25%;
}

/** ПЕРЕМЕННЫЕ
===================================*/
/** СБРОС И СХЕМА
===================================*/
.bx-wrapper {
  position: relative;
  margin-bottom: 60px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {

  -webkit-transform: translatez(0);
}
/** ТЕМЫ
===================================*/
.bx-wrapper {
  -moz-box-shadow: 0 0 5px #bdbaba;
  -webkit-box-shadow: 0 0 5px #bdbaba;
  box-shadow: 0 0 5px #bdbaba;
  border: 5px solid #fbfafa;
  background: #fbfafa;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* ПОГРУЗЧИК */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('http://zornet.ru/ABVUN/Aba/detunis/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* ПЕЙДЖЕР */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #5a5757;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #5a5757;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #080808;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* УПРАВЛЕНИЕ НАПРАВЛЕНИЯМИ СЛЕДУЮЩАЯ / ПРЕДЫДУЩАЯ */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('http://zornet.ru/ABVUN/Aba/detunis/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('http://zornet.ru/ABVUN/Aba/detunis/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* АВТОМАТИЧЕСКОЕ УПРАВЛЕНИЕ ПУСК / СТОП */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('http://zornet.ru/ABVUN/Aba/detunis/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('http://zornet.ru/ABVUN/Aba/detunis/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* ПЕЙДЖЕР С АВТО-УПРАВЛЕНИЕМ ГИБРИДНАЯ СХЕМА */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* ИЗОБРАЖЕНИЙ */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #5a5757;
  background: rgba(71, 71, 71, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}

Код

$(document).ready(function(){
  $('.bxslider').bxSlider({
  slideWidth: 900,
  minSlides: 2,
  maxSlides: 3,
  moveSlides: 1,
  pager: false,
  auto: true
  });
});

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

Где можно самостоятельно добавить название, что может быть более эффективным, чем слайдер, который станет выстраивать картинки с наложением текстом.

Демонстрация

02 Октября 2019 Загрузок: 3 Просмотров: 973 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0