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

Слайдер на чистом CSS без Javascript

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

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

Он выполнен в темной гамме, где все настройка происходит в стилистике CSS, и здесь веб разработчику не сложно будет вывести на любой оттенок цвета. Поскольку в этой версии используется только CSS, включить динамические эффекты, то остается воспользоваться кнопками переключателями, которые находятся под самим каркасом. Где по числу кнопок изначально можно понять, сколько и в каком количестве находятся слайдов.

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

Слайд шоу для сайта на CSS

Установка:

HTML

Код
<div class="konsehsa-cebvsding">Поставить заголовок</div>  

<div id="dekonseck-natupiscing">
  <input type="radio" id="nuevsding-1" name="buttons" checked="checked"/>
  <label for="nuevsding-1"></label>
  <input type="radio" id="nuevsding-2" name="buttons"/>
  <label for="nuevsding-2"></label>
  <input type="radio" id="nuevsding-3" name="buttons"/>
  <label for="nuevsding-3"></label>
  <input type="radio" id="nuevsding-4" name="buttons"/>
  <label for="nuevsding-4"></label>
  <input type="radio" id="nuevsding-5" name="buttons"/>
  <label for="nuevsding-5"></label>

  <div id="vedugbsocnaon">
  <ul>
  <li id="negneankamas1">
  <span class="kudsa">Что такое доменное имя?</span>
  <p>Доменное имя - идет под описание.</p>
  </li>
  <li id="negneankamas2">
  <span class="kudsa">Шаблоны для сайта</span>
  <p>Второе описание про шаблоны сайта.</p>
  </li>
  <li id="negneankamas3">
  <span class="kudsa">Скрипты для сайта</span>
  <p>Третье краткое описание в слайде.</p>
  </li>
  <li id="negneankamas4">
  <span class="kudsa">Дизайн для сайта</span>
  <p>Описание идет под тематику дизайна</p>
  </li>
  <li id="negneankamas5">
  <span class="kudsa">Заголовок сайта</span>
  <p>Здесь можно кратко описать по теме и поставить ссылку на переход страницы.</p>
  </li>
  </ul>
  </div>
  </div>

CSS

Код
.konsehsa-cebvsding {
  width: 100%;
  font-size: 23px;
  text-align: center;
  margin-bottom: 18px;
}

.kudsa {
  font-size: 19px;
  font-weight: bold;
  text-shadow: 0 1px 0 #232222;
  padding: 10px;
}

#dekonseck-natupiscing {
  background: #353638;
  display: block;
  width: 577px;
  min-height: 100px;
  margin: auto;
  position: relative;
  border: 1.3px solid #a9a4a4;
  border-radius: 3px;
  /* box-shadow: 0px 0px 9px 1px #6f6969; */
  box-shadow: 0px 0px 6px 2px rgba(138, 137, 137, 0.59), 0px 1px 6px -15px rgba(253, 244, 244, 0.92);
}

#vedugbsocnaon {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  margin: 10px 0px 0px 0px;
}

#vedugbsocnaon>ul {
  list-style: none;
  height: 100%;
  width: 500%;
  overflow: hidden;
  position: relative;
  left: 0px;
  -webkit-transition: left .5s;
  -moz-transition: left .5s;
  -o-transition: left .5s;
  transition: left .5s;
}
#vedugbsocnaon>ul>li {
  width: 20%;
  float: left;
  position: relative;
}
#vedugbsocnaon>ul>li p {
  padding: 10px;
}

#vedugbsocnaon>ul>li>img {
  margin: auto;
  width: 100%;
}
#dekonseck-natupiscing input[type=radio] {
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 100;
  visibility: hidden;
}
#dekonseck-natupiscing label {
  position: absolute;
  left: 50%;
  bottom: -30px;
  z-index: 100;
  width: 15px;
  height: 15px;
  background: #171515;
  cursor: pointer;
  -webkit-transition: background-color .5s;
  -moz-transition: background-color .5s;
  -o-transition: background-color .5s;
  transition: background-color .5s;
  border-radius: 100px;
  border: 1px solid #717171;
}

#dekonseck-natupiscing #nuevsding-1:checked~label[for=nuevsding-1] { background: #656262;
border: 1px solid #b5b5b5;
}
#dekonseck-natupiscing #nuevsding-2:checked~label[for=nuevsding-2] { background: #656262;
  border: 1px solid #b5b5b5;  
}
#dekonseck-natupiscing #nuevsding-3:checked~label[for=nuevsding-3] { background: #656262;
  border: 1px solid #b5b5b5;  
}
#dekonseck-natupiscing #nuevsding-4:checked~label[for=nuevsding-4] { background: #656262;
  border: 1px solid #b5b5b5;
}
#dekonseck-natupiscing #nuevsding-5:checked~label[for=nuevsding-5] { background: #656262;
  border: 1px solid #b5b5b5;
}

#dekonseck-natupiscing label[for=nuevsding-1] { margin-left: -40px }
#dekonseck-natupiscing label[for=nuevsding-2] { margin-left: -20px }
#dekonseck-natupiscing label[for=nuevsding-4] { margin-left: 20px }
#dekonseck-natupiscing label[for=nuevsding-5] { margin-left: 40px }

#dekonseck-natupiscing #nuevsding-1:checked~#vedugbsocnaon>ul { left: 0 }
#dekonseck-natupiscing #nuevsding-2:checked~#vedugbsocnaon>ul { left: -100% }
#dekonseck-natupiscing #nuevsding-3:checked~#vedugbsocnaon>ul { left: -200% }
#dekonseck-natupiscing #nuevsding-4:checked~#vedugbsocnaon>ul { left: -300% }
#dekonseck-natupiscing #nuevsding-5:checked~#vedugbsocnaon>ul { left: -400% }

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

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

Демонстрация
09 Марта 2019 Загрузок: 1 Просмотров: 4221 Комментариев: (2)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

Комментарии: 2
Kosten
Kosten 12 Марта 2019 21:531
0
Чтоб не создавать новую тему, то в комментариях размещу еще одну версию слайдера, который аналогично выводит информацию или изображение.

Код
<section class="slideshow">
  <div class="slideshow-container slide">
  <img src="http://placeimg.com/625/225/any"/>
  <div class="text-container">
  <p>Здесь идет описание</p>
  </div>
  <img src="http://placeimg.com/625/225/animals"/>
  <img src="http://placeimg.com/625/225/arch"/>
  </div>
</section>


CSS

Код
.slideshow {
  width: 625px;
  margin: 0 auto;
  overflow: hidden;
  border: solid 1px white;
}

.slideshow-container {
  width: 2500px;
  font-size: 0;
  transition: 1s ease;
  height: 225px;
}

.slideshow-container:hover {
  animation-play-state: paused;
}

img, .text-container {
  width: 625px;
  height: auto;
  display: inline-block;
  font-size: 16px;
  text-align: center;
}

.text-container {
  height: 225px;
  position: relative;
}

p {
  position: relative;
  top: -45%;
  padding: 5px;
}

.slide {
  animation: slide 24s ease infinite;
}

@keyframes slide {
  0% {
  transform: translateX(0%);
  }
  
  12.5% {
  transform: translateX(0%);
  }
  
  25% {
  transform: translateX(-25%);
  }
  
  37.5% {
  transform: translateX(-25%);
  }
  
  50% {
  transform: translateX(-50%);
  }
  
  62.5% {
  transform: translateX(-50%);
  }
  
  75% {
  transform: translateX(-75%);
  }
  
  87.5% {
  transform: translateX(-75%);
  }
  
  99% {
  transform: translateX(-75%);
  }
  
  100% {
  transform: translateX(0);
  }
}

.p {
  margin-top: 140px;
  text-align: center;
}


Демонстрация
Kosten
Kosten 12 Марта 2019 21:572
0
Вторая вариация, где аналогично можно сделать галерею для изображение, где задаем пробел на временной промежуток.

Код
<section>
  <article>Slide 1</article>
  <article>Slide 2</article>
  <article>Slide 3</article>
  <article>Slide 4</article>
  <article>Slide 5</article>
  <article>Slide 6</article>
  <article>Slide 7</article>
  <article>Slide 8</article>
  <article>Slide 9</article>
  <article>Slide 10</article>
</section>


CSS

Код
section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/*section:hover article{
  animation-play-state: paused;
}*/

article{
  position: absolute;
  left: 200px;
  background: #292929;
  color: #e3e3e3;
  width: 200px;
  height: 200px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 80px;
}

article:nth-of-type(1){
  animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
  animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
  animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
  animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
  animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
  animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
  animation: slideIn 50s linear 45s infinite;
}

@keyframes slideIn{
  0% {left: 200px;}
  1% {left: 0;}
  10% {left: 0;}
  11% {left: -200px;}
  100%{left: -200px;}
}


Демонстрация
Войдите:
avatar