ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой слайдер карусель для контента на 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; }

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

Демонстрация
2018-04-30 Просмотров: 4614 Комментарий: (0)

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

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

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

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