ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивный слайдер карусель без jQuery

Адаптивный слайдер карусель без jQuery

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

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

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

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

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

Такой обзор идет самого небольшого экрана, который выходит в сеть.

Слайдер в виде круга с эффектом переворота изображения

Установочный процесс:

HTML

Код

<div class="veduvigakus">
  <div class="maket-dizayna">
  <div class="karuselen1" tabindex="1"></div>
  <div class="karuselen2" tabindex="1"></div>
  <div class="karuselen3" tabindex="1"></div>
  <div class="karuselen4" tabindex="1"></div>
  <div class="karuselen5" tabindex="1"></div>
  <div class="kaveles1 nav"></div>
  <div class="kaveles2 nav"></div>
  <div class="kaveles3 nav"></div>
  <div class="kaveles4 nav"></div>
  <div class="kaveles5 nav"></div>
  <div class="img1 vemseludan ">
  <img src="http://zornet.ru/_fr/56/2619726.jpg">
  <div class="kinoplonke1">
  <h3>Скрипты для uCoz</h3>
  <p>
Категория скрипты для uCoz является основной темой на сайте, где найдете уникальные коды дополнение и интересные решения.
  </p>

  </div>
  </div>
  <div class="img2 vemseludan">
  <img src="http://zornet.ru/_fr/56/6665122.jpg">
  <div class="kinoplonke2">
  <h3>Шаблоны для uCoz</h3>
  <p>
В категорий шаблоны для uCoz вам предоставлено оригинальные и тематические шаблоны. Также в оригинальном оформление под систему uCoz.
  </p>
  </div>
  </div>
  <div class="img3 vemseludan">
  <img src="http://zornet.ru/_fr/56/1166331.jpg">
  <div class="kinoplonke3">
  <h3>HTML и CSS</h3>
  <p>
Раздел предназначен для вебмастера где находиться материалы и статей на тему разработка и создание HTML и CSS. Здесь будет описание разного плана.
  </p>
  </div>
  </div>
  <div class="img4 vemseludan">
  <img src="http://zornet.ru/_fr/56/6303328.jpg">
  <div class="kinoplonke4">
  <h3>Меню для сайта</h3>
  <p>
Не может быть сайт без навигаций в категорий представлены скрипты меню для сайта в разнообразном дизайне и оттенке цвета.

  </p>
  </div>
  </div>
  <div class="img5 vemseludan">
  <img src="http://zornet.ru/_fr/56/3133287.jpg">
  <div class="kinoplonke5">
  <h3>JavaScript и jQuery</h3>
  <p>
Отличная подборка под материал JavaScript при помощи библиотеки для создания сайта, где идут оригинальной функций.
  </p>
  </div>
  </div>
  </div>
  </div>

CSS

Код

.veduvigakus{
  height: auto !important;
  height: 100%;
  min-height: 100%;

  padding-top: 1px;
  width: auto;
  max-width: 960px;
  margin: 0px auto;
  position: relative;
  }
  .maket-dizayna{
  width: 91.75%;
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  padding: 5px;
  background-color: #ddd;
  position: relative;
  }

  .img1{
  position: relative;
  max-width: 100%;
  -webkit-transition-property:opacity, z-index;
  -webkit-transition-duration:2s;
  -moz-transition-property:opacity, z-index;
  -moz-transition-duration:2s;
  -o-transition-property:opacity, z-index;
  -o-transition-duration:2s;
  transition-property:opacity, z-index;
  transition-duration:2s;
  opacity: 1;
  z-index: 1;
  }
  .img2, .img3, .img4, .img5{
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  -webkit-transition-property:opacity, z-index;
  -webkit-transition-duration:2s;
  -moz-transition-property:opacity, z-index;
  -moz-transition-duration:2s;
  -o-transition-property:opacity, z-index;
  -o-transition-duration:2s;
  transition-property:opacity, z-index;
  transition-duration:2s;
  opacity: 0;
  }

  img{
  max-width: 100%;
  vertical-align: middle;
  }

  .img1{
  animation: imgAnim 30s linear infinite;
  -webkit-animation: imgAnim 30s linear infinite;
  -moz-animation: imgAnim 30s linear infinite;
  -o-animation: imgAnim 30s linear infinite;
  }

  .img2{
  animation: imgAnim 30s linear 6s infinite;
  -webkit-animation: imgAnim 30s linear 6s infinite;
  -moz-animation: imgAnim 30s linear 6s infinite;
  -o-animation: imgAnim 30s linear 6s infinite;
  }
  .img3{
  animation: imgAnim 30s linear 12s infinite;
  -webkit-animation: imgAnim 30s linear 12s infinite;
  -moz-animation: imgAnim 30s linear 12s infinite;
  -o-animation: imgAnim 30s linear 12s infinite;
  }
  .img4{
  animation: imgAnim 30s linear 18s infinite;
  -webkit-animation: imgAnim 30s linear 18s infinite;
  -moz-animation: imgAnim 30s linear 18s infinite;
  -o-animation: imgAnim 30s linear 18s infinite;
  }
  .img5{
  animation: imgAnim 30s linear 24s infinite;
  -webkit-animation: imgAnim 30s linear 24s infinite;
  -moz-animation: imgAnim 30s linear 24s infinite;
  -o-animation: imgAnim 30s linear 24s infinite;
  }

  @keyframes imgAnim {
  0% { opacity: 0; z-index: 5; }
  8% { opacity: 1; z-index: 5; }
  17% { opacity: 1; z-index: 5;}
  25% { opacity: 0; z-index: 5; }
  100% { opacity: 0; z-index: 5; }
  }
  @-webkit-keyframes imgAnim {
  0% { opacity: 0; z-index: 5; }
  8% { opacity: 1; z-index: 5; }
  17% { opacity: 1; z-index: 5; }
  25% { opacity: 0; z-index: 5; }
  100% { opacity: 0; z-index: 5; }
  }
  @-o-keyframes imgAnim {
  0% { opacity: 0; z-index: 5;}
  8% { opacity: 1; z-index: 5;}
  17% { opacity: 1; z-index: 5; }
  25% { opacity: 0; z-index: 5; }
  100% { opacity: 0 }
  }
  @-moz-keyframes imgAnim {
  0% { opacity: 0; z-index: 5;}
  8% { opacity: 1; z-index: 5;}
  17% { opacity: 1; z-index: 5; }
  25% { opacity: 0; z-index: 5; }
  100% { opacity: 0; z-index: 5; }
  }


  .kinoplonke1, .kinoplonke2, .kinoplonke3, .kinoplonke4, .kinoplonke5{
  position: absolute;
  width: 35%;
  background-color: rgba(0, 0, 0, 0.56);
  bottom: 15px;
  padding: 10px;

  }
  .vemseludan h3{
  color: #fff;
  margin: 0;
  margin-bottom: 3px;
  font-family: Times New Roman;
  }
  .vemseludan p{
  color: #fff;
  margin: 0;
  font-size: 14px;
  font-family: Times New Roman;
  }

  .maket-dizayna:hover .vemseludan{
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
  }

  .karuselen1, .karuselen2, .karuselen3, .karuselen4, .karuselen5 {
  position: absolute;
  width: 14px;
  height: 14px;
  background: transparent;
  bottom: 25px;
  left: 50%;
  right: 10px;
  text-align: center;
  cursor: pointer;
  z-index: 1000;
  box-shadow: -1px -1px 1px 1px rgba(19, 18, 18, 0.54);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
  outline:none;
  }
  .karuselen1{
  margin-left: -50px;
  }
  .karuselen2{
  margin-left: -25px;
  }
  .karuselen4{
  margin-left: 25px;
  }
  .karuselen5{
  margin-left: 50px;
  }
  .kaveles1, .kaveles2, .kaveles3, .kaveles4, .kaveles5{
  position: absolute;
  width: 14px;
  height: 14px;
  background:#f7f7f7;
  bottom: 25px;
  left: 50%;
  right: 10px;
  text-align: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: -1px -1px 1px 1px rgba(12, 12, 12, 0.5);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
  outline:none;
  }
  .kaveles1{
  margin-left: -50px;
  }
  .kaveles2{
  margin-left: -25px;
  }
  .kaveles4{
  margin-left: 25px;
  }
  .kaveles5{
  margin-left: 50px;
  }

  .kaveles1{
  animation: butAnim 30s linear infinite;
  -webkit-animation: butAnim 30s linear infinite;
  -moz-animation: butAnim 30s linear infinite;
  -o-animation: butAnim 30s linear infinite;
  }
  .kaveles2{
  animation: butAnim 30s linear 6s infinite;
  -webkit-animation: butAnim 30s linear 6s infinite;
  -moz-animation: butAnim 30s linear 6s infinite;
  -o-animation: butAnim 30s linear 6s infinite;
  }
  .kaveles3{
  animation: butAnim 30s linear 12s infinite;
  -webkit-animation: butAnim 30s linear 12s infinite;
  -moz-animation: butAnim 30s linear 12s infinite;
  -o-animation: butAnim 30s linear 12s infinite;
  }
  .kaveles4{
  animation: butAnim 30s linear 18s infinite;
  -webkit-animation: butAnim 30s linear 18s infinite;
  -moz-animation: butAnim 30s linear 18s infinite;
  -o-animation: butAnim 30s linear 18s infinite;
  }
  .kaveles5{
  animation: butAnim 30s linear 24s infinite;
  -webkit-animation: butAnim 30s linear 24s infinite;
  -moz-animation: butAnim 30s linear 24s infinite;
  -o-animation: butAnim 30s linear 24s infinite;
  }
  @keyframes butAnim {
  0% {background-color: #fff;}
  8% {background-color: #7e8f98;}
  17% {background-color: #7e8f98;}
  25% {background-color: #fff;}
  100% {background-color: #fdfdfd;}
  }
  @-webkit-keyframes butAnim {
  0% {background-color: #7e8f98;}
  8% {background-color: #7e8f98;}
  17% {background-color: #7e8f98;}
  25% {background-color: #fff;}
  100% {background-color: #fdfdfd;}
  }
  @-o-keyframes butAnim {
  0% {background-color: #fff;}
  8% {background-color: #798d98;}
  17% {background-color: #798d98;}
  25% {background-color: #fff;}
  100% {background-color: #f7f9fb;}
  }
  @-moz-keyframes butAnim {
  0% {background-color: #fff;}
  8% {background-color: #798d98;}
  17% {background-color: #798d98;}
  25% {background-color: #fff;}
  100% {background-color: #f7f9fb;}
  }

  .maket-dizayna:hover .nav{
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
  }

  .karuselen1:focus ~ .vemseludan, .karuselen2:focus ~ .vemseludan, .karuselen3:focus ~ .vemseludan, .karuselen4:focus ~ .vemseludan, .karuselen5:focus ~ .vemseludan {
  -moz-animation: none;
  -webkit-animation: none;
  -o-animation: none;
  animation: none;
  }
  .karuselen1:focus ~ .nav, .karuselen2:focus ~ .nav, .karuselen3:focus ~ .nav, .karuselen4:focus ~ .nav, .karuselen5:focus ~ .nav{
  -moz-animation: none;
  -webkit-animation: none;
  -o-animation: none;
  animation: none;
  }

  .karuselen1:focus ~ .img1, .karuselen2:focus ~ .img2, .karuselen3:focus ~ .img3, .karuselen4:focus ~ .img4, .karuselen5:focus ~ .img5 {
  opacity: 1;
  z-index: 15;
  }


  .karuselen1:focus, .karuselen2:focus, .karuselen3:focus, .karuselen4:focus, .karuselen5:focus{
  background-color: #8699a4;
  }

  @media only screen and (max-width:740px) {
  .vemseludan p{
  display: none;
  }
  .vemseludan h3{
  font-size: 14px;
  text-align: center;
  }
  }

Что по адаптивности, то она схожая по своему функционалу с этим отзывчивым слайдером для сайтов. Где автоматически уменьшается экран, а за ним сам каркас слайда, и вся информация, которая находится внутри это описание с картинкой.

Есть свои плюсы и минусы, плюс заключается в том, что не нужно подключать библиотеку JQuery и JavaScript, так как все построено на чистом стиле.

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

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

28 Августа 2019 Загрузок: 3 Просмотров: 1670 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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