21'C 흐림
서울 강남구
독립 슬라이드 입니다 가공해서 사용하세요
소스보시면 <img src=" 이미지 걸기는 웹에서 이미지 가지고올수있어요
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<span id="husky_bookmark_start_1426046332278"></span><img src="<a href="http://www.prepbootstrap.com/Content/itemplate/carouselstaticheader/slide_03.jpg"><span id="husky_bookmark_end_1426046332278"></span>http://www.prepbootstrap.com/Content/itemplate/carouselstaticheader/slide_03.jpg</a>;" alt="First slide" />
<div class="carousel-caption">
<h3>Product A</h3>
<p>
Best Suitable for individuals...
</p>
<p><a class="btn btn-clear btn-sm btn-min-block" href="#">More Details</a></p>
</div>
</div>
<div class="item">
<img src="<a href="http://www.prepbootstrap.com/Content/ies/template/carouselstaticheader/slide_02.jpg">http://www.prepbootstrap.com/Content/ies/template/carouselstaticheader/slide_02.jpg</a>" alt="Second slide" />
<div class="carousel-caption">
<h3>Product B</h3>
<p>
Best Suitable for small businesses
</p>
<p><a class="btn btn-clear btn-sm btn-min-block" href="#">More Details</a></p>
</div>
</div>
<div class="item">
<img src="<a href="http://www.prepbootstrap.com/Content/i/template/carouselstaticheader/slide_01.jpg">http://www.prepbootstrap.com/Content/i/template/carouselstaticheader/slide_01.jpg</a>" alt="Third slide" />
<div class="carousel-caption">
<h3>Product B</h3>
<p>
Best Suitable for small businesses
</p>
<p><a class="btn btn-clear btn-sm btn-min-block" href="#">More Details</a></p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
<span class="fa fa-arrow-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</a>
</div>
<div class="main-text hidden-xs">
<div class="col-md-12 text-center">
<h1>Affordable products</h1>
<h3>Pick up the one that suits you best
</h3>
</div>
</div>
</div>
</div>
</div>
<style>
.main-text {
position: absolute;
top: 50px;
width: 96.66666666666666%;
color: #FFF;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-clear {
color: #FFF;
border-color: #FFF;
border-width: 2px;
margin-right: 15px;
}
.btn-clear:hover {
color: #000;
background-color: #6699CC;
}
.arrowalign {
top: 50%;
}
.arrowalign:hover {
vertical-align: middle;
}
.carousel-control {
color: #fff;
top: 50%;
bottom: auto;
padding-top: 0px;
width: 30px;
height: 30px;
text-shadow: none;
opacity: 0.9;
}
</style>