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

Слайдер bxSlider с адаптивной шириной сайта

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

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

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

При проверки по работе полного функционала:

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

Приступаем к установке:

Устанавливаем в NEAD страницы по месту

Код

HTML

Код

<div class="adapevu_slayda">
  <ul>
  <li style="background-image: url(http://zornet.ru/_fr/56/5366345.jpg);">
  <div class="adapevu_slayda-wrp">
  <div class="adapevu_slayda-title">ZorNet.Ru для вебмастера</div>
  <div class="adapevu_slayda-text">Этот слайдер будет отличным решением для тематический интернет ресурс, где можете поставить тематический кадр, а также все подробно по данному файлу сделать описание.</div>
  </div>
  </li>
  <li style="background-image: url(http://zornet.ru/_fr/56/1968428.jpg);">
  <div class="adapevu_slayda-wrp">
  <div class="adapevu_slayda-title">Вторая снимок</div>
  <div class="adapevu_slayda-text"> Второе изображение на полный или заданные мерки на экране.</div>
  </div>
  </li>
  <li style="background-image: url(http://zornet.ru/_fr/56/7925128.jpg);">
  <div class="adapevu_slayda-wrp">
  <div class="adapevu_slayda-title">Третий кадр</div>
  <div class="adapevu_slayda-text">Описание под третий кадр, которое появиться по вверх картинки слайда.</div>
  </div>
  </li>
  </ul>
</div>

CSS

Код

.adapevu_slayda ul {
  margin: 0;
  padding: 0;
}

.adapevu_slayda li {
  margin: 0;
  padding: 0;
  height: 544px;
  background-position: 50% 0;
  background-size: cover;
}

/* Контент в слайдере */
.adapevu_slayda-wrp {
  width: 450px;
  margin: 0 auto;
  padding: 50px 80px;
}
.adapevu_slayda-title {
  font-size: 35px;
  color: #fff;
  height: 80px;
  font-weight: 600;
  margin-bottom: 15px;
}
.adapevu_slayda-text {
font-size: 18px;
color: #fff;
  text-align: justify;
  /* font-weight: bold; */
margin-bottom: 15px;
}

/* Управление слайдером */
.adapevu_slayda .bx-wrapper {
  position: relative;
}
.adapevu_slayda .bx-controls {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.adapevu_slayda .bx-controls-direction {
  width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 500;
}
.adapevu_slayda .bx-prev, .adapevu_slayda .bx-next {
  position: absolute;
  top: 140px;
  width: 37px;
  height: 37px;
  overflow: hidden;
  text-indent: -999px;
}
.adapevu_slayda .bx-prev {
  left: 0;
  background: url(http://zornet.ru/ABVUN/Anisa/zornet/slide-prev.png) 0 0 no-repeat;
}
.adapevu_slayda .bx-next{
  right: 0;
  background: url(http://zornet.ru/ABVUN/Anisa/zornet/slide-next.png) 0 0 no-repeat;
}

.adapevu_slayda .bx-controls-direction{
  max-width: 600px;
  width: 100%;
}

.adapevu_slayda-wrp{
  max-width: 450px;
  width: 100%;
}

@media screen and (max-width: 1220px){
.adapevu_slayda .bx-controls-direction{
width: 90%;
height: auto;
padding: 0px;
}
}

@media screen and (max-width: 860px){
.adapevu_slayda-wrp {
width: 90%;
padding: 50px 0px 0px 0px;
}
}

@media screen and (max-width: 860px){
.adapevu_slayda-text {
width: 100%;
text-align: justify;
font-size: 12px;
}
}

Код

$(document).ready(function(){
  $('.adapevu_slayda ul').bxSlider({
  pager: false,
  controls: true,
  mode: 'fade',
  auto: true,
  pause: 4000,
  touchEnabled: false
  });
});

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

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

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

11 Ноября 2021 Загрузок: 3 Просмотров: 907 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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