--- title: Carousel localeTitle: Карусель --- ## карусель Карусель - это компонент слайд-шоу для циклического показа таких элементов, как изображения или слайды текста. Он обеспечивает динамический способ представления большого количества контента (текста или изображений) путем скольжения или циклического, плавного перемещения. Пример кода слайдера изображения приведен ниже: ```html

``` Объяснение атрибутов и классов, используемых в приведенном выше примере: ### 1) Атрибуты a) `data-ride` : - `data-ride ="carousel"` позволяет начать анимацию после загрузки страницы. б) `data-target` : - указывает на идентификатор карусели c) `data-slide-to` : - Указывает, какой слайд перемещается при нажатии на индикаторы (определенные точки). ### 2) Классы a) `carousel` : - `class="carousel"` указывает, что div содержит карусель. b) `slide` : - Этот класс добавляет CSS-переходы. c) `carousel-inner` : - Это обозначает часть кода, который будет содержать текст / изображение, отображаемое в слайдах. d) `item` : - Он относится к содержимому, которое должно отображаться в карусели. e) `left carousal-control` : - Это добавляет кнопку «Назад», позволяющую сдвинуться до предыдущего слайда. f) `right carousal-control` : - добавляет кнопку «Вперед», позволяющую перейти к следующему слайду. g) `carousel-caption` : - Этот класс позволяет добавлять подписи к каждому слайду. Примечание: добавьте `class="carousel-caption"` для каждого элемента. ### использование #### 1) Через Data атрибуты Атрибут `data-ride="carousel"` используется для обозначения карусели как анимации, начинающейся после загрузки страницы. `data-slide` принимает ключевые слова `prev` или `next` , что изменяет положение слайда относительно его текущего положения. #### 2) Через JavaScript Вызовите карусель вручную с помощью: `$('.carousel').carousel()` ### Опции Параметры могут передаваться через Data атрибуты или JavaScript. Для Data атрибутов добавьте имя параметра в `data-` , как в `data-interval=""` . Некоторые часто используемые опции: * interval * pause * ride * wrap ## дополнительные детали * [Карусель для бутстрапа](https://getbootstrap.com/docs/4.0/components/carousel/)