[twitter-bootstrap] 항목에서 슬라이드 슬라이드를 부트 스트랩하는 속도를 어떻게 제어 할 수 있습니까?

Program / 글쓴이

간격을 설정할 수 있지만 항목 슬라이드 속도를 제어하고 싶습니까?

   // Sets interval...what is transition slide speed?
    $('#mainCarousel').carousel({
    interval: 3000
});

답변

속도는 API로 제어 할 수 없습니다. 그것을 담당하는 CSS를 수정할 수 있지만. 에서 carousel.less파일 찾기

.item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
}

.6s원하는대로 변경 합니다.

.less를 사용하지 않는 경우 bootstrap.css파일 에서 찾으십시오 .

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

0.6s원하는 시간으로 변경 합니다. 아래 함수 호출에서 시간을 편집 할 수도 있습니다.

.emulateTransitionEnd(2000)

에서 bootstrap.js함수 Carousel.prototype.slide. 전환을 동기화하고 전환이 끝나기 전에 슬라이드가 사라지는 것을 방지합니다.

2014 년 7 월 8 일 수정

@YellowShark가 지적했듯이 JS의 편집은 더 이상 필요하지 않습니다. CSS 변경 사항 만 적용하십시오.

편집 20/8/2015
이제 css 파일을 편집 한 후 CAROUSEL.TRANSITION_DURATION (bootstrap.js에서) 또는 c.TRANSITION_DURATION (bootstrap.min.js를 사용하는 경우)을 편집하고 그 안의 값을 변경하면됩니다. (기본값은 600). 최종 값은 css 파일에 입력 한 값과 동일해야합니다 (예 : css의 10s = .js의 10000).

16/01/2018 편집
Bootstrap 4의 경우 전환 시간을 예를 들어 2 초로 변경하려면 다음을 추가하십시오.

$(document).ready(function() {
  jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000  // 2 seconds
});

사이트의 JS 파일에

.carousel-inner .carousel-item {
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
}

사이트의 CSS 파일에.

답변

캐 러셀을 포함하여 작성 data-interval하십시오 div.

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">

w3schools 에서 가져온 예 .

답변

기본 DIV의 간격을 데이터 간격 태그로 설정해야합니다. 그것은 잘 작동하고 다른 슬라이드에 다른 시간을 줄 수 있습니다.

<div class="carousel" data-interval="5000">

답변

트위터 부트 스트랩 3 :

다른 답변에 지정된대로 CSS 전환을 변경해야합니다.

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

0.6 초 ~ 1.5 초 (예 🙂

또한 변경해야 할 Javascript가 있습니다. bootstrap.js에는 다음 행이 있습니다.

.emulateTransitionEnd(600)

이 값은 밀리 초 단위로 변경해야합니다. 따라서 1.5 초 동안 숫자를 1500으로 변경합니다.

.emulateTransitionEnd(1500)

답변

내가 주목 한 한 가지는 Bootstrap 3이 a .6s와 0.6s. 따라서 다음과 같이 전환 기간을 명시 적으로 정의해야 할 수도 있습니다 (CSS)

    .carousel-inner>.item {
    -webkit-transition: 0.9s ease-in-out left;
    transition: 0.9s ease-in-out left;
    -webkit-transition: 0.9s, ease-in-out, left;
    -moz-transition: .9s, ease-in-out, left;
    -o-transition: .9s, ease-in-out, left;
    transition: .9s, ease-in-out, left;
    }

답변

Bootstrap 4에서는 다음 CSS를 사용하십시오.

.carousel .carousel-item {
    transition-duration: 3s;
}

3s원하는 기간으로 변경하십시오 .

답변

나를 위해 내 견해 끝에 이것을 추가하기 위해 노력했습니다.

<script type="text/javascript">
$(document).ready(function(){
     $("#myCarousel").carousel({
         interval : 8000,
         pause: false
     });
});
</script>

8 초 간격을 캐 러셀에 제공합니다.