Slider

Carousel


Carousel with captions


Carousel Macbook


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
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>