В этой статье я собираюсь построить два простых расширения для карусели Bootstrap . Сначала я создам полноэкранное слайд-шоу Bootstrap Carousel, а затем покажу, как рандомизировать первый слайд при загрузке страницы.
Но прежде чем углубляться в эти расширения, давайте начнем с создания карусели на основе стилей по умолчанию.
Построение Карусели
Чтобы создать карусель, мы воспользуемся базовым кодом для компонента карусели, который предоставляет Bootstrap:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="1.jpg" data-color="lightblue" alt="First Image"> <div class="carousel-caption d-none d-md-block"> <h5>First Image</h5> </div> </div> <div class="carousel-item"> <!-- slide content --> </div> <div class="carousel-item"> <!-- slide content --> </div> <!-- more slides --> </div> <!-- Controls --> <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> Обратите внимание, что каждое из наших изображений содержит собственный атрибут data-color . Позже мы будем использовать его значение в качестве запасного варианта на случай, если не удастся загрузить соответствующее изображение.
Следующим шагом будет инициализация карусели с помощью JavaScript и изменение предопределенных значений свойств interval и pause . Обратите внимание, что мы решили установить значение свойства pause в false потому что мы всегда хотим, чтобы цикл был активным:
$('.carousel').carousel({ interval: 6000, pause: "false" });
Выполнив эти простые шаги (и, конечно, импортировав необходимые файлы), мы теперь сможем построить первую версию карусели. Вот как это выглядит до сих пор:
Создание полноэкранных загрузочных слайдов Карусель
На этом этапе мы пойдем еще дальше, превратив существующую карусель в полноэкранное слайд-шоу Bootstrap Carousel. Для реализации этой обновленной версии мы должны добавить несколько пользовательских jQuery:
var $item = $('.carousel-item'); var $wHeight = $(window).height(); $item.height($wHeight); $item.addClass('full-screen'); $('.carousel img').each(function() { var $src = $(this).attr('src'); var $color = $(this).attr('data-color'); $(this).parent().css({ 'background-image' : 'url(' + $src + ')', 'background-color' : $color }); $(this).remove(); }); $(window).on('resize', function (){ $wHeight = $(window).height(); $item.height($wHeight); });
Далее мы добавим немного CSS:
.full-screen { background-size: cover; background-position: center; background-repeat: no-repeat; }
В приведенном выше коде мы делаем следующее:
- Просмотрите наши изображения и получите значения атрибутов
srcиdata-color. - Найдите их прямого родителя (
.item) и назначьтеfull-screenкласс вместе с несколькими фоновыми свойствами. Имейте в виду, что значения этих свойств зависят от значений вышеупомянутых атрибутов (которые различны для каждого изображения). - Установите высоту родительского элемента, равную высоте области просмотра. Важно отметить, что мы должны пересчитать высоту окна браузера, когда оно меняет размер (используя событие
resize). - Удалите
imgэлементыimg, так как мы полагаемся на фон.
Хотя это и не обязательно, давайте сделаем одно последнее изменение. Когда страница загрузится, мы добавим active класс к первому слайду, используя jQuery, а не жестко закодировали его в HTML:
Итак, вместо этого:
<!-- Wrapper for slides --> <div class="carousel-inner"> <div class="carousel-item active">
Мы делаем это:
$item.eq(0).addClass('active');
Это позволяет нам предотвратить небольшое переключение, которое может произойти между двумя различными высотами (до и после внесенных нами изменений) первого слайда.
Вот новая версия нашего слайд-шоу:
Это может помочь просмотреть полную версию страницы, чтобы увидеть отличие от предыдущего примера.
Инициализация случайного слайда
Иногда мы можем захотеть показать случайный слайд при загрузке страницы. Чтобы создать эту новую функциональность, мы должны обновить наш код. Для начала нам нужно удалить active класс по умолчанию из первого слайда, а также из первого индикатора.
Вот оригинальный код:
<!-- etc... --> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <!-- etc... --> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="carousel-item active"> <!-- etc... -->
Который сейчас становится:
<!-- etc... --> <li data-target="#carouselExampleIndicators" data-slide-to="0"></li> <!-- etc... --> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="carousel-item"> <!-- etc... -->
Если вы используете jQuery для добавления active класса к первому слайду, как я объяснял ранее, вам нужно будет удалить этот код после добавления нового кода случайного слайда.
Теперь мы можем добавить следующий фрагмент кода в существующий jQuery:
var $numberofSlides = $('.carousel-item').length; var $currentSlide = Math.floor((Math.random() * $numberofSlides)); $('.carousel-indicators li').each(function(){ var $slideValue = $(this).attr('data-slide-to'); if($currentSlide == $slideValue) { $(this).addClass('active'); $item.eq($slideValue).addClass('active'); } else { $(this).removeClass('active'); $item.eq($slideValue).removeClass('active'); } });
- Мы начнем с получения общего количества слайдов и используем это значение, чтобы найти случайный слайд.
- Мы перебираем показатели карусели и получаем значение атрибута
data-slide-to. Если случайное число соответствует значению этого атрибута, мы назначаемactiveкласс соответствующему слайду и индикатору. Если этого не происходит, мы удаляем его из целевых элементов.
Конечно, если вы не хотите сочетать это поведение со слайд-шоу на всю страницу, смело удаляйте ненужный код.
Вы можете увидеть эту функциональность в следующей демонстрации CodePen:
Если вы нажмете кнопку RERUN на встраивании CodePen, вы увидите первоначальное изменение изображения при каждой загрузке.
Потенциал дальнейших настроек?
Помимо расширений, представленных в этой статье, есть много других способов изменить предопределенное поведение компонента карусели. Если вы чувствуете себя авантюрным, вот несколько других идей, которые вы можете изучить:
- создавать дополнительные эффекты анимации (например,
fadeилиscale) при переключении между слайдами - создать наложение изображения
- рандомизируйте следующий и предыдущий слайды (используйте пользовательское событие
slide.bs.carousel).
Вывод
В этой статье я показал вам, как повысить гибкость ваших проектов Bootstrap, настроив компонент карусели. Хотя не все находят карусели более полезными, у вас может потребоваться, чтобы клиент запросил такую функцию, и, возможно, эти настройки пригодятся.
Если у вас есть основы Bootstrap за поясом, но вы не знаете, как поднять свои навыки Bootstrap на следующий уровень, ознакомьтесь с нашим курсом «Создайте свой первый сайт с Bootstrap 4», чтобы быстро и весело познакомиться с мощью Bootstrap.