» »

Чистый CSS3 слайдер изображение HTML

Чистый CSS3 слайдер изображение HTML

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

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

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

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

Как сделать крутой слайдер на CSS3 и HTML

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

Все обернуто в div, называемый slider, а список изображений в другом div, где просто настоящая магия произойдет через код CSS. Обязательно измените пути к изображениям, если вы используете свои собственные изображения.

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

HTML

Код
<div class="gendesin">  
  <input type="radio" id="control1" name="controls" checked="checked"/>
  <label for="control1"></label>
  <input type="radio" id="control2" name="controls"/>
  <label for="control2"></label>
  <input type="radio" id="control3" name="controls"/>
  <label for="control3"></label>
  <input type="radio" id="control4" name="controls"/>
  <label for="control4"></label>
  <input type="radio" id="control5" name="controls"/>
  <label for="control5"></label>
  <div class="coevbusinesen">
  <ul>
  <li>
  <img src="http://zornet.ru/ABVUN/Aba/5.jpg" />
  <div class="cordingagend">
   
  <div class="cordingagend-text">
  <h2>Ключевое слово 1</h2>
  <p>Около десяти лет назад SEO не было чем-то обыденным или даже чем-то, что считалось необходимостью для бизнеса.</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/ABVUN/Aba/4.jpg" />
  <div class="cordingagend">
   
  <div class="cordingagend-text">
  <h2>Здесь написано название 2</h2>
  <p>Сегодня вещи очень разные. Согласно статье, опубликованной в журнале Forbes, услуги SEO необходимы сегодня для бизнеса.</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/ABVUN/Aba/3.jpg" />
  <div class="cordingagend">
   
  <div class="cordingagend-text">
  <h2>Название слайд-шоу 3</h2>
  <p>Некоторые из причин этого включают охват, экономическую эффективность и тот факт, что в настоящее время это маркетинговая норма.</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/ABVUN/Aba/2.jpg" />
  <div class="cordingagend">
   
  <div class="cordingagend-text">
  <h2>ZorNet.Ru — сайт для вебмастера</h2>
  <p>Для тех из вас, кому неясно, что мы подразумеваем под метриками или KPI, мы говорим о стандартах успеха SEO, которые можно измерить и, следовательн.</p>
  </div>
  </div>
  </li>
  <li>
  <img src="http://zornet.ru/ABVUN/Aba/1.jpg" />
  <div class="cordingagend">
   
  <div class="cordingagend-text">
  <h2>Скрипты для сайта</h2>
  <p>Это относится к числу посещений или посещений, которые вы получаете на своем веб-сайте посредством общего просмотра веб-страниц.</p>
  </div>
  </div>
  </li>
  </ul>
  </div>
  </div>

CSS

Код
h1 {color:#333; text-shadow:1px 1px #999; font-size:40px; font-family:Archivo Narrow; margin:40px; text-align:center;}
.gendesin {
  display: block;
  height: 320px;
  min-width: 260px;
  max-width: 640px;
  margin: auto;
  margin-top: 20px;
  position: relative;
}
   
.coevbusinesen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
   
.coevbusinesen>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);
}
   
.coevbusinesen>ul>li {
  width: 20%;
  height: 320px;
  float: left;
  position: relative;
}
   
.coevbusinesen>ul>li>img {
  margin: auto;
  height: 100%;
}
   
.gendesin input[type=radio] {
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 100;
  visibility: hidden;
}
   
.gendesin 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(0,0,0,.8);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
  box-shadow: 0px 0px 3px rgba(0,0,0,.8);
  -webkit-transition: background-color .2s;
  -moz-transition: background-color .2s;
  -o-transition: background-color .2s;
  transition: background-color .2s;
}
   
.gendesin input[type=radio]#control1:checked~label[for=control1] { background-color: #333; }
.gendesin input[type=radio]#control2:checked~label[for=control2] { background-color: #333; }
.gendesin input[type=radio]#control3:checked~label[for=control3] { background-color: #333; }
.gendesin input[type=radio]#control4:checked~label[for=control4] { background-color: #333; }
.gendesin input[type=radio]#control5:checked~label[for=control5] { background-color: #333; }
.gendesin label[for=control1] { margin-left: -36px }
.gendesin label[for=control2] { margin-left: -18px }
.gendesin label[for=control4] { margin-left: 18px }
.gendesin label[for=control5] { margin-left: 36px }
.gendesin input[type=radio]#control1:checked~.coevbusinesen>ul { left: 0 }
.gendesin input[type=radio]#control2:checked~.coevbusinesen>ul { left: -100% }
.gendesin input[type=radio]#control3:checked~.coevbusinesen>ul { left: -200% }
.gendesin input[type=radio]#control4:checked~.coevbusinesen>ul { left: -300% }
.gendesin input[type=radio]#control5:checked~.coevbusinesen>ul { left: -400% }
   
.cordingagend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family:Archivo Narrow;
  z-index: 1000;
}
.cordingagend-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: #fff;
}

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

Также проверьте пути к изображениям. Оптимальный размер изображения для этого слайдера составляет 640 и 320 пикселей, где можете изменить его, но вам также придется изменить его и в файлах CSS.

Демонстрация
2019-08-03 Загрузок: 1 Просмотров: 268 Комментарий: (0)

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

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

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