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

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

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

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

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

Слайдер на CSS для сайта в адаптивной верстке

Установка:

HTML

Код

<div id="pevekun_slayda">
  <div class="vasucenia">
  <div class="pevekun_slayda">
  <div class="kidesamod"></div>
  <div class="opisaniye">
  <div class="opisaniye-txt">
  <h1>ZorNet.Ru — сайт для вебмастера</h1>
  <h2>Первое краткое описание</h2>
  </div>
  </div>
  <div class="image">
  <img src="http://zornet.ru/Images/izobrazheniye/1773.jpg">
  </div>
  </div>
  <div class="pevekun_slayda">
  <div class="kidesamod"></div>
  <div class="opisaniye">
  <div class="opisaniye-txt">
  <h1>Список значков шрифта</h1>
  <h2>Второе описание по тематике.</h2>
  </div>
  </div>
  <div class="image">
  <img src="http://zornet.ru/Images/izobrazheniye/1772.jpg">
  </div>
  </div>
  <div class="pevekun_slayda">
  <div class="kidesamod"></div>
  <div class="opisaniye">
  <div class="opisaniye-txt">
  <h1>Мини профиль для сайта</h1>
  <h2>Также все идет под описание.</h2>
  </div>
  </div>
  <div class="image">
  <img src="http://zornet.ru/Images/izobrazheniye/1773.jpg">
  </div>
  </div>
  <div class="pevekun_slayda">
  <div class="kidesamod"></div>
  <div class="opisaniye">
  <div class="opisaniye-txt">
  <h1>Тематическое название</h1>
  <h2>И закрепленное к нему описание.</h2>
  </div>
  </div>
  <div class="image">
  <img src="http://zornet.ru/Images/izobrazheniye/1772.jpg">
  </div>
  </div>
  </div>
  <div class="switch">
  <ul>
  <li>
  <div class="on"></div>
  </li>
  <li></li>
  <li></li>
  <li></li>
  </ul>
  </div>
</div>

CSS

Код

#pevekun_slayda{
  width:100%;
  height:500px;
  position:relative;
  overflow:hidden;
}
@keyframes load{
  from{left:-100%;}
  to{left:0;}
}
.vasucenia{
  width:400%;
  height:100%;
  position:relative;
  -webkit-animation:slide 30s infinite;
  -moz-animation:slide 30s infinite;
  animation:slide 30s infinite;
}
.pevekun_slayda{
  width:25%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.slide img{
  width:100%;
  height:100%;
}
.slide img{
  width:100%;
  height:100%;
}
.image{
  width:100%;
  height:100%;
}
.image img{
  width:100%;
  height:100%;
}

/* kidesamod */
.kidesamod{
  border:500px solid transparent;
  /*-------------------Essa linha------------------*/
  border-left:800px solid rgba(23,117,177,1);
  /*-------------------Essa linha------------------*/
  border-bottom:0;
  position:absolute;
  bottom:0;

}

/* opisaniyes */
.opisaniye{
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
}
.opisaniye-txt{
  width:400px;
  height:150px;
  float:left;
  position:relative;
  top:300px;
  -webkit-animation:opisaniye-s 7.5s infinite;
  -moz-animation:opisaniye-s 7.5s infinite;
  animation:opisaniye-s 7.5s infinite;
}
.opisaniye-txt h1{
  font-family:Arial;
  text-transform:uppercase;
  font-size:24px;
  color:#fff;
  text-align:left;
  margin-left:30px;
  padding-bottom:10px;
}
.opisaniye-txt h2{
  font-family:arial;
  font-weight:normal;
  font-size:14px;
  font-style:italic;
  color:#fff;
  text-align:left;
  margin-left:30px;
}

/* Switch */
.switch{
  width:120px;
  height:10px;
  position:absolute;
  bottom:50px;
  z-index:99;
  left:30px;
}
.switch > ul{
  list-style:none;
}
.switch > ul > li{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#333;
  float:left;
  margin-right:5px;
  cursor:pointer;
}
.switch ul{
  overflow:hidden;
}
.on{
  width:100%;
  height:100%;
  border-radius:50%;
  background: rgba(23,117,177,1);
  position:relative;
  -webkit-animation:on 30s infinite;
  -moz-animation:on 30s infinite;
  animation:on 30s infinite;
}

/* Animation */
@-webkit-keyframes slide{
  0%,100%{
  margin-right:0%;
  }
  21%{
  margin-right:0%;
  }
  25%{
  margin-right:-100%;
  }
  46%{
  margin-right:-100%;
  }
  50%{
  margin-right:-200%;
  }
  71%{
  margin-right:-200%;
  }
  75%{
  margin-right:-300%;
  }
  96%{
  margin-right:-300%;
  }
}
@-moz-keyframes slide{
  0%,100%{
  margin-right:0%;
  }
  21%{
  margin-right:0%;
  }
  25%{
  margin-right:-100%;
  }
  46%{
  margin-right:-100%;
  }
  50%{
  margin-right:-200%;
  }
  71%{
  margin-right:-200%;
  }
  75%{
  margin-right:-300%;
  }
  96%{
  margin-right:-300%;
  }
}
@keyframes slide{
  0%,100%{
  margin-left:0%;
  }
  21%{
  margin-left:0%;
  }
  25%{
  margin-left:-100%;
  }
  46%{
  margin-left:-100%;
  }
  50%{
  margin-left:-200%;
  }
  71%{
  margin-left:-200%;
  }
  75%{
  margin-left:-300%;
  }
  96%{
  margin-left:-300%;
  }
}

@-webkit-keyframes opisaniye-s{
  0%{left:-420px;}
  10%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}
@-moz-keyframes opisaniye-s{
  0%{left:-420px;}
  10%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}
@keyframes opisaniye-s{
  0%{left:-420px;}
  10%{left:20px;}
  15%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}

@-webkit-keyframes on{
  0%,100%{
  margin-left:0%;
  }
  21%{
  margin-left:0%;
  }
  25%{
  margin-left:15px;
  }
  46%{
  margin-left:15px;
  }
  50%{
  margin-left:30px;
  }
  71%{
  margin-left:30px;
  }
  75%{
  margin-left:45px;
  }
  96%{
  margin-left:45px;
  }
}

@-moz-keyframes on{
  0%,100%{
  margin-left:0%;
  }
  21%{
  margin-left:0%;
  }
  25%{
  margin-left:15px;
  }
  46%{
  margin-left:15px;
  }
  50%{
  margin-left:30px;
  }
  71%{
  margin-left:30px;
  }
  75%{
  margin-left:45px;
  }
  96%{
  margin-left:45px;
  }
}

@keyframes on{
  0%,100%{
  margin-left:0%;
  }
  21%{
  margin-left:0%;
  }
  25%{
  margin-left:15px;
  }
  46%{
  margin-left:15px;
  }
  50%{
  margin-left:30px;
  }
  71%{
  margin-left:30px;
  }
  75%{
  margin-left:45px;
  }
  96%{
  margin-left:45px;
  }
}

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

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

11 Апреля 2020 Загрузок: 4 Просмотров: 972 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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