ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Полноэкранный стиль слайдера на jQuery

Полноэкранный стиль слайдера на jQuery

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

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

Подключаем стили и библиотеку

Код

HTML

Код

<div id="imageCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
  <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#imageCarousel" data-slide-to="1"></li>
  <li data-target="#imageCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
  <div class="carousel-item active"></div>
  <div id="target" class="carousel-item"></div>
  <div class="carousel-item"></div>
  </div>
  <a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>
</div>

CSS

Код

.carousel .carousel-item {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.carousel .carousel-item:first-of-type {
  background-image: url("http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/gadget.jpg");
}

.carousel .carousel-item:nth-of-type(2) {
  background-image: url("http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/auto.jpg");
}

.carousel .carousel-item:last-of-type {
  background-image: url("http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/design.jpg");
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  width: 50px;
  height: 50px;
}

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

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

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

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

Теперь вы знаете, как создать адаптивную карусель или слайдер с помощью начальной загрузки.

02 Ноября 2019 Просмотров: 1031 Комментариев: (0)

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

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

Kosten

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