Carousel
Carousels are a great way to introduce "lifestyle" photos specific to a department or program. There are a few accessiblity guidelines to keep in mind when including carousels on your pages. See minimun requirements below:
- Individual slides must be visible for at least 45 second before going onto the next slide: use attributes,
data-ride="carousel" data-interval="45000" - All carousels should include a pause/play button.
- User must be able to navigate through the slides using their keyboard arrows
Carousel Captions Restrictions
- Main Title Average: 7 Words
- Excerpt Average: 10 Words
Basic Carousel with Captions
<div id="carousel-mdctemplate" class="carousel slide mdc-carousel" data-ride="carousel" data-interval="45000" data-pause="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-mdctemplate" data-slide-to="0" class="active"></li>
<li data-target="#carousel-mdctemplate" data-slide-to="1"></li>
<li data-target="#carousel-mdctemplate" data-slide-to="2"></li>
</ol>
<!-- Video Controls -->
<div class="video-controls">
<button type="button" id="play-pause" aria-label="Pause rotating images"><span class="glyphicon glyphicon-pause"></span></button>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" title="Virtual College News and Announcements Carousel">
<div class="item active">
<img src="http://placehold.it/945x630">
<div class="carousel-caption headline-right">
<strong>Caption 1</strong>
<p>On viewports greater than 992 pixels this caption aligns to the right.</p>
</div>
</div>
<div class="item">
<a href="#">
<img src="http://placehold.it/945x630">
<div class="carousel-caption headline-left">
<strong>Caption 2</strong>
<p>On viewports greater than 992 pixels this caption aligns to the left.</p>
</div>
</a>
</div>
</div>
<!-- Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-mdctemplate" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-mdctemplate" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End Carousel -->
Caption Options
If you would like to have "floating" captions, add .ct-align .bottom-left, .ct-align .bottom-right, .ct-align .top-left", or .ct-align .top-right classes to the tag with the carousel-caption class.
Free 30 Min. Fitness Classes
Part of your membership to the aquatic and fitness center!
Learn more »
This is where transformation gets perfected!
The 6.000-square-foot North Campus Aquatic and Fitness Center offers state-of-the-art equipment that is sure to fit everyone’s fitness needs.
Learn more »
Wellness Series
Wellness Speaker Series, Fitness and Swimming Competitions.
Learn More »
Your Daily Dose of Iron
Our facility is packed with the state-of-the-art equipment you need to get your daily pump.
Learn More about our Facility »
<div class="floating-captions">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="45000" data-pause="false">
<!-- Video Controls -->
<div class="video-controls">
<button type="button" class="play-pause" aria-label="Pause rotating images" data-target="#myCarousel" title="Pause myCarousel"><span class="glyphicon glyphicon-pause"></span></button>
</div>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active"><a href="documents/FREE30_min_classes.pdf"><img src="http://placehold.it/945x630" alt="Fitness Class"></a>
<div class="carousel-caption ct-align bottom-right">
<h4>Free 30 Min. Fitness Classes</h4>
<p>Part of your membership to the aquatic and fitness center!
<br>
<br>
<a href="documents/FREE30_min_classes.pdf" class="btn btn-primary" title="Learn more about our free 30 minute classes" target="_blank">Learn more »</a></p>
</div>
</div>
<div class="item"><a href="facility/default.aspx"><img src="http://placehold.it/945x630" alt="MDC North Aquatic and Fitness Center"></a>
<div class="carousel-caption ct-align top-left">
<h4>This is where transformation gets perfected!</h4>
<p>The 6.000-square-foot North Campus Aquatic and Fitness Center offers state-of-the-art equipment that is sure to fit everyone’s fitness needs.
<br>
<br>
<a href="facility/default.aspx" class="btn btn-primary" title="Learn more about the north campus fitness center">Learn more »</a></p>
</div>
</div>
<div class="item"><a href="documents/wellness-series-March-May2013.pdf"><img src="http://placehold.it/945x630" alt="North Campus Aquatic and Fitness Center"></a>
<div class="carousel-caption ct-align top-right">
<h4>Wellness Series</h4>
<p>Wellness Speaker Series, Fitness and Swimming Competitions.
<br>
<br>
<a href="documents/wellness-series-March-May2013.pdf" class="btn btn-primary" title="Learn more about our wellness series">Learn More »</a></p>
</div>
</div>
<div class="item"><a href="documents/wellness-series-March-May2013.pdf"><img src="http://placehold.it/945x630" alt="North Campus Aquatic and Fitness Center"></a>
<div class="carousel-caption ct-align bottom-left">
<h4>Your Daily Dose of Iron</h4>
<p>Our facility is packed with the state-of-the-art equipment you need to get your daily pump.
<br>
<br>
<a href="http://www.mdc.edu/kendallfitness/facility/default.aspx" class="btn btn-primary" title="Learn more about our wellness series">Learn More about our Facility »</a></p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>