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

Адаптивный слайдер bxSlider для контента

Отличное решение адаптивного слайдера, который включает галерею для различного показа мультимедийного контента, включая различные изображения. Если кратко и понятно, то FlexSlider является полностью адаптивный и надежно реагирующий плагин-слайдер при помощи jQuery. Также этот плагин поддерживает устройства iOS и Android, предоставляя встроенные команды сенсорного экрана, такие как сенсорная навигация. Где отлично отображается на мобильных аппаратах, так как он полностью адаптивен для корректного показа.

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

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

Вид с мобильных аппаратов, что проверенно с онлайн сервис:

Адаптивный и отзывчивый слайдер на CSS для сайта

Установка:

HEAD

Код

HTML

Код

<main class="main">
  <section class="loudaakcon">
  <div class="slider">
  <div class="asepons_avenakuda">
  
  <figure class="asadipisc_ngelopada slide">
  <div class="savenp_sumakcon">
  <a href="#"><img src="http://zornet.ru/_fr/56/1625717.jpg" alt="коды и скрипты" /></a>
  </div>
  <figcaption class="sumselopas_udaakcon">
  <p><time datetime="2019-12-25">Январь 12, 2019</time></p>
  <p><a href="#">1 переход</a></p>
  <h2><a href="#">Название самого интересного и популярного поста в блоге.</a></h2>
  </figcaption>
  </figure>

  
  <figure class="asadipisc_ngelopada slide">
  <div class="savenp_sumakcon">
  <a href="#"><img src="http://zornet.ru/_fr/56/1903405.jpg" alt="" /></a>
  </div>
  <figcaption class="sumselopas_udaakcon">
  <p><time datetime="2019-12-24">Октябырь 24, 2020</time></p>
  <p><a href="#">2 переход</a></p>
  <h2><a href="#">Для любителей ретро-игровых приставок и домашних компьютерных.</a></h2>
  </figcaption>
  </figure>

  
  <figure class="asadipisc_ngelopada slide">
  <div class="savenp_sumakcon">
  <a href="#"><img src="http://zornet.ru/_fr/56/1903405.jpg" alt="дизайн сайта" /></a>
  </div>
  <figcaption class="sumselopas_udaakcon">
  <p><time datetime="2019-12-23">Сентябырь 2010</time></p>
  <p><a href="#">3 переход</a></p>
  <h2><a href="#">Графические процессоры имеют решающее значение для игр.</a></h2>
  </figcaption>
  </figure>
  </div>
  </div>
  </section>
  </main>

CSS

Код

@import url("https://fonts.googleapis.com/css?family=Oswald:300,400|Roboto:300&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  vertical-align: baseline;
}

img {
  border-style: none;
  height: auto;
}

a img {
  border: none;
  outline: none;
}

figure {
  display: block;
  background-color: #fff;
  -ms-interpolation-mode: bicubic;
}

figure img {
  display: block;
  width: auto;
  max-width: 100%;
}

:root {
  --master-color: #5942ad;
  --master-color-partner-dark: #1d247d;
  --headings-color: #263358;
  --main-bg-color: #f5f3f3;
  --secondary1-bg-color: #f5eeee;
  --secondary2-bg-color: #f3edec;
  --main-txt-color: #353333;
  --secondary-txt-color: #6b6767;
  --sub-color: #a9a3a3;
}

body {
  font-family: 'Roboto', Tahoma, sans-serif;
  font-size: 125%;
  font-style: normal;
  font-weight: 300;
  line-height: 1.8em;

  color: var(--main-txt-color);
  background: var(--main-bg-color);
}

h1, h2 {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-style: normal;
  line-height: 1.14em;
  color: var(--headings-color);
}

h1 {
  font-size: calc(22px + .8vw);
  margin: .5em 0 1em;
}

h2 {
  font-size: calc(22px + 2vw);
  margin-bottom: calc(1em + 1vw);
}

a {
  color: var(--master-color);
  text-decoration: none;
  border-bottom: 1px var(--master-color) solid;
  background-color: transparent;
  outline: none;
}

a:hover {
  color: var(--master-color-partner-dark);
}

a:focus {
  color: var(--headings-color);
  background-color: var(--secondary2-bg-color);
}

h1 a, h2 a {
  border: none;
  color: #1c294e;
  background-color: rgba(0, 0, 0, 0);
  outline: none;
}

p {
  margin: calc(.5em + .5vw) 0;
}

/**
  * Page Layout
  */
html, body { height: 100%; }

.main {
  display: grid;
  grid-template-columns: minmax(1em, 1fr) minmax(0, 1000px) minmax(1em, 1fr);
}

.main > * {
  grid-column: 2 / 3;
}

.section {
  grid-column: 1 / 3;

  display: grid; /* subgrid */
  grid-template-columns: minmax(1em, 1fr) minmax(0, 1000px);

  background-image: linear-gradient(to bottom, #fff 0%, #fff 30%, var(--secondary1-bg-color) 30%, var(--secondary1-bg-color) 100%);
  margin-bottom: 4em;
}

.slider {
  grid-column: 2 / 3;
}

.bx-wrapper {
  position: relative;
  -ms-touch-action: pan-y;
  touch-action: pan-y;

  background-image: linear-gradient(to right, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
}

.bx-viewport {
  z-index: 10;
  -webkit-transform: translatez(0);
}

.slider {
  visibility: hidden;
}

.slider,
.slider__content,
.slider__item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide {
  margin: 0;
  background-color: transparent;
}

.slide__img-wrap {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}

.slide__img-wrap a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.slide__img-wrap img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.slide__description {
  position: relative;
  padding: 1em 3em;
  margin: -8em 0 0 50%;
  background: #fff;
  color: var(--sub-color);
  font-weight: 300;
  font-style: normal;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.bx-controls {
  position: absolute;
  top: 0;
  right: 50%;
  padding-top: 56.25%;
}

.bx-controls-direction {
  z-index: 11;
  position: relative;
}

.bx-prev,
.bx-next {
  display: inline-block;
  font-size: 1.8em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  border: none;
  background: var(--master-color);
  color: #fff;
  text-align: center;
}

.bx-prev {
  border-right: 1px #fff solid;
}

.bx-controls a:hover,
.bx-con@import url("https://fonts.googleapis.com/css?family=Oswald:300,400|Roboto:300&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  vertical-align: baseline;
}

img {
  border-style: none;
  height: auto;
}

a img {
  border: none;
  outline: none;
}

figure {
  display: block;
  background-color: #fff;
  -ms-interpolation-mode: bicubic;
}

figure img {
  display: block;
  width: auto;
  max-width: 100%;
}

:root {
  --master-color: #c19f63;
  --master-color-partner-dark: #7c591d;

  --headings-color: #263358;

  --main-bg-color: #fff;
  --secondary1-bg-color: #f6f6f6;
  --secondary2-bg-color: #fff0ec;

  --main-txt-color: #333;
  --secondary-txt-color: #757575;

  --sub-color: #b4b4b4;
}

body {
  font-family: 'Roboto', Tahoma, sans-serif;
  font-size: 125%;
  font-style: normal;
  font-weight: 300;
  line-height: 1.8em;

  color: var(--main-txt-color);
  background: var(--main-bg-color);
}

h1, h2 {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-style: normal;
  line-height: 1.4em;
  color: var(--headings-color);
}

h1 {
  font-size: calc(22px + .8vw);
  margin: .5em 0 1em;
}

h2 {
  font-size: calc(16px + 2vw);
  margin-bottom: calc(1em + 1vw);
}

a {
  color: var(--master-color);
  text-decoration: none;
  border-bottom: 1px var(--master-color) solid;
  background-color: transparent;
  outline: none;
}

a:hover {
  color: var(--master-color-partner-dark);
}

a:focus {
  color: var(--headings-color);
  background-color: var(--secondary2-bg-color);
}

h1 a,
h2 a {
  border: none;
  color: var(--headings-color);
  background-color: transparent;
  outline: none;
}

p {
  margin: calc(.5em + .5vw) 0;
}

html, body { height: 100%; }

.main {
  display: grid;
  grid-template-columns: minmax(1em, 1fr) minmax(0, 1000px) minmax(1em, 1fr);
}

.main > * {
  grid-column: 2 / 3;
}

.loudaakcon {
  grid-column: 1 / 3;

  display: grid;
  grid-template-columns: minmax(1em, 1fr) minmax(0, 1000px);

  background-image: linear-gradient(to bottom, #fff 0%, #fff 30%, var(--secondary1-bg-color) 30%, var(--secondary1-bg-color) 100%);
  margin-bottom: 4em;
}

.slider {
  grid-column: 2 / 3;
}

.bx-wrapper {
  position: relative;
  -ms-touch-action: pan-y;
  touch-action: pan-y;

  background-image: linear-gradient(to right, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
}

.bx-viewport {
  z-index: 10;
  -webkit-transform: translatez(0);
}

.slider {
  visibility: hidden;
}

.slider,
.asepons_avenakuda,
.asadipisc_ngelopada {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide {
  margin: 0;
  background-color: transparent;
}

.savenp_sumakcon {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}

.savenp_sumakcon a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.savenp_sumakcon img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.sumselopas_udaakcon {
  position: relative;
  padding: 1em 3em;
  margin: -8em 0 0 50%;
  background: rgb(255, 255, 255);
  color: #827b7b;
  font-weight: 300;
  font-style: normal;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.bx-controls {
  position: absolute;
  top: 0;
  right: 50%;
  padding-top: 56.25%;
}

.bx-controls-direction {
  z-index: 11;
  position: relative;
}

.bx-prev, .bx-next {
  display: inline-block;
  font-size: 1.8em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  border: none;
  background: #6463c1;
  color: #f1eded;
  text-align: center;
}

.bx-prev {
  border-right: 1px #fff solid;
}

.bx-controls a:hover,
.bx-controls a:focus {
  outline: none;
  color: var(--headings-color);
  background-color: var(--secondary2-bg-color);
}

.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}

.slider .pager {
  position: absolute;
  top: 0;
  right: 50%;
  padding-top: 57%;
  margin-right: 6em;
  z-index: 9;

  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  font-weight: 400;
  text-align: center;
  color: var(--secondary-txt-color);
}

.pager .curr-item {
  font-size: 1.778em;
}

.pager .curr-item:after {
  content: '/';
  display: inline-block;
  font-size: .6em;
  margin: 0 .25em;
}

.bx-wrapper .bx-loading {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
  z-index: 2000;
}

.bx-wrapper .bx-loading:after {
  font-size: 2em;
  content: "\27F3";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;

  -webkit-animation: fa-spin 2s infinite steps(8);
  animation: fa-spin 2s infinite steps(8);
}

@media all and (max-width: 900px) {
  body {
  font-size: 112.5%;
  line-height: 1.6em;
  }

  .bx-wrapper {
  background-image: linear-gradient(to right, transparent 0%, transparent 4em, #fff 4em, #fff 100%);
  }

  .sumselopas_udaakcon {
  padding: 1em 2em;
  margin: -2em 0 0 4em;
  }

  .bx-prev,
  .bx-next {
  display: block;
  }

  .bx-prev {
  border-right: none;
  border-bottom: 1px #fff solid;
  }

  .slider .bx-controls {
  margin-top: 0;
  right: calc(100% - 4em);
  }

  .slider .bx-controls .bx-controls-direction {
  margin-top: 0;
  }

  .slider .pager {
  right: calc(100% - 3.5em);
  margin: 6em 0 0 0;
  }

  .slider .pager .curr-item {
  display: block;
  border-bottom: 1px var(--secondary-txt-color) solid;
  padding-bottom: .25em;
  }

  .slider .pager .curr-item:after {
  display: none;
  }
}

@media all and (max-width: 769px) {
  .savenp_sumakcon { width: 99%; }
}

@media all and (max-width: 769px) {
  h2 {font-size: 18px;}
}

Код

$('.slider .asepons_avenakuda').bxSlider({
  mode: 'fade',
  nextText: '›',
  prevText: '‹',
  pager: false,
  touchEnabled: false,
  onSliderLoad: function() {
  $(this).parent('.bx-viewport').after('<div class="pager"><span class="curr-item">'+viewOfNumber(this.getCurrentSlide()+1)+'</span>'+viewOfNumber(this.getSlideCount())+'</div>');

  $(this).parents('.slider').css('visibility', 'visible');
  },
  onSlideAfter: function($slideElement, oldIndex, newIndex) {
  $(this).parent('.bx-viewport').next('.pager').find('.curr-item').text(viewOfNumber(newIndex+1));
  }
  });

  function viewOfNumber(n) {
  return (n < 10 ? "0" : "") + n;
  }

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

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

04 Мая 2020 Загрузок: 2 Просмотров: 1082 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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