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

Адаптивная концепция слайд-шоу на CSS3

Адаптивная концепция слайд-шоу на CSS3
Простое адаптивное слайд-шоу или слайдер на всю ширину, которое созданное при помощи HTML5, CSS3 и JavaScript, где не нужно прописывать jQuery. Где по умолчанию выстроена значение на 100%, что означает, этот слайд можно поместить, как в небольшой каркас блока, так и в шапку сайта. Здесь предусмотрены переключатели, которые поставлены по сторонам, так как они идут в темно прозрачном стиле, что на некоторых изображениях их трудно заметить. Что можно исправить в стилистике, где ставиться нужный вам оттенок цвета для функции смены картинок.

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

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

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

Установка:

HTML

Код
<div class="diy-slideshow">
  <figure class="show">
  <img src="Здесь ссылка ни изображение №1" width="100%" />
  </figure>
  <figure>
  <img src="Здесь ссылка ни изображение №2" width="100%" />  
  </figure>
  <figure>
  <img src="Здесь ссылка ни изображение №13" width="100%" />
  </figure>
  <figure>
  <img src="Здесь ссылка ни изображение №4" width="100%" />
  </figure>
  <figure>
  <img src="Здесь ссылка ни изображение №5" width="100%" />
  </figure>
  <figure>
  <img src="Здесь ссылка ни изображение №6" width="100%" />
  </figure>
  <span class="prev">«</span>
  <span class="next">»</span>
</div>

CSS

Код
.diy-slideshow{
  position: relative;
  display: block;
  overflow: hidden;
}
figure{
  position: absolute;
  opacity: 0;
  transition: 1s opacity;
}
figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
}

figure.show{
  opacity: 1;
  position: static;
  transition: 1s opacity;
}
.next, .prev{
  color: #fff;
  position: absolute;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

JS

Код
(function(){  
var counter = 0,  
  $items = document.querySelectorAll('.diy-slideshow figure'),  
  numItems = $items.length;  

var showCurrent = function(){
  var itemToShow = Math.abs(counter%numItems);
  [].forEach.call( $items, function(el){
  el.classList.remove('show');
  });

  $items[itemToShow].classList.add('show');  
};

document.querySelector('.next').addEventListener('click', function() {
  counter++;
  showCurrent();
  }, false);

document.querySelector('.prev').addEventListener('click', function() {
  counter--;
  showCurrent();
  }, false);
   
})();

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

Демонстрация
2020-11-04 Загрузок: 1 Просмотров: 285 Комментарий: (0)

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

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

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

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