Slider

Carousel


Carousel with captions


Carousel Macbook

img-theme

Carousel Iphone

theme-img

Carousel Browser


Multiple Slides

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>

Thumbnail slider

  • img-theme
  • img-theme
  • img-theme
  • img-theme
  • img-theme
  • img-theme
img-themeimg-themeimg-themeimg-themeimg-themeimg-theme
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>