ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Слайдер для презентации с помощью CSS

Слайдер для презентации с помощью CSS

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

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

Так реально смотрится на полном экране:



Установка:

HTML

Код
<image-slider index="1" animation-delay="1500">
  <ul slot="images">
  <li><img src="https://placekitten.com/512/512?image=1" alt="a cute kitten"></li>
  <li><img src="https://placekitten.com/512/512?image=2" alt="another cute kitten"></li>
  <li><img src="https://placekitten.com/512/512?image=3" alt="such a cute kitten"></li>
  <li><img src="https://placekitten.com/512/512?image=4" alt="an even more cute kitten"></li>
  <li><img src="https://placekitten.com/512/512?image=5" alt="another even more cute kitten"></li>
  <li><img src="https://placekitten.com/512/512?image=6" alt="super cute kitten"></li>
  <li><img src="https://placekitten.com/512/512?image=7" alt="super dooper cute kitten"></li>
  <li><img src="https://placekitten.com/512/512?image=8" alt="awww such a cute kitten"></li>
  <li><img src="https://placekitten.com/512/512?image=9" alt="kitten"></li>
  </ul>
  </image-slider>
  <nav>
  <ul>
  <li><a href="#image1" class="active">1</a></li>
  <li><a href="#image2">2</a></li>
  <li><a href="#image3">3</a></li>
  <li><a href="#image4">4</a></li>
  <li><a href="#image5">5</a></li>
  <li><a href="#image6">6</a></li>
  <li><a href="#image7">7</a></li>
  <li><a href="#image8">8</a></li>
  <li><a href="#image9">9</a></li>
  </ul>
  </nav>

CSS

Код
image-slider {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;  
}

image-slider ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

image-slider ul li {
  margin: 0;
  padding: 0;
}

image-slider ul li img {
  display: block;
  width: 100vmin;
  height: 100vmin;
}

image-slider:not([index]) ul li:not(:first-child),
image-slider[index="1"] ul li:not(:nth-child(1)),  
image-slider[index="2"] ul li:not(:nth-child(2)),
image-slider[index="3"] ul li:not(:nth-child(3)),
image-slider[index="4"] ul li:not(:nth-child(4)),
image-slider[index="5"] ul li:not(:nth-child(5)),
image-slider[index="6"] ul li:not(:nth-child(6)),
image-slider[index="7"] ul li:not(:nth-child(7)),
image-slider[index="8"] ul li:not(:nth-child(8)),
image-slider[index="9"] ul li:not(:nth-child(9)) {
  display: none;
}

nav {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: block;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
}

nav ul li {
  padding: 0;
  margin: 16px;
}

nav ul li a {
  font-variant-numeric: tabular-nums;
  display: block;
  padding: 8px;
  width: 40px;
  font-size: 16px;
  border: 2px solid #fff;
  background: #127;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

nav ul li a.active {
  background: #fff;
  color: #127;
  border: 2px solid #fff;
   
}

JS


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

Демонстрация
2020-01-29 Загрузок: 1 Просмотров: 259 Комментарий: (0)

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

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

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

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