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

Прочии темы

Модератор: Aleksandr

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

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

Сообщение #1 Дим » 1 марта 2016, 16:30

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


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" />
i love you mxIni Mysql

! ! !


  • Похожие темы
    Статистика
    Последнее сообщение

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

Кто сейчас на форуме

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