ZorNet.Ru — сайт для вебмастера » HTML и CSS » Элегантно адаптивный слайдер с чистом CSS

Элегантно адаптивный слайдер с чистом CSS

Один из простых адаптивных слайдеров, который смотрится элегантно по дизайн, но главное реагирует на разные размеры экрана при помощи CSS3. Это уже понятно для многих, что слайдер изображений является отличным или подходящим способом для того, чтоб представить несколько изображений в одном каркасе. Где все сделано красиво и стильно, это удобство для пользователя, что также касается видео или графики на вашем сайте. И подойдет под многие, если не сказать под все тематические наклонение, как игрового характера сайта или интернет магазина.

Здесь представлен полностью чистый слайдер изображений CSS, а точнее все работает на стилях и вся настройка автоматически в там происходит. Так, что это один из слайдеров изображений, который созданный только с использованием HTML и CSS, где не используется javascript или jquery. В отличие от других, здесь если вы решили установить его в небольшой блок, то он автоматически выставит ширину, где как на большом мониторе и на мобильном экране смотрится корректно.

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

Все проверено на тестовой площадке, где реально слайд так выглядит:

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

HTML

Код

<article id="geskonsaved">
<div>
</div>
<input checked type='radio' name='geskonsaved' id='vedselon1'/>
<input type='radio' name='geskonsaved' id='vedselon2'/>
<input type='radio' name='geskonsaved' id='vedselon3'/>
<input type='radio' name='geskonsaved' id='vedselon4'/>
<input type='radio' name='geskonsaved' id='vedselon5'/>
<div id="kasugelma">
  <div id="gselvabapam">
  <div class="inner">
  <article>
  <img src="http://zornet.ru/ABVUN/Abaavag/25999214.jpg"/>
  </article>
  <article>
  <div class='lodemakeg'>
  <bar>Ключевое слово №1</bar>
  </div>
  <img src="http://zornet.ru/ABVUN/Abaavag/xzgdrgd.jpg"/>
  </article>
  <article>
  <div class='lodemakeg'>
  <bar>Ключевое слово №2 <a href="#">Ссылка перехода</a></bar>
  </div>
  <img src="http://zornet.ru/ABVUN/Abaavag/uyrtegdfa.jpg"/>
  </article>
  <article>
  <div class='lodemakeg'>
  <bar>Ключевое слово №3 <a href="#">переход</a></bar>
  </div>
  <img src="http://zornet.ru/ABVUN/Abaavag/hsad.jpg"/>
  </article>
  <article>
  <div class='lodemakeg'>
  <bar>Ключевое слово №4</bar>
  </div>
  <img src="http://zornet.ru/ABVUN/Abaavag/kudsam.jpg"/>
  </article>
  </div>
  </div>
</div>
<div id="vegilamesvam">
  <label for='vedselon1'></label>
  <label for='vedselon2'></label>
  <label for='vedselon3'></label>
  <label for='vedselon4'></label>
  <label for='vedselon5'></label>
</div>
<div id="vacoped-ugemakun">
  <label for='vedselon1'></label>
  <label for='vedselon2'></label>
  <label for='vedselon3'></label>
  <label for='vedselon4'></label>
  <label for='vedselon5'></label>
</div>
</article>

CSS

Код

label,a{
color:brown;
cursor:pointer;
text-decoration:none;
font-style:italic}

label:hover,a:hover{
color:#ddd!important}

*{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box}

label,#vacoped-ugemakun,img{
-moz-user-select:none;
-webkit-user-select:none}

.nudelogsel{
display:block;
height:0;
overflow:hidden}

#geskonsaved{
margin:0 auto}

input{
display:none}

#vedselon1:checked ~ #kasugelma .inner{
margin-left:0}

#vedselon2:checked ~ #kasugelma .inner{
margin-left:-100%}

#vedselon3:checked ~ #kasugelma .inner{
margin-left:-200%}

#vedselon4:checked ~ #kasugelma .inner{
margin-left:-300%}

#vedselon5:checked ~ #kasugelma .inner{
margin-left:-400%}

#gselvabapam{
width:100%;
overflow:hidden}

article img{
width:100%}

#kasugelma .inner{
width:500%;
line-height:0}

#kasugelma article{
width:20%;
float:left}

#vegilamesvam{
margin:-25% 0 0 0;
width:100%;
height:50px}

#vegilamesvam label{
display:none;
width:79px;
height:79px;
opacity:0.5}

#vegilamesvam label:hover{
opacity:0.8}

#vacoped-ugemakun{
position:relative;
z-index:5;
margin:16% 0 0;
text-align:center}

#vacoped-ugemakun label{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
display:inline-block;
width:10px;
height:10px;
background:#bbb}

#vacoped-ugemakun label:hover{
background:#333;
border-color:#777!important}

#vedselon1:checked ~ #vegilamesvam label:nth-child(2),#vedselon2:checked ~ #vegilamesvam label:nth-child(3),#vedselon3:checked ~ #vegilamesvam label:nth-child(4),#vedselon4:checked ~ #vegilamesvam label:nth-child(5),#vedselon5:checked ~ #vegilamesvam label:nth-child(1){
background:url('https://0.s3.envato.com/files/84450220/img/next.png') no-repeat;
float:right;
margin:0 12px 0 0;
display:block}

#vedselon1:checked ~ #vegilamesvam label:nth-child(5),#vedselon2:checked ~ #vegilamesvam label:nth-child(1),#vedselon3:checked ~ #vegilamesvam label:nth-child(2),#vedselon4:checked ~ #vegilamesvam label:nth-child(3),#vedselon5:checked ~ #vegilamesvam label:nth-child(4){
background:url('https://0.s3.envato.com/files/84450220/img/previous.png') no-repeat;
float:left;
margin:0 0 0 -6px;
display:block}

#vedselon1:checked ~ #vacoped-ugemakun label:nth-child(1),#vedselon2:checked ~ #vacoped-ugemakun label:nth-child(2),#vedselon3:checked ~ #vacoped-ugemakun label:nth-child(3),#vedselon4:checked ~ #vacoped-ugemakun label:nth-child(4),#vedselon5:checked ~ #vacoped-ugemakun label:nth-child(5){
background:#000;
opacity:0.6;
border-color:#fff!important;
border:2px solid #fff}

.lodemakeg{
line-height:20px;
margin:0 0 -150%;
position:absolute;
padding:320px 12px;
opacity:0;
color:#fff;
text-transform:none;
font-family:'Open Sans',Arial,Helvetica,sans-serif;
text-align:left;
font-size:18px}

.lodemakeg bar{
display:inline-block;
padding:10px;
background:#000;
border-radius:3px 3px 3px 3px;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}

#kasugelma {
  position: relative;
  padding: 2px;
  border: 1px solid #b9b0b0;
  margin: 45px 0 0;
  background: #ccc8c8;
  background: -webkit-linear-gradient(#ece7e7,#efeaea 20%,#e8e1e1 80%,#cec8c8);
  background: linear-gradient(#f5f5f5,#f9f7f7 20%,#e0dddd 80%,#d4d1d1);
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  -webkit-box-shadow: 0 0 3px rgba(14, 14, 14, 0.2);
  -moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  box-shadow: 0 0 3px rgba(16, 16, 16, 0.2);
}

#kasugelma .inner{
-webkit-transform:translateZ(0);
-webkit-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);
-moz-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);
-ms-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);
-o-transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);
transition:all 800ms cubic-bezier(0.770,0.000,0.175,1.000);
-webkit-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);
-moz-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);
-ms-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);
-o-transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000);
transition-timing-function:cubic-bezier(0.770,0.000,0.175,1.000)}

#geskonsaved{
-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}

#vegilamesvam label{
-webkit-transform:translateZ(0);
-webkit-transition:opacity 0.2s ease-out;
-moz-transition:opacity 0.2s ease-out;
-o-transition:opacity 0.2s ease-out;
transition:opacity 0.2s ease-out}

#vedselon1:checked ~ #kasugelma article:nth-child(1) .lodemakeg,#vedselon2:checked ~ #kasugelma article:nth-child(2) .lodemakeg,#vedselon3:checked ~ #kasugelma article:nth-child(3) .lodemakeg,#vedselon4:checked ~ #kasugelma article:nth-child(4) .lodemakeg,#vedselon5:checked ~ #kasugelma article:nth-child(5) .lodemakeg{
opacity:1;
-webkit-transition:all 1s ease-out 0.6s;
-moz-transition:all 1s ease-out 0.6s;
-o-transition:all 1s ease-out 0.6s;
transition:all 1s ease-out 0.6s}

#vegilamesvam,#vegilamesvam label,#kasugelma,#vacoped-ugemakun,#vacoped-ugemakun label{
-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}

#geskonsaved{
max-width:960px}

@media only screen and (max-width:850px) and (min-width:450px){
#geskonsaved #vegilamesvam{
margin:-25% 0 0 5%;
width:90%;
height:50px}

#geskonsaved #vegilamesvam label{
-moz-transform:scale(0.9);
-webkit-transform:scale(0.9);
-o-transform:scale(0.9);
-ms-transform:scale(0.9);
transform:scale(0.9)}

#geskonsaved #kasugelma .lodemakeg{
padding:280px 12px}

#geskonsaved #kasugelma{
padding:2px 0;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0}

#geskonsaved #vacoped-ugemakun{
margin:15% 0 0}

}

@media only screen and (max-width:450px){
#geskonsaved #vegilamesvam{
margin:-28% 0 0 1%;
width:100%;
height:70px}

#geskonsaved #vacoped-ugemakun{
margin:12% 0 0}

#geskonsaved #kasugelma{
padding:2px 0;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0}

#geskonsaved #kasugelma .lodemakeg{
opacity:0!important}

#geskonsaved #vegilamesvam label{
-moz-transform:scale(0.7);
-webkit-transform:scale(0.7);
-o-transform:scale(0.7);
-ms-transform:scale(0.7);
transform:scale(0.7)}

}

@media only screen and (min-width:850px){
body{
padding:0 80px}

}

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

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

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

31 Марта 2019 Загрузок: 1 Просмотров: 1105 Комментариев: (4)

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

СКАЧАТЬ

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

Kosten

Комментарии: 4
Порядок вывода комментариев: YaVi 01 Апреля 2019 16:59¹ 0 Отличный слайдер) Kosten 01 Апреля 2019 17:41² 0 YaVi, зная немного тебя, то ты его если будешь устанавливать, то все равно доработаешь, как ты его видишь. YaVi 01 Апреля 2019 17:51³ 0 Возможно ты прав) Но я просто напросто не вижу слайдер у себя на сайте, не зайдет он) Так что дорабатывать я его точно не буду) Kosten 01 Апреля 2019 18:21⁴ 0 Но а почему бы и нет, здесь на чистых стилях сделано, можно в будку поставить, он автоматически должен по блоку установку сделать. Хотя все от тематики зависит, есть такие, где без слайдера просто край, и он нужен как реклама своего материала.