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

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

Это простой слайдер, который отлично адаптивен для мобильных аппаратов, но главное создан на чистом CSS, где идут 2 кнопки для показания слайда. Вам здесь не нужно подключать скрипты или библиотеки, так как полностью функционал выстроен на CSS3, что можно заметить, он представлен немного больше обычного. Для того, чтоб установить его на своем сайте, то здесь придется скопировать HTML разметку и стили, где устанавливаем по месту, где вы хотите наблюдать информационное изображение.

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

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

Проверка с мобильного гаджет:

Адаптивный CSS слайдер с красивым переключателем

Здесь рассмотрим с нескольких аппаратов, где будут мониторы и экраны:

Установка:

Подключаем шрифтовые кнопки для переключателя:

Код

HTML

Код

<section id="amovesen-picevukes">
  <div class="danusevus">
  <input checked="" type="radio" name="saliduneg" id="udampen1">
  <input type="radio" name="saliduneg" id="udampen2">
  <input type="radio" name="saliduneg" id="udampen3">
  <input type="radio" name="saliduneg" id="udampen4">
  <div class="saliduneg-danusevus">
  <div class="inner">
  <article>
  <div class="akilad top-left">
  <h3>Скрипты для сайтов</h3></div>
  <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/first.jpg">
  </article>
  <article>
  <div class="akilad bottom-right">
  <h3>Шаблоны для сайтов</h3></div>
  <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/second.jpg">
  </article>
  <article>
  <div class="akilad bottom-left">
  <h3>Стилистика CSS</h3></div>
  <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/third.jpg">
  </article>
  <article>
  <div class="akilad top-right">
  <h3>Изображение слайда</h3></div>
  <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/four.jpg">
  </article>
  </div>
  </div>
  <div class="saliduneg-prev-next-control">
  <label for="udampen1"></label>
  <label for="udampen2"></label>
  <label for="udampen3"></label>
  <label for="udampen4"></label>
  </div>
  <div class="saliduneg-dot-control">
  <label for="udampen1"></label>
  <label for="udampen2"></label>
  <label for="udampen3"></label>
  <label for="udampen4"></label>
  </div>
  </div>
</section>

CSS

Код

#amovesen-picevukes .danusevus{
max-width:75em;
margin:1em auto;
position:relative;
}

#amovesen-picevukes input{
display:none;
}

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

#amovesen-picevukes article{
width:20%;
float:left;
position:relative;
}

#amovesen-picevukes article img{
width:100%;
}

#amovesen-picevukes .saliduneg-prev-next-control{
height:50px;
position:absolute;
top:50%;
width:100%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}

#amovesen-picevukes .saliduneg-prev-next-control label{
display:none;
width:40px;
height:40px;
border-radius:50%;
background:#fff;
opacity:.7;
}

#amovesen-picevukes .saliduneg-prev-next-control label:hover{
opacity:1;
}

#amovesen-picevukes .saliduneg-dot-control{
position:absolute;
width:100%;
bottom:0;
text-align:center;
}

#amovesen-picevukes .saliduneg-dot-control label{
cursor:pointer;
border-radius:5px;
display:inline-block;
width:10px;
height:10px;
background:#bbb;
-webkit-transition:all .3s;
-moz-transition:all .3s;
transition:all .3s;
}

#amovesen-picevukes .saliduneg-dot-control label:hover{
background:#ccc;
border-color:#777;
}

#amovesen-picevukes .akilad{
position:absolute;
font-style:italic;
line-height:20px;
opacity:0;
color:#000;
text-align:left;
-webkit-transition:all 1s ease-out .6s;
-moz-transition:all 1s ease-out .6s;
transition:all 1s ease-out .6s;
}

#amovesen-picevukes .akilad h3{
color:#fcfff4;
margin:0 0 5px;
font-weight:400;
font-size:1.5em;
font-style:normal;
}

#amovesen-picevukes .akilad.top-left{
top:30px;
left:30px;
}

#amovesen-picevukes .akilad.top-right{
top:30px;
right:30px}

#amovesen-picevukes .akilad.bottom-left{
bottom:30px;
left:30px;
}

#amovesen-picevukes .akilad.bottom-right{
bottom:30px;
right:30px;
}

#amovesen-picevukes .saliduneg-danusevus{
width:100%;
overflow:hidden;
border-radius:5px;
box-shadow:1px 1px 4px #666;
background:#fff;
background:#fcfff4;
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
transition:all .5s ease-out;
}

#amovesen-picevukes .saliduneg-danusevus .inner{
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
-webkit-transition:all .8s cubic-bezier(.77,0,.175,1);
-moz-transition:all .8s cubic-bezier(.77,0,.175,1);
transition:all .8s cubic-bezier(.77,0,.175,1);
}

#amovesen-picevukes #udampen1:checked~.saliduneg-prev-next-control label:nth-child(2)::after,#amovesen-picevukes #udampen1:checked~.saliduneg-prev-next-control label:nth-child(5)::after,#amovesen-picevukes #udampen2:checked~.saliduneg-prev-next-control label:nth-child(1)::after,#amovesen-picevukes #udampen2:checked~.saliduneg-prev-next-control label:nth-child(3)::after,#amovesen-picevukes #udampen3:checked~.saliduneg-prev-next-control label:nth-child(2)::after,#amovesen-picevukes #udampen3:checked~.saliduneg-prev-next-control label:nth-child(4)::after,#amovesen-picevukes #udampen4:checked~.saliduneg-prev-next-control label:nth-child(3)::after,#amovesen-picevukes #udampen4:checked~.saliduneg-prev-next-control label:nth-child(5)::after,#amovesen-picevukes #slide5:checked~.saliduneg-prev-next-control label:nth-child(1)::after,#amovesen-picevukes #slide5:checked~.saliduneg-prev-next-control label:nth-child(4)::after{
font-family:FontAwesome;
font-style:normal;
font-weight:400;
text-decoration:inherit;
margin:0;
line-height:38px;
font-size:3em;
display:block;
color:#777;
}

#amovesen-picevukes #udampen1:checked~.saliduneg-prev-next-control label:nth-child(2)::after,#amovesen-picevukes #udampen2:checked~.saliduneg-prev-next-control label:nth-child(3)::after,#amovesen-picevukes #udampen3:checked~.saliduneg-prev-next-control label:nth-child(4)::after,#amovesen-picevukes #udampen4:checked~.saliduneg-prev-next-control label:nth-child(5)::after,#amovesen-picevukes
#slide5:checked~.saliduneg-prev-next-control label:nth-child(1)::after{content:"\f105";padding-left:15px; cursor: pointer;
}

#amovesen-picevukes #udampen1:checked~.saliduneg-prev-next-control label:nth-child(2),#amovesen-picevukes #udampen2:checked~.saliduneg-prev-next-control label:nth-child(3),#amovesen-picevukes #udampen3:checked~.saliduneg-prev-next-control label:nth-child(4),#amovesen-picevukes #udampen4:checked~.saliduneg-prev-next-control label:nth-child(5),#amovesen-picevukes #slide5:checked~.saliduneg-prev-next-control label:nth-child(1){
display:block;
float:right;
margin-right:5px;
}

#amovesen-picevukes #udampen1:checked~.saliduneg-prev-next-control label:nth-child(5),#amovesen-picevukes #udampen2:checked~.saliduneg-prev-next-control label:nth-child(1),#amovesen-picevukes #udampen3:checked~.saliduneg-prev-next-control label:nth-child(2),#amovesen-picevukes #udampen4:checked~.saliduneg-prev-next-control label:nth-child(3),#amovesen-picevukes #slide5:checked~.saliduneg-prev-next-control label:nth-child(4){
display:block;
float:left;
margin-left:5px;
}

#amovesen-picevukes #udampen1:checked~.saliduneg-prev-next-control label:nth-child(5)::after,#amovesen-picevukes #udampen2:checked~.saliduneg-prev-next-control label:nth-child(1)::after,#amovesen-picevukes #udampen3:checked~.saliduneg-prev-next-control label:nth-child(2)::after,#amovesen-picevukes #udampen4:checked~.saliduneg-prev-next-control label:nth-child(3)::after,#amovesen-picevukes #slide5:checked~.saliduneg-prev-next-control label:nth-child(4)::after{content:"\f104";padding-left:8px; cursor: pointer;
}

#amovesen-picevukes #udampen1:checked~.saliduneg-dot-control label:nth-child(1),#amovesen-picevukes #udampen2:checked~.saliduneg-dot-control label:nth-child(2),#amovesen-picevukes #udampen3:checked~.saliduneg-dot-control label:nth-child(3),#amovesen-picevukes #udampen4:checked~.saliduneg-dot-control label:nth-child(4),#amovesen-picevukes #slide5:checked~.saliduneg-dot-control label:nth-child(5){
background:#333;
}

#amovesen-picevukes #udampen1:checked~.saliduneg-danusevus article:nth-child(1) .akilad,#amovesen-picevukes #udampen2:checked~.saliduneg-danusevus article:nth-child(2) .akilad,#amovesen-picevukes #udampen3:checked~.saliduneg-danusevus article:nth-child(3) .akilad,#amovesen-picevukes #udampen4:checked~.saliduneg-danusevus article:nth-child(4) .akilad,#amovesen-picevukes #slide5:checked~.saliduneg-danusevus article:nth-child(5) .akilad{
opacity:1;
}

#amovesen-picevukes #udampen1:checked~.saliduneg-danusevus .inner{
margin-left:0;
}

#amovesen-picevukes #udampen2:checked~.saliduneg-danusevus .inner{
margin-left:-100%;
}

#amovesen-picevukes #udampen3:checked~.saliduneg-danusevus .inner{
margin-left:-200%;
}

#amovesen-picevukes #udampen4:checked~.saliduneg-danusevus .inner{
margin-left:-300%;
}

#amovesen-picevukes #slide5:checked~.saliduneg-danusevus .inner{
margin-left:-400%;
}

@media only screen and (max-width:850px) and (min-width:450px){
#amovesen-picevukes .saliduneg-danusevus{
border-radius:0;
  }
}

@media only screen and (max-width:450px){
#amovesen-picevukes .saliduneg-danusevus{
border-radius:0;
  }

#amovesen-picevukes .saliduneg-danusevus .akilad{
opacity:0;
  }
}

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

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

Здесь показано одно из решений этой проблемы, это не использовать JavaScript, а только добавляя awesome под стрелки, что на современных ресурсах они уже установлены.

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

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

21 Февраля 2020 Загрузок: 3 Просмотров: 1560 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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