show code
<h3 class="title-v2">Carousel</h3>
<!-- SLIDER -->
<div class="wrapper-slider">
<div id="carousel-30" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-slide" src="#" alt="theme-img">
</div>
<div class="item">
<img class="img-slide" src="#" alt="theme-img">
</div>
<div class="item">
<img class="img-slide" src="#" alt="theme-img">
</div>
<div class="item">
<img class="img-slide" src="#" alt="theme-img">
</div>
</div>
<!-- Controls -->
<a href="#carousel-30" role="button" data-slide="prev">
<i class="fa fa-angle-left fa-2x btn-prev"></i>
</a>
<a href="#carousel-30" role="button" data-slide="next">
<i class="fa fa-angle-right fa-2x btn-next"></i>
</a>
</div>
</div>
<!-- SLIDER END-->
Carousel with captions
Maecenas ac leo vel risus amet
Best Bootstrap Theme
Aliquam sit amet nulla vel
Carousel Example Title
show code
<h3 class="title-v2">Carousel <small>with captions</small></h3>
<!-- SLIDER -->
<div class="wrapper-slider">
<div id="carousel-2" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-slide" src="#" alt="theme-img">
<span class="title-slider">Maecenas ac leo vel risus amet</span>
</div>
<div class="item">
<img class="img-slide" src="#" alt="theme-img">
<span class="title-slider">Best Bootstrap Theme</span>
</div>
<div class="item">
<img class="img-slide" src="#" alt="theme-img">
<span class="title-slider">Aliquam sit amet nulla vel</span>
</div>
<div class="item">
<img class="img-slide" src="#" alt="theme-img">
<span class="title-slider">Carousel Example Title</span>
</div>
</div>
<!-- Controls -->
<a href="#carousel-2" role="button" data-slide="prev">
<i class="fa fa-angle-left fa-2x btn-prev"></i>
</a>
<a href="#carousel-2" role="button" data-slide="next">
<i class="fa fa-angle-right fa-2x btn-next"></i>
</a>
</div>
</div>
<!-- SLIDER END-->
show code
<h3 class="title-v2">Carousel Macbook</h3>
<div class="wrapper-macbook">
<img class="img-responsive" src="#" alt="img-theme">
<div class="wrapper-absolute">
<div class="wrapper-slider">
<div id="carousel-mac" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="#" class="img-slide" alt="img-theme">
</div>
<div class="item">
<img class="img-slide" src="#" alt="img-theme">
</div>
</div>
<!-- Controls -->
<a href="#carousel-mac" role="button" data-slide="prev">
<i class="fa fa-angle-left fa-2x btn-prev"></i>
</a>
<a href="#carousel-mac" role="button" data-slide="next">
<i class="fa fa-angle-right fa-2x btn-next"></i>
</a>
</div>
</div>
</div>
</div>
show code
<div class="wrapper-iphone">
<img class="img-responsive iphone-services-section" src="#" alt="theme-img">
<div class="wrapper-absolute">
<div class="wrapper-slider">
<div id="carousel-31" class="carousel slide" data-ride="carousel" data-interval="5200">
<!-- Indicators -->
<ol class="carousel-indicators carousel-indicators-iphone">
<li data-target="#carousel-31" data-slide-to="0" class="active"></li>
<li data-target="#carousel-31" data-slide-to="1"></li>
<li data-target="#carousel-31" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-slide" src="#" alt="theme-img">
</div>
<div class="item">
<img class="img-slide" src="#" alt="theme-img">
</div>
<div class="item">
<img class="img-slide" src="#" alt="theme-img">
</div>
</div>
</div>
</div>
</div>
</div>
show code
<div class="browser">
<div class="wrapper-browser-btn">
<span class="btn-browser btn-browser-1"></span>
<span class="btn-browser btn-browser-2"></span>
<span class="btn-browser btn-browser-3"></span>
</div>
</div>
<!-- SLIDER -->
<div class="wrapper-slider">
<div id="carousel-browser" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-slide" src="#" alt="theme-img">
</div>
<div class="item">
<img class="img-slide" src="#" alt="theme-img">
</div>
<div class="item">
<img class="img-slide" src="#" alt="theme-img">
</div>
</div>
<!-- Controls -->
<a href="#carousel-browser" role="button" data-slide="prev">
<i class="fa fa-angle-left fa-2x btn-prev-visible"></i>
</a>
<a href="#carousel-browser" role="button" data-slide="next">
<i class="fa fa-angle-right fa-2x btn-next-visible"></i>
</a>
</div>
</div>
<!-- SLIDER END-->
Multiple Slides
Example Title
Lorem ipsum dolor
Example Title
Lorem ipsum dolor
Example Title
Lorem ipsum dolor
Example Title
Lorem ipsum dolor
Example Title
Lorem ipsum dolor
Example Title
Lorem ipsum dolor
Example Title
Lorem ipsum dolor
Example Title
Lorem ipsum dolor
Example Title
Lorem ipsum dolor
Example Title
Lorem ipsum dolor
show code
<div id="owl-portfolio-item" class="owl-carousel">
<div class="item">
<a href="#" class=""><img class="img-responsive" src="assets/images/portfolio/800x600.gif" alt="portfolio">
</a>
<div class="caption-portfolio">
<h3 class="text-theme title-xs">Example Title</h3>
<p class="text-theme">Lorem ipsum dolor</p>
</div>
</div>
<div class="item">
<a href="#" class=""><img class="img-responsive" src="assets/images/portfolio/800x600.gif" alt="portfolio">
</a>
<div class="caption-portfolio">
<h3 class="text-theme title-xs">Example Title</h3>
<p class="text-theme">Lorem ipsum dolor</p>
</div>
</div>
<div class="item">
<a href="#" class=""><img class="img-responsive" src="assets/images/portfolio/800x600.gif" alt="portfolio">
</a>
<div class="caption-portfolio">
<h3 class="text-theme title-xs">Example Title</h3>
<p class="text-theme">Lorem ipsum dolor</p>
</div>
</div>
<div class="item">
<a href="#" class=""><img class="img-responsive" src="assets/images/portfolio/800x600.gif" alt="portfolio">
</a>
<div class="caption-portfolio">
<h3 class="text-theme title-xs">Example Title</h3>
<p class="text-theme">Lorem ipsum dolor</p>
</div>
</div>
<div class="item">
<a href="#" class=""><img class="img-responsive" src="assets/images/portfolio/800x600.gif" alt="portfolio">
</a>
<div class="caption-portfolio">
<h3 class="text-theme title-xs">Example Title</h3>
<p class="text-theme">Lorem ipsum dolor</p>
</div>
</div>
<div class="item">
<a href="#" class=""><img class="img-responsive" src="assets/images/placeholder/800x600.gif" alt="portfolio">
</a>
<div class="caption-portfolio">
<h3 class="text-theme title-xs">Example Title</h3>
<p class="text-theme">Lorem ipsum dolor</p>
</div>
</div>
<div class="item">
<a href="#" class=""><img class="img-responsive" src="assets/images/placeholder/800x600.gif" alt="portfolio">
</a>
<div class="caption-portfolio">
<h3 class="text-theme title-xs">Example Title</h3>
<p class="text-theme">Lorem ipsum dolor</p>
</div>
</div>
<div class="item">
<a href="#" class=""><img class="img-responsive" src="assets/images/placeholder/800x600.gif" alt="portfolio">
</a>
<div class="caption-portfolio">
<h3 class="text-theme title-xs">Example Title</h3>
<p class="text-theme">Lorem ipsum dolor</p>
</div>
</div>
<div class="item">
<a href="#" class=""><img class="img-responsive" src="assets/images/placeholder/800x600.gif" alt="portfolio">
</a>
<div class="caption-portfolio">
<h3 class="text-theme title-xs">Example Title</h3>
<p class="text-theme">Lorem ipsum dolor</p>
</div>
</div>
<div class="item">
<a href="#" class=""><img class="img-responsive" src="assets/images/placeholder/800x600.gif" alt="portfolio">
</a>
<div class="caption-portfolio">
<h3 class="text-theme title-xs">Example Title</h3>
<p class="text-theme">Lorem ipsum dolor</p>
</div>
</div>
</div>
show code
<ul class="bxslider">
<li><img src="assets/images/placeholder/700x250.gif" alt="img-theme" />
</li>
<li><img src="assets/images/placeholder/700x250.gif" alt="img-theme" />
</li>
<li><img src="assets/images/placeholder/700x250.gif" alt="img-theme" />
</li>
<li><img src="assets/images/placeholder/700x250.gif" alt="img-theme" />
</li>
<li><img src="assets/images/placeholder/700x250.gif" alt="img-theme" />
</li>
<li><img src="assets/images/placeholder/700x250.gif" alt="img-theme" />
</li>
</ul>
<div id="bx-pager-shop" class="bx-pager-shop bx-pager-6">
<a data-slide-index="0" href=""><img src="assets/images/placeholder/80x60.gif" alt="img-theme">
</a>
<a data-slide-index="1" href=""><img src="assets/images/placeholder/80x60.gif" alt="img-theme">
</a>
<a data-slide-index="2" href=""><img src="assets/images/placeholder/80x60.gif" alt="img-theme">
</a>
<a data-slide-index="3" href=""><img src="assets/images/placeholder/80x60.gif" alt="img-theme">
</a>
<a data-slide-index="4" href=""><img src="assets/images/placeholder/80x60.gif" alt="img-theme">
</a>
<a data-slide-index="5" href=""><img src="assets/images/placeholder/80x60.gif" alt="img-theme">
</a>
</div>
