Как изменить интервал карусели Bootstrap во время выполнения?

Мы узнаем, как изменить интервалы карусели во время выполнения с помощью начальной загрузки. В этом примере мы собираемся обсудить несколько подходов. Карусель Bootstrap — это слайд-шоу для просмотра нескольких материалов, созданных с помощью JavaScript, CSS и анимации. Он работает с текстом, изображениями и пользовательскими разметками. Он также включает в себя предыдущий и следующий элементы управления и индикаторы для управления его движением.

Подход 1: мы можем управлять анимацией, используя атрибут интервала данных каждого элемента карусели. Приведенный пример является лучшим примером для понимания этой концепции. Атрибут Data-interval используется для установки интервала времени между двумя элементами карусели. По умолчанию его значение равно 3000 миллисекунд.

Выход:

Подход 2: в этом подходе мы изменим интервал анимации, используя метод API начальной загрузки. Который принимает один аргумент как интервал в единицу миллисекунды, т.е. (1 с = 1000 миллисекунд). Назначенный нами интервал изменит время анимации между всеми элементами карусели во время выполнения. Интервал данных в функции карусели используется для установки времени между двумя слайдами изображения.

Синтаксис

$(".carousel").carousel({
    interval: time in millisecond
});

Выход:

Подход 3: мы можем установить интервал данных, используя атрибут данных и javascript. Этот подход довольно прост, как и два вышеупомянутых подхода. В этом подходе мы собираемся выбрать div класса карусели и изменить атрибут с помощью метода attr(). Метод attr() — это метод jquery, который устанавливает или возвращает атрибуты и значения выбранных элементов. Когда этот метод используется для возврата значения, он возвращает значение первого сопоставленного элемента, и если он используется для установки значения атрибута, то он устанавливает атрибут одного или нескольких атрибутов.

Синтаксис:

 $(".carousel").attr(
    "data-interval","interval that you want to set (in milisec)
");

Выход

Поддерживаемый браузер:

• Гугл Хром
• Интернет-проводник
• Fire Fox
• Опера
• Сафари