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

Адаптивный слайдер CSS для информации

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

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

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

Проверено на сервис по адаптивности:

Адаптивный слайдер на CSS3 для сайта

Также были добавлены элементы, где при уменьшение экрана, стрелки уменьшаются:

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

Установка:

HTML

Код
<div class="adaptivno">
  <div class="polnekran">
  <div class="adaptuven-slayders strelka-vlevo"></div>
  <div class="adaptuven-animats unimovan-meslayd">
  <div class="konuten-sormalus">
  <span class="unslauda-polnoekan nebuvan-udanges">Слайд 1</span>
  </div>
  </div>
  <div class="adaptuven-animats polnoekan-lasnukida">
  <div class="konuten-sormalus">
  <span class="unslauda-polnoekan">Слайд 2</span>
  </div>
  </div>
  <div class="adaptuven-animats polnoekan-dazmaku">
  <div class="konuten-sormalus">
  <span class="unslauda-polnoekan">Слайд 3</span>
  </div>
  </div>
  <div class="adaptuven-slayders strelka-vpravo"></div>  
  </div>
  </div>

CSS

Код
body, .adaptivno, .polnekran, .adaptuven-animats, .konuten-sormalus {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100vh;
}

.polnekran {
  position: relative;
}

.adaptuven-animats {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.unimovan-meslayd {
  background-image: url(http://zornet.ru/_fr/56/6786347.jpg);
}

.polnoekan-lasnukida {
  background-image: url(http://zornet.ru/_fr/56/3664949.jpg);
}

.polnoekan-dazmaku {
  background-image: url(http://zornet.ru/_fr/56/0556657.jpg);
}

.konuten-sormalus {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.unslauda-polnoekan {
  font-size: 54px;
  color: #d6d6d6;
  user-select: none;
}

.nebuvan-udanges {
  color: #f7f7f7;
}

.adaptuven-slayders {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -30px;
  width: 0;
  height: 0;
  border-style: solid;
}

.strelka-vlevo {
  border-width: 30px 40px 30px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 30px;
}
.strelka-vpravo {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}

.levaya-storona {
  border-color: transparent #fff transparent transparent;
}

.pravaya-storona {
  border-color: transparent transparent transparent #fff;
}

@media (max-width: 680px) {
  .adaptuven-slayders {
  top: 70%;
  }
   
  .strelka-vlevo {
  margin-left: 60px;
  border-width: 18px 25px 18px 0;
  top: 55%;
  }
   
  .strelka-vpravo{
  border-width: 18px 0 18px 25px;
top: 55%;
  }
}

JS

Код
let polnekranImages = document.querySelectorAll('.adaptuven-animats'),
  arrowLeft = document.querySelector('.strelka-vlevo'),
  arrowRight = document.querySelector('.strelka-vpravo'),
  current = 0;

function reset() {
  for(let i = 0; i < polnekranImages.length; i++) {
  polnekranImages[i].style.display = 'none';
  }
}

function startSlide() {
  reset();
  changeArrowColor();
  polnekranImages[0].style.display = 'block';
}

function slideLeft() {
  reset();
  polnekranImages[current - 1].style.display = 'block';
  current--;
  changeArrowColor();
}

function polnekranight() {
  reset();
  polnekranImages[current + 1].style.display = 'block';
  current++;
  changeArrowColor();
}

function changeArrowColor() {
  if(polnekranImages[current].querySelector('.unslauda-polnoekan').classList.contains('nebuvan-udanges')) {  
  arrowLeft.classList.add('levaya-storona');
  arrowRight.classList.add('pravaya-storona');
  }
  else {
  arrowLeft.classList.remove('levaya-storona');
  arrowRight.classList.remove('pravaya-storona');
  }
}

arrowLeft.addEventListener('click', function() {
  if(current === 0) {
  current = polnekranImages.length;
  }
  slideLeft();
})

arrowRight.addEventListener('click', function() {
  if(current === polnekranImages.length - 1) {
  current = -1;
  }
  polnekranight();
})

startSlide();

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

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

Демонстрация
10 Марта 2020 Загрузок: 1 Просмотров: 919 Комментариев: (1)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

Комментарии: 1
smoolgg
smoolgg 10 Марта 2020 10:461
0
Нормально, то что искал!
Войдите:
avatar