Замена самодельного слайдера на стандартную Bootstrap Carousel в Joomla 6

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

Октобокс Triopo 120 см с креплением Bowens отзыв Слайдер создает динамику и вызывают ощущение, что на сайте что-то происходит – этим он привлекает внимание и подталкивает к дальнейшему просмотра контента сайта.

Можно купить и установить расширение, можно нанять программиста, но можно и самостоятельно совершенно бесплатно установить слайдер в шаблон Joomla 6, а сэкономленные средства вложить в пиво.

Ниже я раскажу о самом простом способе создания слайдера для header сайта для крутой анимации картинок, погнали!

В Joomla 6 "из коробки" уже идёт мощный и гибкий компонент Bootstrap 5, включающий в себя, помимо прочего, полноценный слайдер (карусель). Вместо того чтобы подключать самописные скрипты и тратить время на их поддержку, логично использовать готовое решение.

В чем преимущество?

Всё уже на борту: Bootstrap является частью ядра Joomla 6 – не нужно устанавливать и обновлять сторонние библиотеки.
Адаптивность и доступность: Слайдер из коробки отлично работает на мобильных устройствах (поддерживает свайп), адаптируется под любую ширину экрана и содержит правильные ARIA-метки для скринридеров.
Меньше кода – меньше проблем: отсутствует свой CSS и JavaScript, остается только несколько строчек HTML – сайт становится чище и легче.
Гибкость настроек: Управление скоростью, автопроигрыванием, паузой при наведении и другими параметрами делается простыми атрибутами или CSS, как показано ниже.

Короче говоря: не изобретаем велосипед, а используем то, что уже есть в Joomla 6!

Пошаговая инструкция по внедрению слайдера в шаблон Joomla

1. Проверка наличия и подключение компонента Carousel

Убедись, что файл библиотеки существует:

\media\vendor\bootstrap\js\carousel.min.js

Добавляем загрузку скрипта – открой файл шаблона:

\templates\vodkomoto\index.php

Найди в нём строку:

$wa = $this->getWebAssetManager();

После неё добавь:

// Подключаем Bootstrap Carousel
$wa->useScript('bootstrap.carousel');

Это гарантирует, что JavaScript для работы карусели будет загружен на всех страницах. Код всего несколько килобайт.

Для оптимизации можно добавить carousel.min.js в файл скрипта шаблона и убрать один HTTP запрос.

2. HTML-код карусели

в спойлере – для шаблона, где должен отображаться слайдер (например, в хедере).

Код html слайдера

<!-- Bootstrap vodkomotornik Carousel -->
<div id="headerCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- Индикаторы (точки) -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#headerCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Слайд 1"></button>
        <button type="button" data-bs-target="#headerCarousel" data-bs-slide-to="1" aria-label="Слайд 2"></button>
        <button type="button" data-bs-target="#headerCarousel" data-bs-slide-to="2" aria-label="Слайд 3"></button>
        <button type="button" data-bs-target="#headerCarousel" data-bs-slide-to="3" aria-label="Слайд 4"></button>
        <button type="button" data-bs-target="#headerCarousel" data-bs-slide-to="4" aria-label="Слайд 5"></button>
    </div>

    <!-- Слайды -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="/media/templates/site/vodkomoto/ism/001.avif" class="d-block w-100" alt="Фотосессии на катере" loading="lazy">
            <div class="carousel-caption">
                <div class="caption">На катере</div>
            </div>
        </div>
        <div class="carousel-item">
            <img src="/media/templates/site/vodkomoto/ism/002.avif" class="d-block w-100" alt="Фотосессии на автомобиле" loading="lazy">
            <div class="carousel-caption">
                <div class="caption">На автомобиле</div>
            </div>
        </div>
        <div class="carousel-item">
            <img src="/media/templates/site/vodkomoto/ism/003.avif" class="d-block w-100" alt="Фотосессии на мотоцикле" loading="lazy">
            <div class="carousel-caption">
                <div class="caption">На мотоцикле</div>
            </div>
        </div>
        <div class="carousel-item">
            <img src="/media/templates/site/vodkomoto/ism/004.avif" class="d-block w-100" alt="Фотосессии на автодоме" loading="lazy">
            <div class="carousel-caption">
                <div class="caption">На автодоме</div>
            </div>
        </div>
        <div class="carousel-item">
            <img src="/media/templates/site/vodkomoto/ism/005.avif" class="d-block w-100" alt="Эксклюзивные фотосессии Калининград" loading="lazy">
            <div class="carousel-caption">
                <div class="caption">Эксклюзивные фотосессии</div>
            </div>
        </div>
    </div>

    <!-- Стрелки навигации -->
    <button class="carousel-control-prev" type="button" data-bs-target="#headerCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Предыдущий</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#headerCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Следующий</span>
    </button>
</div>
<!-- End Bootstrap vodkomotornik Carousel -->

3. Настройка скорости и эффекта перехода

Скорость анимации смены слайдов регулируется через CSS.

Чтобы сделать анимацию медленнее (например, 1.5 секунды):

#headerCarousel .carousel-item {
    transition: transform 1.5s ease-in-out;
}

Чтобы сделать анимацию быстрее (например, 0.5 секунды):

#headerCarousel .carousel-item {
    transition: transform 0.5s ease-in-out;
}

Если нужен эффект затухания вместо скольжения (это тоже меняет "скорость" смены кадра), добавь класс carousel-fade к основному контейнеру:

<div id="headerCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">

В режиме затухания анимируется прозрачность, и управляется она другим CSS-свойством:

#headerCarousel.carousel-fade .carousel-item {
    transition: opacity 1.5s ease-in-out;
}

Сравнение режимов анимации

Режим	Что анимируется	CSS-свойство для скорости
`carousel` (по умолчанию)	Сдвиг по горизонтали	`transition: transform ...`
`carousel-fade`	Прозрачность	`transition: opacity ...`

Ну и конечно же .css – без него никак!

Стили .css для работы слайдера

/*-- header vodkomotornik lite slider --*/
#headerCarousel{height:220px;overflow:hidden;position:relative}
#headerCarousel .carousel-inner,#headerCarousel .carousel-item{height:100%}
#headerCarousel .carousel-item img{height:100%;width:100%;object-fit:cover}
#headerCarousel .carousel-caption{position:absolute;bottom:0;left:0;right:0;padding:0;background:#0003;color:#fff;text-align:center}
#headerCarousel .caption{font-size:.8rem;line-height:1;font-family:monospace}
#headerCarousel .carousel-indicators{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:10;margin:0;padding:0;list-style:none}
#headerCarousel .carousel-indicators button{width:10px;height:10px;border-radius:50%;background-color:#ccc;border:none;margin:0 2px;padding:0;text-indent:-9999px;cursor:pointer;transition:background-color .3s}
#headerCarousel .carousel-indicators button.active{background-color:#fff}
#headerCarousel .carousel-control-prev,#headerCarousel .carousel-control-next{width:30px;height:30px;background:#0000004d;border-radius:50%;top:50%;transform:translateY(-50%);opacity:1;display:flex;align-items:center;justify-content:center}
#headerCarousel .carousel-control-prev{left:10px}
#headerCarousel .carousel-control-next{right:10px}
#headerCarousel .carousel-control-prev-icon,#headerCarousel .carousel-control-next-icon{width:20px;height:20px;background-size:100%}
#headerCarousel .carousel-control-prev:hover,#headerCarousel .carousel-control-next:hover{background:#00000080}
#headerCarousel .carousel-indicators [data-bs-target]{all:unset;width:10px;height:10px;border-radius:50%;background-color:#ccc;margin:0 2px;cursor:pointer}
#headerCarousel .carousel-indicators .active{background-color:#fff}
#headerCarousel .carousel-item{transition:transform 1.5s ease-in-out}
#headerCarousel.carousel-fade .carousel-item{transition:opacity 2.5s ease-in-out}
#headerCarousel.carousel-fade .carousel-item.active{transition:opacity 2.5s ease-in-out}
/*-- End header vodkomotornik lite slider --*/

4. Управление прокруткой слайдов (интервал)

Интервал смены слайдов задается атрибутом data-bs-interval. Если атрибут не указан, Bootstrap автоматически использует значение по умолчанию – 5000 миллисекунд (5 секунд).

Пример с интервалом 3 секунды и эффектом затухания:

<div id="headerCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="3000">

Используя .webp можно сократить размер файла фото на 20-30%, а используя .avif можно еще уменьшить вес файла на 10-15%!

Фотография, фотосессии, интерьерная и промышленная съемка, 360° 3D виртуальные туры Калининград

Замена самодельного слайдера на стандартную Bootstrap Carousel в Joomla 6

В чем преимущество?

Пошаговая инструкция по внедрению слайдера в шаблон Joomla

1. Проверка наличия и подключение компонента Carousel

2. HTML-код карусели

3. Настройка скорости и эффекта перехода

Сравнение режимов анимации

4. Управление прокруткой слайдов (интервал)

slider joomla nemplate, слайдер для сайта, шаблон, css, js

Комментарии

Добавить комментарий

Похожие статьи:

Зайти на борт

Объявления

Присоединяйся!

Присоединяйся в ВК!

Апартамент Калининград

Новое на сайте

Удивительное явление на зимой на Балтике в Пионерском: ледяные торосы

Open Server Panel – пошаговая инструкция со скриншотами по установке м

Обновление Joomla 5 до 6: пропавшие материалы и меню, решение ошибки T

Фотосессия в новостройке Калининграда: квартира «серый ключ» как арт-п

Godox S3 – раскрываю тайну нового адаптера для крепления накамерных в

Новое фото в галерее

На сайте