--- 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-ride="carousel"` используется для обозначения карусели как анимации, начиная с загрузки страницы. `data-slide` принимает ключевые слова `prev` или `next` , что изменяет положение слайда относительно его текущего положения. #### 2) Через JavaScript Вызовите карусель вручную с помощью: `$('.carousel').carousel()` ### Опции Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в `data-` , как в `data-interval=""` . Некоторые часто используемые опции: * интервал * Пауза * поездка * заворачивать ## дополнительные детали * [Карусель для бутстрапа](https://getbootstrap.com/docs/4.0/components/carousel/)