Bootstrap 이미지 캐러셀 효과 구현 방법

이 글은 주로 부트스트랩 이미지 캐러셀 효과를 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

소개

Bootstrap Carousel 플러그인은 사이트에 슬라이더를 추가하는 유연하고 반응성이 뛰어난 방법입니다. 그 외에도 콘텐츠는 충분히 유연하며 이미지, iframe, 비디오 또는 배치하려는 기타 유형의 콘텐츠가 될 수 있습니다.

【관련 영상 추천: 부트스트랩 튜토리얼】

Example

다음은 부트스트랩에서 Carousel 디스플레이 루프 요소 플러그인을 사용하여 이미지의 캐러셀을 보여줍니다.

<p id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <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>

 <!-- Wrapper for slides -->
 <p class="carousel-inner" role="listbox">
  <p class="item active">
   <img src="..." alt="...">
   <p class="carousel-caption">
    ...
   </p>
  </p>
  <p class="item">
   <img src="..." alt="...">
   <p class="carousel-caption">
    ...
   </p>
  </p>
  ...
 </p>

 <!-- Controls -->
 <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>
</p>

src에 이미지를 삽입하고 이미지 크기를 설정하세요

제목도 추가할 수 있습니다

<p class="item">
 <img src="..." alt="...">
 <p class="carousel-caption">
 <h3>...</h3>
 <p>...</p>
 </p>
</p>

관련 권장 사항:

JS를 사용하여 이미지 캐러셀을 구현하는 예

이미지 캐러셀 효과 구현 방법

JQuery를 사용하여 이미지 캐러셀 효과 구현

위 내용은 Bootstrap 이미지 캐러셀 효과 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!