ZorNet.Ru — сайт для вебмастера » HTML и CSS » Слайдер для перемотки изображений на CSS

Слайдер для перемотки изображений на CSS

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

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

Приступаем к установке:

HTML

Код

CSS

Код

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; }
div#ilyustratsiya-kartinok { overflow: hidden; }
div#ilyustratsiya-kartinok figure img { width: 20%; float: left; }
div#ilyustratsiya-kartinok figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite;
}

.conanuing-tontelligen {
  width: 430px;
  height: 100%;
  margin: 439px;
  border: 4px solid #E8E8E8;
  box-shadow: 0px 0px 1px 1px #929292;
  border-radius: 3px;
  box-shadow: 1px 2px 14px 2px rgba(60, 57, 57, 0.34), 0px 6px 12px 1px rgba(80, 79, 79, 0.25);
}

Временной отрезок перемотки нужно выставлять в стилях CSS, там все функций находятся.

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

10 Сентября 2018 Просмотров: 1842 Комментариев: (0)

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

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

Kosten

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