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

Адаптивный слайдер и слайд-шоу для сайта

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

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

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

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

Простой адаптивный слайдер для сайта на CSS3

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

Слайдер изображений CSS3 для вашего сайта

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

HTML

Код

<div class="vesabeteprodug">
<article id="kadigecs-avonmadekib">
<input checked="checked" name="kadigecs-avonmadekib" id="soking1" type="radio">
<input name="kadigecs-avonmadekib" id="soking2" type="radio">
<input name="kadigecs-avonmadekib" id="soking3" type="radio">
<input name="kadigecs-avonmadekib" id="soking4" type="radio">
<input name="kadigecs-avonmadekib" id="soking5" type="radio">
<div id="numatenko-zamudsam">
<div id="overflow">
<div class="inner">

<article>
<div class="businewe-asindividua"><h3>Сайт ZORNE.RU 1</h3></div>
<a href="TRANSITION 1"><img src="http://zornet.ru/ABVUN/sarunolas/zornet/kotas/01_wallpapers.jpg"> </a></article>


<article>
<div class="businewe-asindividua"><h3>Интернет ресурс 2</h3></div>
<a href="TRANSITION 2"><img src="http://zornet.ru/ABVUN/sarunolas/zornet/kotas/comprehensi.jpg"> </a></article>

<article>
<div class="businewe-asindividua"><h3>Шаблоны для ресурса 3</h3></div>
<a href="TRANSITION 3"><img src="http://zornet.ru/ABVUN/sarunolas/zornet/kotas/gamadvanced.jpg"> </a></article>

  <article>
<div class="businewe-asindividua"><h3>Скрипты для сайта</h3></div>
<a href="TRANSITION 4"><img src="http://zornet.ru/ABVUN/sarunolas/zornet/kotas/askuyrpapers.jpg"> </a></article>

<article>
<div class="businewe-asindividua"><h3>Стилистика портала</h3></div>
<a href="TRANSITION 5"><img src="http://zornet.ru/ABVUN/sarunolas/zornet/kotas/mprovemen.jpg"> </a></article>

</div>
</div>
</div>
<div id="datection-ksadeub">
<label for="soking1"></label>
<label for="soking2"></label>
<label for="soking3"></label>
<label for="soking4"></label>
<label for="soking5"></label>
</div>
</article>
</div>

CSS

Код

#kadigecs-avonmadekib {
  text-align: center;
  margin: 0 auto;
  max-width: 640px;
  height:320px;
}
#kadigecs-avonmadekib input {
  display: none;
}
#kadigecs-avonmadekib label, a {
  color: #ef023f;
  cursor: pointer;
  text-decoration: none;
}
#kadigecs-avonmadekib label:hover {
  color: #ff0042 !important;
}
#soking1:checked ~ #numatenko-zamudsam .inner { margin-left:0; }
#soking2:checked ~ #numatenko-zamudsam .inner { margin-left:-100%; }
#soking3:checked ~ #numatenko-zamudsam .inner { margin-left:-200%; }
#soking4:checked ~ #numatenko-zamudsam .inner { margin-left:-300%; }
#soking5:checked ~ #numatenko-zamudsam .inner { margin-left:-400%; }
#overflow {
  width: 100%;
  overflow: hidden;
}
#numatenko-zamudsam article img {
  width: 100%;
}
#numatenko-zamudsam .inner {
  width: 500%;
  line-height: 0;
}
#numatenko-zamudsam article {
  width: 20%;
  float: left;
}
#datection-ksadeub {
  margin: -8% 0 0 84%;
  width: 15%;
  height: 50px;
}
#datection-ksadeub label {
  display: none;
  width: 50px;
  height: 50px;
}
#active {
  margin: 23% 0 0;
  text-align: center;
}
#active label {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #f89e67;
}
#active label:hover {
  background: #ccc;
  border-color: #777 !important;
}
#datection-ksadeub label:hover {
  opacity: 0.8;
}
#soking1:checked ~ #datection-ksadeub label:nth-child(2),
#soking2:checked ~ #datection-ksadeub label:nth-child(3),
#soking3:checked ~ #datection-ksadeub label:nth-child(4),
#soking4:checked ~ #datection-ksadeub label:nth-child(5),
#soking5:checked ~ #datection-ksadeub label:nth-child(1) {
  background: url('http://4.bp.blogspot.com/-UIZu65eikkQ/VZ34eU1MJwI/AAAAAAAAAIY/vwJyNNu8Cdg/s1600/next.png') no-repeat;
  float: right;
  margin: 0 10px 0 0;
  display: block;
  background-color:#ef023f;
}
#soking1:checked ~ #datection-ksadeub label:nth-child(5),
#soking2:checked ~ #datection-ksadeub label:nth-child(1),
#soking3:checked ~ #datection-ksadeub label:nth-child(2),
#soking4:checked ~ #datection-ksadeub label:nth-child(3),
#soking5:checked ~ #datection-ksadeub label:nth-child(4) {
  background: url('http://2.bp.blogspot.com/-5CImAKrafOY/VZ34euMhR9I/AAAAAAAAAIc/5gpYLrn6Ns0/s1600/prev.png') no-repeat;
  float: left;
  margin: 0 0 0 -17px;
  display: block;
  background-color:#ef023f;
}
/* Description Box */
.businewe-asindividua {
  width:10%;
  color: #FFFFFF;
  font-style: italic;
  line-height: 20px;
  margin-top: 260px;
  opacity: 0;
  position: absolute;
  text-align: left;
  overflow-wrap: break-word;
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.businewe-asindividua h3 {
  color: #FFFFFF;
  margin: 0 0 5px;
  font-weight: normal;
  font-size: 16px;
  font-style: normal;
  background: none repeat scroll 0 0 #222222;
  padding: 5px;
}
/* sokingr Styling */
#numatenko-zamudsam {
  margin: 45px 0 0;
  padding: 1%;
  background: #222222;
  border:3px #222222 solid;
  max-width:640px;
  max-height:320px;
}
#numatenko-zamudsam article img {
width:100%;
height:320px;
}
/* Animation */
#numatenko-zamudsam .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); /* easeInOutQuart */
  -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); /* easeInOutQuart */
}
#kadigecs-avonmadekib {
  -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;
}
#datection-ksadeub 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;
}
#soking1:checked ~ #numatenko-zamudsam article:nth-child(1) .businewe-asindividua,
#soking2:checked ~ #numatenko-zamudsam article:nth-child(2) .businewe-asindividua,
#soking3:checked ~ #numatenko-zamudsam article:nth-child(3) .businewe-asindividua,
#soking4:checked ~ #numatenko-zamudsam article:nth-child(4) .businewe-asindividua,
#soking5:checked ~ #numatenko-zamudsam article:nth-child(5) .businewe-asindividua {
  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;
}
/*Responsive Style */
@media screen and (max-width: 960px) {
#soking1:checked ~ #datection-ksadeub label:nth-child(5), #soking2:checked ~ #datection-ksadeub label:nth-child(1), #soking3:checked ~ #datection-ksadeub label:nth-child(2), #soking4:checked ~ #datection-ksadeub label:nth-child(3), #soking5:checked ~ #datection-ksadeub label:nth-child(4){
margin: 0 0 0 -50px;
float:left;
}
.businewe-asindividua,.businewe-asindividua h3{
color:transparent;
background-color:transparent;
}
}
@media screen and (max-width: 768px){
#soking1:checked ~ #datection-ksadeub label:nth-child(5), #soking2:checked ~ #datection-ksadeub label:nth-child(1), #soking3:checked ~ #datection-ksadeub label:nth-child(2), #soking4:checked ~ #datection-ksadeub label:nth-child(3), #soking5:checked ~ #datection-ksadeub label:nth-child(4){
margin: 0 0 0 -50px;
float:left;;
}
.businewe-asindividua,.businewe-asindividua h3{
color:transparent;
background-color:transparent;
}
}
@media screen and (max-width: 620px){
#soking1:checked ~ #datection-ksadeub label:nth-child(5), #soking2:checked ~ #datection-ksadeub label:nth-child(1), #soking3:checked ~ #datection-ksadeub label:nth-child(2), #soking4:checked ~ #datection-ksadeub label:nth-child(3), #soking5:checked ~ #datection-ksadeub label:nth-child(4){
margin: 0 0 0 -70px;
float:left;
}
.businewe-asindividua,.businewe-asindividua h3{
color:transparent;
background-color:transparent;
}
}
@media screen and (max-width: 420px){
#soking1:checked ~ #datection-ksadeub label:nth-child(5), #soking2:checked ~ #datection-ksadeub label:nth-child(1), #soking3:checked ~ #datection-ksadeub label:nth-child(2), #soking4:checked ~ #datection-ksadeub label:nth-child(3), #soking5:checked ~ #datection-ksadeub label:nth-child(4){
margin: 0 0 0 -80px;
float:left;
}
#numatenko-zamudsam article img {
height:280px;
}
.businewe-asindividua,.businewe-asindividua h3{
color:transparent;
background-color:transparent;
}
}
@media screen and (max-width: 320px){
#soking1:checked ~ #datection-ksadeub label:nth-child(5), #soking2:checked ~ #datection-ksadeub label:nth-child(1), #soking3:checked ~ #datection-ksadeub label:nth-child(2), #soking4:checked ~ #datection-ksadeub label:nth-child(3), #soking5:checked ~ #datection-ksadeub label:nth-child(4){
margin: 0 0 0 -80px;
float:left;
}
#numatenko-zamudsam article img {
height:220px;
}
.businewe-asindividua,.businewe-asindividua h3{
color:transparent;
background-color:transparent;
}
}

В коде обнаружите TRANSITION, что нужно заменить на ссылку с картинкой и CAPTION, здесь наменяем на ссылку, куда при клике задействован переход. Остается поставить по месту, это может быть как отдельная страница, так в элементе дизайна, где все автоматически должно по месту, это ширина и длинна, что установится самостоятельно.

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

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

06 Января 2019 Загрузок: 1 Просмотров: 1191 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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