부트스트랩 회전목마 : 자동 슬라이드 제거

부트스트랩 회전목마 : 자동 슬라이드 제거

저는 부트스트랩 캐러셀을 사용하고 있습니다.내가 원하는 것은 탐색 또는 페이지를 클릭할 때만 슬라이더가 미끄러지는 것입니다.제거해 봤습니다.

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

잘 작동하지만 문제는 이미 탐색 또는 페이지를 클릭한 후에는 자동으로 슬라이드된다는 것이 문제입니다.자동 슬라이딩 기능을 제거할 수 있습니까?만약 그렇다면, 어떻게?

js 또는 html(이지스트)를 통해 두 가지 방법으로 이 작업을 수행할 수 있습니다.

1. 비아js

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

추가된 밀리초가 없으므로 자동 슬라이딩이 중지되고 다음에는 절대 슬라이더를 사용하지 않습니다.

2. 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의 의견을 기반으로 업데이트됨

공식 문서에서:

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

이 값은 Javascript로 전달하거나 다음을 사용하여 전달할 수 있습니다.data-interval="false"기여하다.

당신은 당신의 DIV 태그에 하나의 속성을 더 추가하기만 하면 됩니다.

data-interval="false"

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

데이터 변경/추가 - 회전수 div의 "false" = "false"

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

Bootstrap v5에서 다음을 사용합니다.data-bs-interval="false"

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

다음을 시도하십시오.

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

data-proxy="false"

이것을 해당 div에 추가합니다...

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

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

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

위의 스크립트를 사용하여auto-rotation다음과 같은 이유로 차단됩니다.interval이라false

data-bs-ride를 생략하는 것이 효과적일 수 있습니다.

언급URL : https://stackoverflow.com/questions/14977392/bootstrap-carousel-remove-auto-slide