Bootstrap Carousel : 자동 슬라이드 제거

119

Bootstrap Carousel을 사용하고 있습니다. 내가 원하는 것은 내비게이션 또는 페이지 매김을 클릭 할 때만 슬라이더가 미끄러지는 것입니다. 나는 제거를 시도했다

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

잘 작동하지만 내 문제는 이미 탐색 또는 페이지 매김을 클릭하면 이제 자동 슬라이딩입니다. 자동 슬라이딩 기능을 제거 할 수 있습니까? 그렇다면 어떻게?

javascript jquery twitter-bootstrap

— Khatzie
소스

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"... 그리고 인라인에 대한 올바른 구문 :data-interval="false"

— webMan dec

111

로부터 공식 문서 :

간격 항목 자동 순환 사이의 지연 시간입니다. 경우 거짓 , 회전 목마가 자동으로 순환하지 않습니다.

이 값은 javascript 또는 data-interval="false"속성을 사용하여 전달할 수 있습니다 .

— 디에고 아굴로
소스

9

데이터 간격 = 'false'로, 당신이 사용하는 경우 쉬운 옵션 덕분에 the-bootstrap워드 프레스 테마

— 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-inner"> .... 아무것도 ... 여전히 autosliding 없습니다

— Lachezar Raychev

이것은 단순한 경우에 훨씬 더 간단하지만 사용자 정의를 사용 하고 html에서 스크립트 코딩을 유지하지 않는 것이 훨씬 더 나은 디자인임을 명심 하십시오 scripts.js! ;)

— cregox 2015 년

55

DIV 태그에 속성을 하나 더 추가하면됩니다.

data-interval="false"

JS를 만질 필요가 없습니다!

— Nikunj Dhimar
소스

36

캐 러셀 div에서 data-interval = "false"로 변경 / 추가

<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

콘솔을 사용하여 런타임에서 저와 함께 일한 유일한 사람입니다.

— Bishoy Hanna

4

data-interval = "false"

이것을 해당 div에 추가하십시오 ...

3

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

위의 스크립트를 사용하면 이미지를 자동으로 이동할 수 있습니다.

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

위의 스크립트를 사용하면 auto-rotation차단 interval됩니다.false

— 니틴 안베 카르
소스