« Полноэкранный слайдер карусель на Bootstrap с использованием HTML, CSS и JS »

Описание материала:

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

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

Итак, сегодня мы делимся полной страницей Bootstrap карусель с CSS. Там мы использовали bootstrap и CSS, в основном вся программа основана на bootstrap. Для запуска слайда есть только строка JS, которую мы поместили в HTML код. Как мы знаем, bootstrap - это библиотека HTML, CSS и JS.

Просмотр слайдера на разных устройствах:

Полноэкранный слайдер карусель на Bootstrap с использованием HTML, CSS


Установка:

Подключаем дополнительные скрипты и стили:
Код
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>


HTML код:
Код
<!--( uFive.Ru )-->
<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>
<script>
  $('.carousel').carousel();
</script>


CSS код:
Код
/* ( uFive.Ru ) */
.carousel .carousel-item {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.carousel .carousel-item:first-of-type {
  background-image: url("https://images4.alphacoders.com/878/8788.png");
}

.carousel .carousel-item:nth-of-type(2) {
  background-image: url("https://wallpaperscave.ru/images/original/18/03-07/abstract-colors-26178.jpg");
}

.carousel .carousel-item:last-of-type {
  background-image: url("https://wallpaperscave.ru/images/original/18/05-30/cgi-3d-52681.jpg");
}

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


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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Меню и навигация | Просмотров: 108


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

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