6-A Homepage Carousel
<div class="home carousel" data-aau="carousel" data-arrow="true" data-begin="0">
  <div class="slides">
    <div class="slide" data-src="image.jpg">
      <div class="info">
        <div class="row">
          <div class="marged padded">
            <p>Student Name| <a href="#">Department</a></p>
          </div>
        </div>
      </div>
    </div>
    <!-- ... -->
  </div>
  <div class="title-cta">
    <h1>By Artists. For Artists.</h1>
  </div>
</div>
6-B Student Work Carousel
<div class="carousel" data-aau="carousel" data-begin="0" data-arrow="true">
  <div class="slides">
    <div class="slide" data-src="carousel1.jpg">
      <div class="info">
        <div class="row">
          <div class="marged padded">
            <p>Student Name | <a href="#">Department</a></p>
          </div>
        </div>
      </div>
    </div>
    <div class="slide" data-src="carousel2.jpg">
      <div class="info">
        <div class="row">
          <div class="marged padded">
            <p>Student Name | <a href="#">Department</a></p>
          </div>
        </div>
      </div>
    </div>
    <div class="slide" data-src="carousel3.jpg">
      <div class="info">
        <div class="row">
          <div class="marged padded">
            <p>Student Name | <a href="#">Department</a></p>
          </div>
        </div>
      </div>
    </div>
    <div class="slide" data-src="carousel4.jpg">
      <div class="info">
        <div class="row">
          <div class="marged padded">
            <p>Student Name | <a href="#">Department</a></p>
          </div>
        </div>
      </div>
    </div>
    <div class="slide" data-src="carousel5.jpg">
      <div class="info">
        <div class="row">
          <div class="marged padded">
            <p>Student Name | <a href="#">Department</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
6-C Career Path Carousel
  <div class="tab-carousel" data-aau="tabcarousel" data-target="#careerpath">
    <ul class="pills">
      <li>Texture Painter</li>
      <li>Color Artist</li>
      <li>2d Animator</li>
      <li>3d Animator</li>
      <li>3d Modeler</li>
      <li>Storyboarder</li>
      <li>Texture Painter2</li>
      <li>Color Artist2</li>
      <li>2d Animator2</li>
      <li>3d Animator2</li>
      <li>3d Modeler2</li>
      <li>Storyboarder2</li>
    </ul>
  </div>
<div class="carousel tab" data-aau="carousel" data-begin="0">
  <div class="slides">
    <div class="slide" data-src="../../vendors/docs/images/carousel1.jpg" >
      <div class="info row">
        <div class="column medium-6 medium-offset-1">
          <div class="content">
            <!-- write the content here -->
          </div>
        </div>
        <div class="column medium-4 hidden_small visible_medium">
          <div class="content">
            <!-- write the content here -->
          </div>
        </div>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel2.jpg">
      <div class="info row">
        <div class="column medium-6 medium-offset-1">
          <div class="content">
            <!-- write the content here -->
          </div>
        </div>
        <div class="column medium-4 hidden_small visible_medium">
          <div class="content">
            <!-- write the content here -->
          </div>
        </div>
      </div>
    </div>
    <div class="slide row" data-src="../../vendors/docs/images/carousel3.jpg">
      <div class="info">
        <div class="column medium-6 medium-offset-1">
          <div class="content">
            <!-- write the content here -->
          </div>
        </div>
        <div class="column medium-4 hidden_small visible_medium">
          <div class="content">
            <!-- write the content here -->
          </div>
        </div>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel4.jpg">
      <div class="info row">
        <div class="column medium-6 medium-offset-1">
          <div class="content">
            <!-- write the content here -->
          </div>
        </div>
        <div class="column medium-4 hidden_small visible_medium">
          <div class="content">
            <!-- write the content here -->
          </div>
        </div>
      </div>
    </div>
    <div class="slide row" data-src="../../vendors/docs/images/carousel5.jpg">
      <div class="info">
        <div class="column medium-6 medium-offset-1">
          <div class="content">
            <!-- write the content here -->
          </div>
        </div>
        <div class="column medium-4 hidden_small visible_medium">
          <div class="content">
            <!-- write the content here -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
      
6-D News Carousel
<div class="carousel" data-aau="carousel" data-begin="0" data-arrow="true">
  <div class="slides">
    <div class="slide" data-src="../../vendors/docs/images/carousel1.jpg" >
      <div class="info">
        <a href="#"><h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6><a>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel2.jpg">
      <div class="info">
        <a href="#"><h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6><a>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel3.jpg">
      <div class="info">
        <a href="#"><h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6><a>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel4.jpg">
      <div class="info">
        <a href="#"><h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6><a>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel5.jpg">
      <div class="info">
        <a href="#"><h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6><a>
      </div>
    </div>
  </div>
</div>
      
Carousel With Title and Description
<div class="carousel" data-aau="carousel" data-begin="0" data-arrow="true">
  <div class="slides">
    <div class="slide" data-src="../../vendors/docs/images/carousel1.jpg" >
      <div class="info">
        <h6>Title</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel2.jpg">
      <div class="info">
        <h6>Title</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel3.jpg">
      <div class="info">
        <h6>Title</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel4.jpg">
      <div class="info">
        <h6>Title</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel5.jpg">
      <div class="info">
        <h6>Title</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
</div>
      
6-E Small Carousel
<div class="carousel small" data-aau="carousel" data-begin="0" data-arrow="true">
  <div class="slides">
    <div class="slide" data-src="../../vendors/docs/images/carousel1.jpg">
      <div class="info">
        <div class="row text-centered">
          <div class="marged padded">
            <p>Here is the caption</p>
          </div>
        </div>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel2.jpg">
      <div class="info">
        <div class="row text-centered">
          <div class="marged padded">
            <p>Here is the caption</p>
          </div>
        </div>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel3.jpg">
      <div class="info">
        <div class="row text-centered">
          <div class="marged padded">
            <p>Here is the caption</p>
          </div>
        </div>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel4.jpg">
      <div class="info">
        <div class="row text-centered">
          <div class="marged padded">
            <p>Here is the caption</p>
          </div>
        </div>
      </div>
    </div>
    <div class="slide" data-src="../../vendors/docs/images/carousel5.jpg">
      <div class="info">
        <div class="row text-centered">
          <div class="marged padded">
            <p>Here is the caption</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
      

Sign In