ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер для сайта на всю ширину в CSS

Слайдер для сайта на всю ширину в CSS

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

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

В этой статье мы расскажем, как добавить слайдер домашней страницы, так как сам слайд идет без плагинов, где работает на чистом стиле, с оригинальной сменой кадров. Также изначально можно просмотреть как он работает на предоставленной demo странице, где ссылка ниже для этого представлена.

Установочный процесс:

HTML

Код

<div class="wrap">
  <header>
  <label for="slide-1"></label>
  <label for="slide-2"></label>
  <label for="slide-3"></label>
  <label for="slide-4"></label>
  </header>
  <input id="slide-1" type="radio" name="slides" checked>
  <section class="slide slide-one">
  <h1></h1>
  </section>
  <input id="slide-2" type="radio" name="slides">
  <section class="slide slide-two">
  <h1>Заголовок Два</h1>
  </section>
  <input id="slide-3" type="radio" name="slides">
  <section class="slide slide-three">
  <h1>Заголовок Три</h1>
  </section>
  <input id="slide-4" type="radio" name="slides">
  <section class="slide slide-four">
  <h1>Заголовок Четыре</h1>
  </section>
</div>

CSS

Код

.wrap {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: #120103;
}

header {
  background: transparent;
  position: absolute;
  top: 70%;
  left: 0;
  z-index: 2;
  width: 100%;
}

header label {
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  padding: 0 1em;
  width: 35px;
  height: 35px;
  background: #83A7C9;
  border-radius: 50%;
}

header label:hover {
  background: #2e353b;
}

.slide {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  padding: 8em 1em 0;
  background-color: #120103;
  background-position: 50% 50%;
  background-size: cover;
  transition: left 0s .75s;
}

.slide-one {
  background-image: url('http://zornet.ru/_fr/56/s9536846.jpg');
}

.slide-two {
  background-image: url('http://zornet.ru/_fr/56/s9482363.jpg');
}
.slide-three {
  background-image: url('http://zornet.ru/_fr/56/s2705070.jpg');
}
.slide-four {
  background-image: url('http://zornet.ru/_fr/56/s6348657.jpg');
}

.slide h1 {
  opacity: 0;
  transform: translateY(100%);
  transition: transform .5s .5s, opacity .5s;
}

[id^='slide']:checked + .slide {
  left: 0;
  z-index: 1;
  transition: left .65s ease-out;
}

[id^='slide']:checked + .slide h1 {
  opacity: 1;
  transform: translateY(0);
  transition: all .5s .5s;
}
@import url(https://fonts.googleapis.com/css?family=Fira+Sans);

html {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.4;
}

*,
*::before,
*::after { box-sizing: inherit; }

h1 {
  color: #fff;
  font-family: "FiraSans", cursive;
  font-size: 2em;
  font-size: 6vw;
  line-height: 1.2;
  margin: 0.5em 0 3em;
  text-shadow: 1px 1px 1px #333;
}

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

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

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

23 Июля 2019 Загрузок: 1 Просмотров: 1996 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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