Bootstrap Carousel (слайдер)

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

Как это работает

  • Carousel - это слайд-шоу для циклического просмотра серии контента, созданное с помощью 3D-преобразований CSS и небольшого количества JavaScript. Оно работает с серией изображений, текстом или пользовательской разметкой. Он также включает поддержку предыдущих / следующих элементов управления и индикаторов.

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

    Единственным исключением являются карусели с автозапуском с data-bs-ride="carousel" атрибутом, поскольку они инициализируются автоматически при загрузке страницы. Если вы используете автозапуск carousels с атрибутом data, не инициализируйте явно те же carousels методом конструктора.

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

Эффект анимации этого компонента зависит от медиа-запроса prefers-reduced-motion. Смотрите раздел уменьшенное движение в документации по доступности.

Основные примеры

Вот базовый пример карусели с тремя слайдами. Обратите внимание на элементы управления "Предыдущий" / "Cледующий". Рекомендуется использовать элементы <button>, но вы также можете использовать элементы <a> с role="button".

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Результат:

Карусели автоматически не нормализуют размеры слайдов. Таким образом, вам может потребоваться использовать дополнительные утилиты или пользовательские стили для соответствующего размера содержимого. Хотя карусели поддерживают предыдущие / следующие элементы управления и индикаторы, они явно не требуются. Добавляйте и настраивайте по своему усмотрению.

Вы должны добавить класс .active к одному из слайдов, иначе карусель не будет видна. Также не забудьте установить уникальный параметр id на .carousel для дополнительных элементов управления, особенно если вы используете несколько каруселей на одной странице. Элементы управления и индикатора должны иметь атрибут data-bs-target (или href для ссылок), который соответствует id из элемента .carousel.

Индикаторы

Вы можете добавлять индикаторы в карусель вместе с элементами управления "Предыдущий" / "Следующий". Индикаторы позволяют пользователям переходить непосредственно к определенному слайду.

<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Результат:

Подписи

Вы можете добавлять подписи к своим слайдам с помощью .carousel-caption элемента внутри любого .carousel-item. Их можно легко спрятать на небольших видовых экранах, как показано ниже, с помощью дополнительных утилит отображения. Изначально мы скрываем их с помощью .d-none и возвращаем на устройства среднего размера с помощью .d-md-block.

<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Первый слайд label</h5>
        <p>Некоторый репрезентативный контент-заполнитель для первого слайда</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Второй слайд label</h5>
        <p>Некоторый репрезентативный контент-заполнитель для второго слайда</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Третий слайд label</h5>
        <p>Некоторый репрезентативный контент-заполнитель для третьего слайда</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Результат:

Кроссфейд

Добавьте .carousel-fade в карусель, чтобы анимировать слайды с плавным переходом вместо слайда. В зависимости от содержимого вашей карусели (например, слайдов только с текстом), вы можете захотеть добавить .bg-body или какой-нибудь пользовательский CSS в .carousel-item для правильного кроссфейдинга.

<div id="carouselExampleFade" class="carousel slide carousel-fade">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Результат:

Автоматическое воспроизведение каруселей

Вы можете настроить автозапуск каруселей при загрузке страницы, установив для параметра ride значение carousel. Автозапуск каруселей автоматически приостанавливается при наведении курсора мыши. Таким поведением можно управлять с помощью опции pause. В браузерах, поддерживающих API видимости страницы, карусель прекращает работу, когда веб-страница не видна пользователю (например, когда вкладка браузера неактивна или когда окно браузера свернуто).

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

Смотрите Критерий успеха WCAG 2.1 2.2.2 Приостановка, остановка, скрытие.

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Результат:

Если для параметра ride установлено значение true, а не carousel, карусель не будет автоматически запускаться при загрузке страницы. Вместо этого он запустится только после первого взаимодействия с пользователем.

<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Результат:

Добавьте data-bs-interval="" в .carousel-item, чтобы изменить время задержки между автоматическим переходом к следующему элементу.

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Результат:

Автоматическое воспроизведение каруселей без элементов управления

Вот карусель только со слайдами. Обратите внимание на наличие .d-block и .w-100 на изображениях карусели, чтобы предотвратить выравнивание изображений браузером по умолчанию.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>
Результат:

Отключить пролистывание касанием

Карусели поддерживают прокрутку влево / вправо на устройствах с сенсорным экраном для перемещения между слайдами. Это можно отключить, установив для параметра touch значение false.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Результат:

Темный вариант

Устарел в версии 5.3.0

Добавьте .carousel-dark в .carousel для более темных элементов управления, индикаторов и подписей. Элементы управления инвертируются по сравнению с их заливкой белым цветом по умолчанию с помощью filter CSS-свойства. Подписи и элементы управления имеют дополнительные переменные Sass, которые настраивают color и background-color.

Внимание! Темные варианты компонентов устарели в версии 5.3.0 с введением цветовых режимов. Вместо добавления .carousel-dark установите data-bs-theme="dark" для корневого элемента, родительской оболочки или самого компонента.

<div id="carouselExampleDark" class="carousel carousel-dark slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Первый слайд label</h5>
        <p>Некоторый репрезентативный контент-заполнитель для первого слайда</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Второй слайд label</h5>
        <p>Некоторый репрезентативный контент-заполнитель для второго слайда</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Третий слайд label</h5>
        <p>Некоторый репрезентативный контент-заполнитель для третьего слайда</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Результат:

Пользовательский переход

Длительность перехода .carousel-item можно изменить с помощью переменной Sass $carousel-transition-duration перед компиляцией или пользовательских стилей, если вы используете скомпилированный CSS. Если применяется несколько переходов, убедитесь, что переход transform определен первым (например, transition: transform 2s ease, opacity .5s ease-out).

CSS

Переменные Sass

Переменные для всех каруселей:

scss/_variables.scss

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Переменные для темной карусели:

scss/_variables.scss

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Использование

С помощью атрибутов данных

Используйте атрибуты данных, чтобы легко управлять положением карусели. data-bs-slide принимает ключевые слова prev или next, которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы можно использовать data-bs-slide-to для передачи необработанного индекса слайда в carousel data-bs-slide-to="2", который сдвигает положение слайда на определенный индекс, начинающийся с 0.

С помощью JavaScript

Вызовите carousel вручную с помощью:

const carousel = new bootstrap.Carousel('#myCarousel')

Опции

Поскольку параметры могут передаваться через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". При передаче параметров через атрибуты данных обязательно измените регистр имени опции с “camelCase” на “kebab-case”. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap версии 5.2.0, все компоненты поддерживают экспериментальный атрибут зарезервированных данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", конечным title значением будет 456, а отдельные атрибуты данных будут переопределять значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Конечный объект конфигурации - это объединенный результат data-bs-config, data-bs-, и js object где последнее заданное значение ключа переопределяет остальные.

Имя Тип По умолчанию Описание
interval номер 5000 Время задержки между автоматическим циклированием элемента.
keyboard логическое значение true Должна ли карусель реагировать на события клавиатуры.
pause строка, логическое значение "hover" Если установлено значение "hover", включение карусели приостанавливается mouseenter и возобновляется включение карусели mouseleave. Если установлено значение false, наведение курсора мыши на карусель не приведет к ее приостановке. На устройствах с сенсорным управлением, если установлено значение "hover", переключение будет приостановлено на touchend (после завершения взаимодействия пользователя с каруселью) на два интервала, прежде чем автоматически возобновиться. Это в дополнение к поведению мыши.
ride строка, логическое значение false Если установлено значение true, карусель автоматически запускается после того, как пользователь вручную задействует первый элемент. Если установлено значение "carousel", карусель автоматически запускается при загрузке.
touch логическое значение true Должна ли carousel поддерживать взаимодействие свайпов влево / вправо на устройствах с сенсорным экраном.
wrap логическое значение true Должна ли карусель вращаться непрерывно или иметь жесткие остановки.

Методы

Все методы API являются асинхронными и запускают переход. Они возвращаются вызывающей стороне, как только начинается переход, но до его завершения. Кроме того, вызов метода компонента перехода будет проигнорирован. Узнайте больше в наших документах по JavaScript.

Вы можете создать экземпляр carousel с помощью конструктора carousel и передать любые дополнительные параметры. Например, чтобы вручную инициализировать карусель с автоматическим воспроизведением (при условии, что вы не используете data-bs-ride="carousel" атрибут в самой разметке) с определенным интервалом и с отключенной сенсорной поддержкой, вы можете использовать:

const myCarouselElement = document.querySelector('#myCarousel')

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})
Метод Описание
cycle Запускает циклический просмотр элементов карусели слева направо.
dispose Уничтожает карусель элемента. (Удаляет сохраненные данные в элементе DOM)
getInstance Статический метод, позволяющий получить экземпляр carousel, связанный с элементом DOM. Вы можете использовать его следующим образом: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Статический метод, который возвращает экземпляр carousel, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать его следующим образом: bootstrap.Carousel.getOrCreateInstance(element).
next Переходит к следующему элементу. Возвращается вызывающему до того, как будет показан следующий элемент (например, до того, как произойдет slid.bs.carousel событие).
nextWhenVisible Не переключайте carousel на next, когда страница, карусель или родительский элемент карусели не видны. Возврат вызывающему до отображения целевого элемента.
pause Останавливает циклическое переключение элементов в карусели.
prev Выполняется циклический переход к предыдущему элементу. Возвращается вызывающему до того, как был показан предыдущий элемент (например, до того, как произошло slid.bs.carousel событие).
to Зацикливает карусель до определенного кадра (на основе 0, аналогично массиву). Возвращается вызывающей стороне до того, как будет показан целевой элемент (например, до того, как произойдет slid.bs.carousel событие).

Мероприятия

Класс carousel Bootstrap предоставляет два события для подключения к функциональности carousel. Оба события обладают следующими дополнительными свойствами:

  • direction: Направление, в котором скользит карусель (либо "left", либо "right").
  • relatedTarget: Элемент DOM, который вставляется на место в качестве активного элемента.
  • from: Индекс текущего элемента
  • to: Индекс следующего элемента

Все события карусели запускаются в самой карусели (т.е. в <div class="carousel">).

Тип события Описание
slid.bs.carousel Запускается, когда карусель завершает переход слайдов.
slide.bs.carousel Запускается немедленно при вызове slide метода экземпляра. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

На этой странице

  1. Как это работает
  2. Основные примеры
    1. Индикаторы
    2. Подписи
    3. Кроссфейд
  3. Автоматическое воспроизведение каруселей
    1. Индивидуальный интервал для класса .carousel-item
    2. Автоматическое воспроизведение каруселей без элементов управления
  4. Отключить пролистывание касанием
  5. Темный вариант
  6. Пользовательский переход
  7. CSS
    1. Переменные Sass
  8. Использование
    1. С помощью атрибутов данных
    2. С помощью JavaScript
    3. Опции
    4. Методы
    5. Мероприятия