ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой текстовый слайдер с прокруткой

Простой текстовый слайдер с прокруткой

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

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

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

При проверках на работоспособность, где все изначально проверено, и эта картинка снята с рабочей площадки.

Установка:

HTML

Код

<div id="depugeneu-pebepokes-kedona">
  <input type="radio" id="desegumaped-1" name="buttons" checked="checked"/>
  <label for="desegumaped-1"></label>
  <input type="radio" id="desegumaped-2" name="buttons"/>
  <label for="desegumaped-2"></label>
  <input type="radio" id="desegumaped-3" name="buttons"/>
  <label for="desegumaped-3"></label>
  <input type="radio" id="desegumaped-4" name="buttons"/>
  <label for="desegumaped-4"></label>
  <input type="radio" id="desegumaped-5" name="buttons"/>
  <label for="desegumaped-5"></label>

  <div id="dcampabu-rnoignonam">
  <ul>
  <li id="decaxopunev-mabedapog1">
  <p><span>Название</span><br>
  Первое описание</p>
  </li>
  <li id="decaxopunev-mabedapog2">
  <p><span>Название 2</span><br>
  Второе описание</p>
  </li>
  <li id="decaxopunev-mabedapog3">
  <p><span>Название 3</span><br>
  Третье описание</p>
  </li>
  <li id="decaxopunev-mabedapog4">
  <p><span>Название 4</span><br>
Четвертое описание</p>
  </li>
  <li id="decaxopunev-mabedapog5">
  <p><span>Название 5</span><br>
  Пятое описание </p>
  </li>
  </ul>
  </div>
  </div>

CSS

Код

#depugeneu-pebepokes-kedona {
  background: #6b6969;
  display: block;
  width: 571px;
  min-height: 100px;
  margin: auto;
  position: relative;
}
#dcampabu-rnoignonam {
  width: 99%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border: 3px solid #d4d4d4;
  border-radius: 3px;
}
#dcampabu-rnoignonam>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;
}
#dcampabu-rnoignonam>ul>li {
  width: 20%;
  float: left;
  position: relative;
}
#dcampabu-rnoignonam>ul>li p {
  padding: 10px;
}

#dcampabu-rnoignonam>ul>li>img {
  margin: auto;
  width: 100%;
}
#depugeneu-pebepokes-kedona input[type=radio] {
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 100;
  visibility: hidden;
}
#depugeneu-pebepokes-kedona label {
  position: absolute;
  left: 50%;
  bottom: -30px;
  z-index: 100;
  width: 15px;
  height: 15px;
  background: #222;
  cursor: pointer;
  -webkit-transition: background-color .5s;
  -moz-transition: background-color .5s;
  -o-transition: background-color .5s;
  transition: background-color .5s;
  border-radius: 50px;
  border: 1px solid #6b6969;
}

#depugeneu-pebepokes-kedona #desegumaped-1:checked~label[for=desegumaped-1] { background: #888; }
#depugeneu-pebepokes-kedona #desegumaped-2:checked~label[for=desegumaped-2] { background: #888; }
#depugeneu-pebepokes-kedona #desegumaped-3:checked~label[for=desegumaped-3] { background: #888; }
#depugeneu-pebepokes-kedona #desegumaped-4:checked~label[for=desegumaped-4] { background: #888; }
#depugeneu-pebepokes-kedona #desegumaped-5:checked~label[for=desegumaped-5] { background: #888; }

#depugeneu-pebepokes-kedona label[for=desegumaped-1] { margin-left: -40px }
#depugeneu-pebepokes-kedona label[for=desegumaped-2] { margin-left: -20px }
#depugeneu-pebepokes-kedona label[for=desegumaped-4] { margin-left: 20px }
#depugeneu-pebepokes-kedona label[for=desegumaped-5] { margin-left: 40px }

#depugeneu-pebepokes-kedona #desegumaped-1:checked~#dcampabu-rnoignonam>ul { left: 0 }
#depugeneu-pebepokes-kedona #desegumaped-2:checked~#dcampabu-rnoignonam>ul { left: -100% }
#depugeneu-pebepokes-kedona #desegumaped-3:checked~#dcampabu-rnoignonam>ul { left: -200% }
#depugeneu-pebepokes-kedona #desegumaped-4:checked~#dcampabu-rnoignonam>ul { left: -300% }
#depugeneu-pebepokes-kedona #desegumaped-5:checked~#dcampabu-rnoignonam>ul { left: -400% }

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

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

08 Апреля 2019 Загрузок: 2 Просмотров: 1069 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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