Carousels

<div id="carousel-example-1" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-1" data-slide-to="1"></li>
    <li data-target="#carousel-example-1" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active"><img src="slide1.jpg"></div>
    <div class="item"><img src="slide2.jpg"></div>
    <div class="item"><img src="slide3.jpg"></div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-1" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#carousel-example-1" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

<div id="carousel-example-2" class="carousel slide alternative" data-ride="carousel"> 
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-2" data-slide-to="1"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <div class="row">
        <div class="col-md-3"><img src="image1.jpg" style="max-width:100%;"></div>
        <div class="col-md-3"><img src="image2.jpg" style="max-width:100%;"></div>
        <div class="col-md-3"><img src="image3.jpg" style="max-width:100%;"></div>
        <div class="col-md-3"><img src="image4.jpg" style="max-width:100%;"></div>
      </div>
    </div>
    <div class="item">
      <div class="row">
        <div class="col-md-3"><img src="image5.jpg" style="max-width:100%;"></div>
        <div class="col-md-3"><img src="image6.jpg" style="max-width:100%;"></div>
        <div class="col-md-3"><img src="image7.jpg" style="max-width:100%;"></div>
        <div class="col-md-3"><img src="image8.jpg" style="max-width:100%;"></div>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-2" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#carousel-example-2" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

Disclaimer

All stock images on this template demo are for presentation purposes only, intended to represent a live site and are not included with the template or in any of the Joomla51 club membership plans.

Dribbble images are property of their respective owners. All other images are freely available from Unsplash.

Image Credits