정보실

웹학교

정보실

bootstrap carousel 코드

본문

<div class="container">

<div class="span8">

<div id="myCarousel" class="carousel slide">

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class=""></li>

<li data-target="#myCarousel" data-slide-to="1" class="active"></li>

<li data-target="#myCarousel" data-slide-to="2" class=""></li>

</ol>

<div class="carousel-inner">

<div class="item">

<img src="//placehold.it/2800x1200" alt="">

<div class="carousel-caption">

<h4>First Thumbnail label</h4>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>

</div>

<div class="item active">

<img src="//placehold.it/2800x1200/999/EEE" alt="">

<div class="carousel-caption">

<h4>Second Thumbnail label</h4>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>

</div>

<div class="item">

<img src="http://placehold.it/2800x1200/777/FFF" alt="">

<div class="carousel-caption">

<h4>Third Thumbnail label</h4>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

</div>

</div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

</div>

</div>

</div> 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 311회 ]  작성일15-05-23 20:34

웹학교