Bootstrap Carousel: удаление автоматического слайда

120

Я использую Bootstrap Carousel. Все, что я хочу, это чтобы ползунок сдвигался только при нажатии на навигацию или разбиение на страницы. Я пробовал удалить

$('.carousel').carousel({
    interval: 6000
});

Он работает нормально, но моя проблема в том, что когда я уже щелкнул навигацию или разбиение на страницы, теперь он автоматически скользит. Можно ли убрать функцию автоматического скольжения? Если да, то как?

javascript jquery twitter-bootstrap

— khatzie
источник

227

Вы можете сделать это двумя способами: через js или html (easist).

Через js

$('.carousel').carousel({
  interval: false,
});

Это остановит автоматическое скольжение, потому что миллисекунды не добавлены и никогда не будут перемещаться дальше.

Через HTML Путем добавления data-interval="false"и удаленияdata-ride="carousel"

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

будет выглядеть так:

<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">

обновлено на основе комментария @ webMan

— Илья Рейзис
источник

38

избавьтесь также от data-ride="carousel"... и правильного синтаксиса для inline:data-interval="false"

— webMan

111

Из официальных документов :

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

Вы можете передать это значение с помощью javascript или с помощью data-interval="false"атрибута.

— Диего Агулло
источник

9

спасибо за data-interval = 'false', простой вариант, если вы используете the-bootstrapтему в Wordpress

— toto_tico

32

data-interval="false"- гораздо лучшее решение, не нужно прикасаться к загрузочному JS!

— lxg 9

2

У меня это не работает <div class = "carousel slide" data-ride = "carousel" id = "carousel-ex" data-interval = "false"> <div class = "carousel-inner"> .... и ничего ... все еще автосползание

— Райчев

Это действительно намного проще для простых случаев, но имейте в виду, что это гораздо лучший дизайн, чтобы использовать ваш собственный scripts.jsи не хранить кодирование скриптов в html! ;)

— cregox

55

Вам просто нужно добавить еще один атрибут к вашему тегу DIV, который

data-interval="false"

JS трогать не надо!

— Никундж Дхимар
источник

36

Изменить / добавить в data-interval = "false" в div карусели

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">

— Arun
источник

7

Пожалуйста, попробуйте следующее:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>

— Никит Барочия
источник

1

Это единственное, что у меня работало во время выполнения с помощью консоли.

— Bishoy Hanna

4

Данные интервала = «ложно»

Добавьте это в соответствующий div ...

3

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: 40000,
  });
});

Используя приведенный выше скрипт, вы сможете автоматически перемещать изображения.

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

С помощью этого скрипта, auto-rotationбудет заблокирован , потому что intervalэтоfalse

— Нитин Анвекар
источник