ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивный слайдер с видео изображением

Адаптивный слайдер с видео изображением

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

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

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

Так реально выглядит:

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

HTML

Код

<div id="banner">
<div id="sineuthokelease_slider" class="carousel slide">
  <ol class="carousel-indicators">
  <li data-target="#sineuthokelease_slider" data-slide-to="0" class="active"></li>
  <li data-target="#sineuthokelease_slider" data-slide-to="1"></li>
  <li data-target="#sineuthokelease_slider" data-slide-to="2"></li>
  </ol>
<div class="carousel-inner">
  
  <div data-slide="0" class="item active">
  <div class="tesaasei-mpsdes-sevaning">
  <video title="1" id="bgvid" loop muted poster="http://www.thefrasier.com/wp-content/themes/frasier/images/Frasier_Home_120314.jpg"><source src="http://www.thefrasier.com/wp-content/uploads/2014/12/0_final_reel_home.webm" type="video/webm">Your browser does not support the video tag.</video>
  </div>
  <div class="kuleasei-mpusines-sevaning">
  <img src="http://www.thefrasier.com/wp-content/themes/frasier/images/Frasier_Home_120314.jpg" alt="hotel">
  </div>
  </div>

  
  <div data-slide="1" class="item">
  <img title="2" alt="image of hotel" src="http://hdcoolwallpapers.com/wp-content/uploads/2014/09/Hd-Ocean-Wallpapers-5.jpg">
  </div>
  
  <div data-slide="2" class="item">
  <img title="3" alt="image of apartment" src="http://imgs.abduzeedo.com/files/gismullr/beautifulhouses/bh306/wh01.jpg">
  </div>
  </div>

  
  <div id="kugadesa-ndingem-eaning"><button class="kuleasei-mpusin-button" type="button" title="Play Video"></button></div>
  <a class="carousel-control left" href="#sineuthokelease_slider" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#sineuthokelease_slider" data-slide="next">›</a>
  </div>
  </div>

CSS

Код

#sineuthokelease_slider video {
  min-height: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  width: auto !important;
  overflow: hidden;
}

#sineuthokelease_slider img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

.carousel-inner>.item>img {
  display: block;
  line-height: 1;
}

.kuleasei-mpusines-sevaning {
  display: none;
}

@media screen and (max-device-width: 800px) {
  .tesaasei-mpsdes-sevaning { display: none; }
  .kuleasei-mpusines-sevaning { display: inherit; }
}

#kugadesa-ndingem-eaning button {
  display: inline-block;
  border: 0.06666em solid #fff;
  font-size: 2rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  cursor: pointer;
  transition: .3s background;
  line-height: 1.3em;
  height: 1.5em;
  width: 2.5em;
  border-radius: 0.3em;
  position: absolute;
  opacity: .7;
  right: 1em;
  top: 20%;
}
.kuleasei-mpusin-button:before {
  font-family: FontAwesome;
  content: "\f04b";
}
.pause-video-button:before {
  font-family: FontAwesome;
  content: "\f04c";
}

Код

$('.carousel-inner').each(function() {
  if ($(this).children('div').length === 1)
  $(this).siblings('.carousel-control, .carousel-indicators').hide();
});

var vid = document.getElementById("bgvid");
var playButton = document.querySelector("#kugadesa-ndingem-eaning button");

playButton.addEventListener("click", function() {
  if (vid.paused) {
  vid.play();
  playButton.classList.remove("kuleasei-mpusin-button");
  playButton.classList.add("pause-video-button");
  } else {
  vid.pause();
  playButton.classList.add("kuleasei-mpusin-button");
  playButton.classList.remove("pause-video-button");
  }
});

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

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

17 Января 2019 Загрузок: 2 Просмотров: 2539 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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