> 웹 프론트엔드 > 부트스트랩 튜토리얼 > 부트스트랩 캐러셀 시간을 설정하는 위치

부트스트랩 캐러셀 시간을 설정하는 위치

풀어 주다: 2019-07-31 14:05:39
원래의
5797명이 탐색했습니다.

부트스트랩 캐러셀 시간을 설정하는 위치

BootStrap 캐러셀 차트 공식 코드:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!--data-ride设置图片切换方式为滑动 -->

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- 设置轮播图的数量和顺序-->

  <!--data-target的值应与上面的id值对应 -->

  <ol class="carousel-indicators">

    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

    <li data-target="#carousel-example-generic" data-slide-to="2"></li>

  </ol>

 

  <!-- 要展示的图片信息 -->

  <div class="carousel-inner" role="listbox">

    <div class="item active">

      <img src="..." alt="...">

      <div class="carousel-caption">

        ...

      </div>

    </div>

    <div class="item">

      <img src="..." alt="...">

      <div class="carousel-caption">

        ...

      </div>

    </div>

    ...

  </div>

 

  <!-- 控制图标 -->

  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

로그인 후 복사

캐러셀 차트 시간 간격을 변경하는 두 가지 방법:

1 data-ride "millisecond" 후에 data-interval= 속성을 추가합니다. millisecond는 다음과 같이 설정해야 하는 밀리초 수입니다.

1

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

로그인 후 복사

JavaScript 문을 사용하여 구현:
공식 웹사이트에서 제공하는 코드:

1

$(&#39;.carousel&#39;).carousel({interval: 2000});

로그인 후 복사

이 코드를 사용하여 직접 구현할 수 없습니다. 메소드 함수 표현식 앞에 다음과 같이 추가합니다:

1

2

$(function(){

    $(&#39;#carousel-example-generic&#39;).carousel({interval:1000});});

로그인 후 복사

권장: bootstrap 입문 튜토리얼

위 내용은 부트스트랩 캐러셀 시간을 설정하는 위치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿