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

Простой слайдер карусель для контента на CSS

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

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

Проверен на тестовом сайте:

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

HTML

Код

<div id="aromak_eusetsa">
  <input checked type="radio" name="slider" id="sourcefor_information1" class="binterested" />
  <input type="radio" name="slider" id="sourcefor_information2" class="binterested" />
  <input type="radio" name="slider" id="sourcefor_information3" class="binterested" />
  <input type="radio" name="slider" id="sourcefor_information4" class="binterested" />
  <div class="mask">
  <div class="overflow">
  <div class="slide">
  <h3>ZorNet.Ru: Создание сайта на uCoz 1</h3>
  <p>Nintendo Switch стал огромным успехом для Nintendo, поставляя почти 15 миллионов единиц на сегодняшний день и продавая Wii U в течение всего года менее чем за год. Nintendo всегда беспокоилась о безопасности системы - компания отказалась предоставить варианты резервного копирования для сохраненных игр, потому что это ужасно, что хакеры будут злоупотреблять резервного копирования для сохраненных игр, потому что это ужасно, что хакеры будут .</p>
  </div>
  <div class="slide">
  <h3>ZorNet.Ru: Создание сайта на uCoz 2</h3>
  <p>Место под описание, что вторым слайдом идет.</p>
  </div>
  <div class="slide">
  <h3>ZorNet.Ru: Создание сайта на uCoz 3</h3>
  <p>Аналогичное описание, третье.</p>
  </div>
  <div class="slide">
  <h3>ZorNet.Ru: Создание сайта на uCoz 4</h3>
  <p>Можно создать еще одну информационную таблицу.</p>
  </div>
  </div>
  </div>
  <div id="controls" onclick="">
  <label for="sourcefor_information1"></label>
  <label for="sourcefor_information2"></label>
  <label for="sourcefor_information3"></label>
  <label for="sourcefor_information4"></label>
  </div>
</div>

CSS

Код

html { background:radial-gradient(#1e759a, #07213a); }
body{
font-family:Helvetica;
font-size:15px;
color:#052948;
text-align:center;
  height:100%;
}

input.set { display:none; }
#sourcefor_information1:checked ~ .mask .overflow { margin-left:0; }
#sourcefor_information2:checked ~ .mask .overflow { margin-left:-100%; }
#sourcefor_information3:checked ~ .mask .overflow { margin-left:-200%; }
#sourcefor_information4:checked ~ .mask .overflow { margin-left:-300%; }
#aromak_eusetsa { margin:49px auto; width:80%; position:relative; }
#aromak_eusetsa .mask {width:90%;overflow:hidden;margin:auto;}
#aromak_eusetsa .overflow { width:400%; -webkit-transform:translateZ(0); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; }
#aromak_eusetsa .slide {
  background: #f9f4f4 none repeat scroll 0 0;
  float: left;
  height: 215px;
  line-height: normal;
  padding: 1%;
  width: 25%;
  border: 3px solid rgba(154, 154, 154, 0);
  border-radius: 3px;
}
#aromak_eusetsa .slide {
  line-height:25px;
}
#controls { width:100%; }

#controls label {display:none;width:5%;height:59px;opacity:0.3;position:absolute;top:50%;margin-top:-30px;cursor:pointer;background: rgb(12, 12, 12);border-radius: 5px 0px 0px 5px;}

#controls label:hover { opacity:0.7; }

#sourcefor_information1:checked ~ #controls label:nth-child(2), #sourcefor_information2:checked ~ #controls label:nth-child(3), #sourcefor_information3:checked ~ #controls label:nth-child(4) { right:0; display:block; }

#sourcefor_information2:checked ~ #controls label:nth-child(1), #sourcefor_information3:checked ~ #controls label:nth-child(2), #sourcefor_information4:checked ~ #controls label:nth-child(3) { left:0; display:block; }

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

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

30 Апреля 2018 Просмотров: 6074 Комментариев: (0)

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

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

Kosten

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