Простейший слайдер изображений на CSS (без Jquery)

Описание: Прочии темы
Модератор: Aleksandr

Дим M
Автор темы, Администратор
Администратор
Аватара
Дим M
Автор темы, Администратор
Администратор
Сообщения: 1608
Зарегистрирован: 5 апреля 2013
С нами: 10 лет 11 месяцев

#1 Дим » 1 марта 2016, 16:30

Простейший слайдер изображений на CSS (без Jquery).jpg
Простейший слайдер изображений на CSS (без Jquery).jpg (87.71 КБ) 1078 просмотров


HTML

Код: Выделить всё

<div class="wrapper">
  <div class="container">
    <ul class=clearfix>
    <li><a href="#"><img src="адрес картинки" alt="" /></a></li> 
    
<li><a href="#"><img src="адрес картинки" alt="" /></a></li>
    <li><a href="#"><img src="адрес картинки" alt="" /></a></li>
    <li><a href="#"><img src="адрес картинки" alt="" /></a></li>
     <li><a href="#"><img src="адрес картинки" alt="" /></a></li>
  </ul>
  </div>
</
div>


CSS (main.css)

Код: Выделить всё

* {
  box-sizing: border-box;
}

.
clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.
wrapper {
  max-width: 768px;
  position: relative;
  margin: 0 auto;
}
.
wrapper .container {
  overflow: hidden;
  position: relative;
  margin: 50px 0;
  border: 8px solid;
  background-clip: content-box;
}
.
wrapper .container ul {
  padding: 0;
  width: 500%;
  overflow: auto;
}
.
wrapper .container ul:hover li {
  animation-play-state: paused;
}
.
wrapper .container ul li {
  position: relative;
  left: 0;
  display: block;
  float: left;
  width: 20%;
  animation-name: glide;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 25s;
}
.
wrapper .container ul li a {
  display: block;
  text-decoration: none;
}
.
wrapper .container ul li a img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

@
keyframes glide {
  0% {
    left: 0%;
  }
  17% {
    left: 0%;
  }
  20% {
    left: -20%;
  }
  37% {
    left: -20%;
  }
  40% {
    left: -40%;
  }
  57% {
    left: -40%;
  }
  60% {
    left: -60%;
  }
  77% {
    left: -60%;
  }
  80% {
    left: -80%;
  }
  95% {
    left: -80%;
  }
  100% {
    left: 0%;
  }
}


Подключение CSS

Код: Выделить всё

<link href="css/main.css" rel="stylesheet" type="text/css" />
[center]i love you [s]mxIni[/s] Mysql[/center]


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Прочее»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 3 гостя