» »

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

Готовый адаптивный слайдер для сайта
Трудно представить сайт или официальный блог без адаптивного слайдера, который отлично вписался в основной стиль дизайна с помощью HTML и CSS3. Если логично рассуждать, то по сути слайдеры изображений могут многое предложить вашему веб-сайту. От самой стилистики, то предоставление информации, так как они идут и как дополнение к стилю ресурса, и безусловно выводят самый актуальный материал.

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

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

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

Слайдер минимальных изображений на CSS

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

Слайдер на CSS для сайта, который на чистом CSS

Установка:

HTML

Код
<section class="anikup-kobme-semov">
  <div class="vmesukisucem">
  <div class="col-rt-12">
  <div class="senumkad-kartinok infinity" id="slayd-kartinok1">
  <input type="radio" name="slides" checked="checked" id="slides_1"/>
  <input type="radio" name="slides" id="slides_2"/>
  <input type="radio" name="slides" id="slides_3"/>
  <input type="radio" name="slides" id="slides_4"/>
  <ul>
  <li><img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/sea-beach-holiday-vacation-large.jpg"/></li>
  <li><img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/alcohol-bar-drinks-party-large.jpg"/></li>
  <li><img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/lake-kajak-kayak-large.jpg"/></li>
  <li><img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/child-1871104_960_720.jpg"/></li>
  </ul>
  <div class="arrows">
  <label for="slides_1"></label>
  <label for="slides_2"></label>
  <label for="slides_3"></label>
  <label for="slides_4"></label>
  <label class="goto-first" for="slides_1"></label>
  <label class="goto-last" for="slides_4"></label>
  </div>
  <div class="avmesemniku">
  <div>
  <label for="slides_1"><img width="100" height="75" src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/sea-beach-holiday-vacation-large.jpg"/></label>
  <label for="slides_2"><img width="100" height="75" src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/alcohol-bar-drinks-party-large.jpg"/></label>
  <label for="slides_3"><img width="100" height="75" src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/lake-kajak-kayak-large.jpg"/></label>
  <label for="slides_4"><img width="100" height="75" src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/child-1871104_960_720.jpg"/></label>
  </div>
  </div>
  </div>

  </div>
  </div>
</section>

CSS

Код
section.anikup-kobme-semov {
  height: 850px;
}
.senumkad-kartinok {
  -moz-perspective: 1300px;
  -ms-perspective: 1300px;
  -webkit-perspective: 1300px;
  perspective: 1300px;
  display: inline-block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}
.senumkad-kartinok > input {
  display: none;
}
.senumkad-kartinok > input:nth-of-type(10):checked ~ ul li:first-of-type {
  margin-left: -900%;
}
.senumkad-kartinok > input:nth-of-type(9):checked ~ ul li:first-of-type {
  margin-left: -800%;
}
.senumkad-kartinok > input:nth-of-type(8):checked ~ ul li:first-of-type {
  margin-left: -700%;
}
.senumkad-kartinok > input:nth-of-type(7):checked ~ ul li:first-of-type {
  margin-left: -600%;
}
.senumkad-kartinok > input:nth-of-type(6):checked ~ ul li:first-of-type {
  margin-left: -500%;
}
.senumkad-kartinok > input:nth-of-type(5):checked ~ ul li:first-of-type {
  margin-left: -400%;
}
.senumkad-kartinok > input:nth-of-type(4):checked ~ ul li:first-of-type {
  margin-left: -300%;
}
.senumkad-kartinok > input:nth-of-type(3):checked ~ ul li:first-of-type {
  margin-left: -200%;
}
.senumkad-kartinok > input:nth-of-type(2):checked ~ ul li:first-of-type {
  margin-left: -100%;
}
.senumkad-kartinok > input:nth-of-type(1):checked ~ ul li:first-of-type {
  margin-left: 0%;
}
.senumkad-kartinok > ul {
  position: relative;
  width: 100%;
  height: 680px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  background-color: fff;
  border: 0px solid #3A3A3A;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.senumkad-kartinok > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}
.senumkad-kartinok > ul > li img {
  width: 100%;
}
.senumkad-kartinok > ul > li.scrollable {
  overflow-y: scroll;
}
.senumkad-kartinok > .avmesemniku {
  position: absolute;
  top: 695px;
  left: 50%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.senumkad-kartinok > .avmesemniku > div {
  margin-left: -100%;
}
.senumkad-kartinok > .avmesemniku label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 4px;
  padding: 4px 0;
  background: transparent none repeat scroll 0 0;
}
.senumkad-kartinok > .avmesemniku label:hover:after {
  opacity: 1;
}
.senumkad-kartinok > .avmesemniku label:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6px;
  margin-top: -6px;
  background: transparent none repeat scroll 0 0;
  border-radius: 50%;
  padding: 6px;
  opacity: 0;
}
.senumkad-kartinok > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.senumkad-kartinok.inside .avmesemniku {
  bottom: 10px;
  margin-bottom: 10px;
}
.senumkad-kartinok.inside .avmesemniku label {
  border: 1px solid #7e7e7e;
}
.senumkad-kartinok > input:nth-of-type(1):checked ~ .avmesemniku label:nth-of-type(1):after,
.senumkad-kartinok > input:nth-of-type(2):checked ~ .avmesemniku label:nth-of-type(2):after,
.senumkad-kartinok > input:nth-of-type(3):checked ~ .avmesemniku label:nth-of-type(3):after,
.senumkad-kartinok > input:nth-of-type(4):checked ~ .avmesemniku label:nth-of-type(4):after,
.senumkad-kartinok > input:nth-of-type(5):checked ~ .avmesemniku label:nth-of-type(5):after,
.senumkad-kartinok > input:nth-of-type(6):checked ~ .avmesemniku label:nth-of-type(6):after,
.senumkad-kartinok > input:nth-of-type(7):checked ~ .avmesemniku label:nth-of-type(7):after,
.senumkad-kartinok > input:nth-of-type(8):checked ~ .avmesemniku label:nth-of-type(8):after,
.senumkad-kartinok > input:nth-of-type(9):checked ~ .avmesemniku label:nth-of-type(9):after,
.senumkad-kartinok > input:nth-of-type(10):checked ~ .avmesemniku label:nth-of-type(10):after,
.senumkad-kartinok > input:nth-of-type(11):checked ~ .avmesemniku label:nth-of-type(11):after {
  opacity: 1;
}
.senumkad-kartinok > .arrows {
  position: absolute;
  left: 35px;
  top: 50%;
  width: 88%;
  height: 26px;
  padding: 0 31px;
  z-index: 100;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.senumkad-kartinok > .arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 2px -2px 0 1px rgba(255, 255, 255, 0.75);
  cursor: pointer;
  -moz-transition: box-shadow 0.15s, margin 0.15s;
  -o-transition: box-shadow 0.15s, margin 0.15s;
  -webkit-transition: box-shadow 0.15s, margin 0.15s;
  transition: box-shadow 0.15s, margin 0.15s;
}
.senumkad-kartinok > .arrows label:hover {
  box-shadow: inset 3px -3px 0 2px #fff;
  margin: 0 0px;
}
.senumkad-kartinok > .arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}
.senumkad-kartinok.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.senumkad-kartinok > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.senumkad-kartinok > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.senumkad-kartinok > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.senumkad-kartinok > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.senumkad-kartinok > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.senumkad-kartinok > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.senumkad-kartinok > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.senumkad-kartinok > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.senumkad-kartinok > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.senumkad-kartinok > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
.senumkad-kartinok > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
  display: block;
  left: 0;
  right: auto;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.senumkad-kartinok.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.senumkad-kartinok > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.senumkad-kartinok > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.senumkad-kartinok > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.senumkad-kartinok > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.senumkad-kartinok > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.senumkad-kartinok > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.senumkad-kartinok > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.senumkad-kartinok > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.senumkad-kartinok > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.senumkad-kartinok > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
.senumkad-kartinok > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
  display: block;
  right: 0;
  left: auto;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
/*#region MODULES */
/*#endregion */
/*___________________________________ LAYOUT ___________________________________ */
* {
  margin: 0;
  padding: 0;
}
::-webkit-scrollbar {
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: rgba(74, 168, 0, 0.6);
}
ul,
ol {
  padding-left: 40px;
}
#slayd-kartinok1 {
  margin: 0px;
  font-family: 'Lato';
}
#slayd-kartinok1 > ul > li:nth-of-type(3) {
  background: url();
}
#slayd-kartinok1 > input:nth-of-type(3):checked ~ ul #bg {
  width: 80%;
  padding: 22px;
  -moz-transition: .5s .5s;
  -o-transition: .5s .5s;
  -webkit-transition: .5s .5s;
  transition: .5s .5s;
}
#slayd-kartinok1 > input:nth-of-type(3):checked ~ ul #bg div {
  -moz-transform: translate(0);
  -ms-transform: translate(0);
  -o-transform: translate(0);
  -webkit-transform: translate(0);
  transform: translate(0);
  -moz-transition: .5s .9s;
  -o-transition: .5s .9s;
  -webkit-transition: .5s .9s;
  transition: .5s .9s;
}
#slayd-kartinok1 > input:nth-of-type(6):checked ~ ul #dex-sign {
  -moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
  -o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
  -webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
  animation: sign-anim 3.5s 0.5s steps(85) forwards;
}
#bg {
  color: #000;
  padding: 22px 0;
  position: absolute;
  left: 0;
  top: 16%;
  height: 20%;
  width: 0;
  z-index: 10;
  overflow: hidden;
}
#bg:before {
  content: '';
  position: absolute;
  left: -1px;
  top: 1px;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: url() 1px 23%;
  -webkit-filter: blur(7px);
}
#bg:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
#bg div {
  -moz-transform: translate(120%);
  -ms-transform: translate(120%);
  -o-transform: translate(120%);
  -webkit-transform: translate(120%);
  transform: translate(120%);
}
.scrollable p {
  padding: 30px;
  text-align: justify;
  line-height: 140%;
  font-size: 120%;
}
#center {
  text-align: center;
  margin-top: 25%;
}
#center a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-variant: small-caps;
}
/*__ LINK __ */
a.nice-link {
  position: relative;
  color: #71ad37;
}
h1 a.nice-link:after {
  border-bottom: 1px solid #a5ff0e;
}
a.nice-link:after {
  text-align: justify;
  display: inline-block;
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #a5ff0e;
  min-height: 100%;
  width: 0;
  max-width: 100%;
  background: #3A3A3A;
  -moz-transition: .3s;
  -o-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
a.nice-link:hover {
  color: #71ad37;
}
a.nice-link:hover:after {
  width: 100%;
}
/*__ SIGN __ */
#dex-sign {
  width: 255px;
  height: 84px;
  position: absolute;
  left: 33%;
  top: 45%;
  opacity: .7;
  background: url() 0 0 no-repeat;
}
#dex-sign:hover {
  opacity: 1;
  -webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}
@-webkit-keyframes sign-anim {
  to {
  background-position: 0 -7140px;
  }
}
@-moz-keyframes sign-anim {
  to {
  background-position: 0 -7140px;
  }
}
@keyframes sign-anim {
  to {
  background-position: 0 -7140px;
  }
}
/*IPAD*/
@media screen and (max-width: 768px) {
  section.anikup-kobme-semov {
  height: 450px;
  }
  .vmesukisucem {
  text-align: center;
  }
  .senumkad-kartinok > ul {
  width: 600px;
  height: 400px;
  }
  .senumkad-kartinok > .avmesemniku {
  display: none;
  }
}

/* PHONE */
@media screen and (max-width: 480px) {
  section.anikup-kobme-semov {
  height: 240px;
  }
  .vmesukisucem {
  text-align: center;
  }
  .senumkad-kartinok > ul {
  width: 300px;
  height: 200px;
  }
  .senumkad-kartinok > .avmesemniku {
  display: none;
  }
}

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

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

Этот адаптивный слайдер изображений поставляется с многочисленными настройками, такими как настраиваемая ширина и высота, миниатюры слайдов, слайды с автоматическим воспроизведением, кнопки навигации и многое другое.
2019-11-23 Загрузок: 1 Просмотров: 263 Комментарий: (0)

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

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

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

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