[javascript] Bootstrap Carousel : 자동 슬라이드 제거

Program / 글쓴이

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

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

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

답변

js 또는 html (easist)을 통해 두 가지 방법으로 수행 할 수 있습니다.

  1. js를 통해
$('.carousel').carousel({
  interval: false,
});

밀리 초가 추가되지 않고 다음으로 슬라이더가 이동하지 않기 때문에 자동 슬라이딩이 중지됩니다.

  1. 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의 댓글에 따라 업데이트 됨

답변

로부터 공식 문서 :

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

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

답변

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

data-interval="false"

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

답변

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

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

답변

다음을 시도하십시오 :

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

답변

data-interval = “false”

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

답변

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

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

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

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