Карусель завантаження: Видаліть автоматичний слайд

119

Я використовую карусель Bootstrap. Все, що я хочу, - це те, що слайдер буде ковзати лише тоді, коли клацніть навігацію або сторінку. Я спробував видалити

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

Це добре працює, але моя проблема полягає в тому, що колись я вже натиснув навігацію або сторінку, тепер це автоматично ковзання. Чи можливо зняти функцію автоматичного ковзання? Якщо так, то як?

javascript jquery twitter-bootstrap

— хатці
джерело

225

Це можна зробити двома способами, за допомогою 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

З офіційних документів :

інтервал Час затримки між автоматично переміщенням елемента. Якщо помилково , карусель не буде автоматично перемикатися.

Ви можете передати це значення за допомогою JavaScript або за допомогою data-interval="false"атрибута.

— Дієго Агулло
джерело

9

дякую за інтервал даних = 'false', простий варіант, якщо ви використовуєте the-bootstrapтему в Wordpress

— toto_tico

32

data-interval="false"це набагато краще рішення, не потрібно торкатися завантажувального пристрою JS!

— lxg

2

Це не працює для мене <div class = "carousel slide" data-ride = "carousel" id = "carousel-ex" data-interval = "false"> <div class = "carousel-Internal"> .... і нічого ... все ще автоковзання

— Лъчезар Райчев

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

— Крегокс

55

Вам просто потрібно додати ще один атрибут у свій тег DIV, який є

data-interval="false"

не потрібно чіпати JS!

— Нікундж Дхімар
джерело

36

Змінити / Додати до інтервалу даних = "помилково" на дірі каруселі

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

— Арун
джерело

7

Будь ласка, спробуйте наступне:

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

— Микит Барохія
джерело

1

Це єдиний, хто працював зі мною під час роботи за допомогою консолі.

— Бішо Ханна

4

data-interval = "false"

Додайте це до відповідного розділу ...

3

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

Використовуючи вищевказаний сценарій, ви зможете переміщувати зображення автоматично

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

Використовуючи вищезазначений сценарій, auto-rotationбуде заблоковано, оскільки intervalєfalse

— Нітін Анвекар
джерело