» »

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

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

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

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

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

Слайдер на CSS для сайта на чистом CSS

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

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script>

HTML

Код
<div class="bxslider">
  <div class="slide"><img src="http://zornet.ru/_fr/56/2945300.jpg" /></div>
  <div class="slide"><img src="http://zornet.ru/_fr/56/8891161.jpg" /></div>
  <div class="slide"><img src="http://zornet.ru/_fr/56/7132713.jpg" /></div>
  <div class="slide"><img src="http://zornet.ru/_fr/56/3660613.jpg" /></div>
  <div class="slide"><img src="http://zornet.ru/_fr/56/7598038.jpg" /></div>
  <div class="slide"><img src="http://zornet.ru/_fr/56/2859976.jpg" /></div>
</div>

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;
}

JS

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

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

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

Демонстрация
2019-10-02 Загрузок: 1 Просмотров: 243 Комментарий: (0)

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

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

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

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