Призрачные карусели

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

Класс каруселей Spectre:

• карусель: этот класс используется для создания интерфейса карусели.
• carousel-locator: этот класс используется для представления изображения или содержимого карусели.
• карусель-контейнер: этот класс используется для хранения элементов карусели.
• carousel-item: этот класс используется для хранения изображения карусели.
• carousel-nav: этот класс используется для создания карусельной навигации.

Синтаксис:

<div class="carousel">
    <input class="carousel-locator" ...>
    <div class="carousel-container">
           <figure class="carousel-item">
               ...
           </figure>
    </div>
    <div class="carousel-nav">
        ...
    </div>
</div>

Пример 1: В этом примере мы создадим карусели с двумя изображениями, максимум можно сделать в спектре, равном 8, но этим также можно манипулировать.

Выход:

Пример 2. В этом примере мы создадим карусель с тремя изображениями.

Выход:

Ссылка: https://picturepan2.github.io/spectre/experimentals/carousels.html