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

Слайдер при использовании CSS3 и HTML

Этот слайдер изображений создан с использованием чистого CSS и HTML, где нет не каких скриптов, что по дизайну выглядит просто великолепно. Как уже сказано, при установке здесь не нужно задействовать библиотеки JavaScript, таких, как JQuery, вам остается выбрать место, где будет установлен слайд и прописан в стилистике CSS стили, и на этом вся установка. Но не говоря о том, что безусловно изменить изображение и поставить свои, также переписать название и краткое описание, что аналогично представлено на самой картинке в темно прозрачной форме фона.

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

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

При проверках все отлично работает, вот снимок с тестовой площадки:

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

HTML

Код

<div class="kuvelomasoved">
  <input type="radio" id="nulogas1" name="nulogass" checked="checked"/>
  <label for="nulogas1"></label>
  <input type="radio" id="nulogas2" name="nulogass"/>
  <label for="nulogas2"></label>
  <input type="radio" id="nulogas3" name="nulogass"/>
  <label for="nulogas3"></label>
  <input type="radio" id="nulogas4" name="nulogass"/>
  <label for="nulogas4"></label>
  <input type="radio" id="nulogas5" name="nulogass"/>
  <label for="nulogas5"></label>
  <div class="sumdolobas_metkuconsem">
  <ul>
  <li>
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/1.jpg" />
  <div class="pscinzak_mopsinvidun">

  <div class="pscinzak_mopsinvidun-text">
  <h2>Palmer Luckey утверждает</h2>
  <p>Rift S выглядит как значительное обновление по сравнению с оригинальным Rift, но, по словам Палмера Лаки, он может не сработать для 30 процентов потенциальных покупателей.</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/2.jpg" />
  <div class="pscinzak_mopsinvidun">

  <div class="pscinzak_mopsinvidun-text">
  <h2>В этом году Nintendo выпустит </h2>
  <p>Идет описание как в первом слайде все представлено.</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/3.jpg" />
  <div class="pscinzak_mopsinvidun">

  <div class="pscinzak_mopsinvidun-text">
  <h2>Ключевое слово</h2>
  <p>Здесь будет краткое описание по тематическому наклонению</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/4.jpg" />
  <div class="pscinzak_mopsinvidun">

  <div class="pscinzak_mopsinvidun-text">
  <h2>Ключевая фраза</h2>
  <p>Под ключевую фразу пишем кратко по теме</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/5.jpg" />
  <div class="pscinzak_mopsinvidun">

  <div class="pscinzak_mopsinvidun-text">
  <h2>Название материала</h2>
  <p>Краткое описание для тот - чтоб заинтересовать пользователя</p>
  </div>
  </div>
  </li>
  </ul>
  </div>
  </div>

CSS

Код

@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);

* { margin: 0; padding: 0; }

body {background-color:#666;}
h1 {color:#333; text-shadow:1px 1px #999; font-size:40px; font-family:Archivo Narrow; margin:40px; text-align:center;}
.kuvelomasoved {
  display: block;
  height: 320px;
  min-width: 260px;
  max-width: 640px;
  margin: auto;
  margin-top: 20px;
  position: relative;
}

.sumdolobas_metkuconsem {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.sumdolobas_metkuconsem>ul {
  list-style: none;
  height: 100%;
  width: 500%;
  overflow: hidden;
  position: relative;
  left: 0px;
  -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

.sumdolobas_metkuconsem>ul>li {
  width: 20%;
  height: 320px;
  float: left;
  position: relative;
}

.sumdolobas_metkuconsem>ul>li>img {
  margin: auto;
  height: 100%;
}

.kuvelomasoved input[type=radio] {
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 100;
  visibility: hidden;
}

.kuvelomasoved label {
  position: absolute;
  left: 50%;
  bottom: -45px;
  z-index: 100;
  width: 12px;
  height: 12px;
  background-color:#ccc;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 3px rgba(19, 18, 18, 0.8);
  -moz-box-shadow: 0px 0px 3px rgba(19, 18, 18, 0.8);
  box-shadow: 0px 0px 3px rgba(19, 18, 18, 0.8);
  -webkit-transition: background-color .2s;
  -moz-transition: background-color .2s;
  -o-transition: background-color .2s;
  transition: background-color .2s;
}

.kuvelomasoved input[type=radio]#nulogas1:checked~label[for=nulogas1] { background-color: #333; }
.kuvelomasoved input[type=radio]#nulogas2:checked~label[for=nulogas2] { background-color: #333; }
.kuvelomasoved input[type=radio]#nulogas3:checked~label[for=nulogas3] { background-color: #333; }
.kuvelomasoved input[type=radio]#nulogas4:checked~label[for=nulogas4] { background-color: #333; }
.kuvelomasoved input[type=radio]#nulogas5:checked~label[for=nulogas5] { background-color: #333; }
.kuvelomasoved label[for=nulogas1] { margin-left: -36px }
.kuvelomasoved label[for=nulogas2] { margin-left: -18px }
.kuvelomasoved label[for=nulogas4] { margin-left: 18px }
.kuvelomasoved label[for=nulogas5] { margin-left: 36px }
.kuvelomasoved input[type=radio]#nulogas1:checked~.sumdolobas_metkuconsem>ul { left: 0 }
.kuvelomasoved input[type=radio]#nulogas2:checked~.sumdolobas_metkuconsem>ul { left: -100% }
.kuvelomasoved input[type=radio]#nulogas3:checked~.sumdolobas_metkuconsem>ul { left: -200% }
.kuvelomasoved input[type=radio]#nulogas4:checked~.sumdolobas_metkuconsem>ul { left: -300% }
.kuvelomasoved input[type=radio]#nulogas5:checked~.sumdolobas_metkuconsem>ul { left: -400% }

.pscinzak_mopsinvidun {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family:Archivo Narrow;
  z-index: 1000;
}
.pscinzak_mopsinvidun-text {
  background-color: rgba(0,0,0,.8);
  padding:10px;
  top: 0;
  z-index: 4;
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
  color: #ececec;
}

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

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

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

28 Марта 2019 Просмотров: 888 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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