부트스트랩 이미지 캐러셀은 어떤 세 부분으로 구성되어 있나요?-부트스트랩 튜토리얼-php.cn

부트스트랩 이미지 캐러셀은 어떤 세 부분으로 구성되어 있나요?

爱喝马黛茶的安东尼

풀어 주다： 2019-07-16 16:21:16

원래의

3845명이 탐색했습니다.

부트스트랩 이미지 캐러셀은 어떤 세 부분으로 구성되어 있나요?

캐러셀 이미지는 주로 다음 세 부분으로 구성됩니다.

xml 캐러셀 이미지

xml 캐러셀 이미지 카운터

xml 캐러셀 이미지 컨트롤러

1단계: 캐러셀 이미지 컨테이너 디자인 . Bootstrap 프레임워크에서 캐러셀 스타일을 사용하고 이 컨테이너에 대한 ID 값을 정의하면 나중에 데이터 속성을 사용하여 트리거를 선언할 수 있습니다.

코드는 다음과 같습니다.

<div id="slidershow" class="carousel"></div>

로그인 후 복사

2단계: 캐러셀 이미지 카운터를 디자인합니다. carousel-indicators 스타일을 사용하여 컨테이너 div.carousel 내에 회전식 그림 계산기를 추가합니다. 주요 기능은 현재 그림의 재생 순서를 표시하는 것입니다(그림이 여러 개인 경우 여러 개의 li을 배치). 순차 목록:

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li></ol>
</div>

로그인 후 복사

3단계: 캐러셀 이미지 재생 영역을 디자인합니다. 캐러셀 이미지의 전체 효과에서 재생 영역은 가장 중요한 영역입니다. 이 영역은 주로 회전해야 하는 이미지를 배치하는 데 사용됩니다. 이 영역은 캐러셀 내부 스타일을 사용하여 제어되며 캐러셀 컨테이너에도 배치되며 각 캐러셀 이미지는 항목 컨테이너를 통해 배치됩니다.

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
 </div>
 </div>
</div>

로그인 후 복사

관련 권장 사항: "BootStrap 시작 튜토리얼"

4단계 : 회전판 이미지 설명을 설정합니다. 많은 회전판 이미지 효과에는 각 이미지에 해당하는 자체 제목과 설명이 있습니다. 실제로 Bootstrap 프레임워크의 Carousel도 비슷한 효과를 제공합니다. 항목의 이미지 하단에 해당 코드를 추가하기만 하면 됩니다.

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3>图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

로그인 후 복사

5단계: 캐러셀 이미지 컨트롤러를 디자인합니다. 캐러셀에는 정방향 및 역방향 컨트롤러도 있는 경우가 많습니다. 이는 왼쪽과 오른쪽이 결합된 캐러셀 제어 스타일을 통해 캐러셀에서 달성됩니다. 그 중 왼쪽은 앞으로 재생을 의미하고 오른쪽은 뒤로 재생을 의미합니다. 캐러셀 컨테이너에도 배치됩니다:

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 …
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="" >
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a> 
</div>

로그인 후 복사

위 내용은 부트스트랩 이미지 캐러셀은 어떤 세 부분으로 구성되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!