Carousels

Bootstrap Carousel

This is the generic carousel that ships with Bootstrap. Captions are optional.

For more configuration options, see the Bootstrap documentation

Owl Carousel

This is a jQuery plugin to achieve more complex carousel configurations.

For more configuration options, see the official documentation

To use, insert <script src="/assets/js/owl.carousel.min.js"></script> at the end of your footer, after jQuery.

Initialize by adding $( '.owl-carousel' ).owlCarousel(); inside your site's JS application document.

Owl Carousel with Caption

Owl Carousel with Navigation

By default, the Owl Carousel Prev/Next navigation are buttons inserted directly below the content.

This can be easily customized by a <div class="carousel-nav"></div> below the .owl-carousel div.

HTML

<div id="carousel-owl-3" class="owl-carousel">
	<div class="item">
		<img src="../img/presidentsmansion01_1920.jpg" />
	</div> <!-- .item -->

	<div class="item">
		<img src="../img/gorgaslibrary01_1920.jpg" />
	</div> <!-- .item -->

	<div class="item">
		<img src="../img/presidentsmansion01_1920.jpg" />
	</div> <!-- .item -->

	<div class="item">
		<img src="../img/librarystudent01_1920.jpg" />
	</div> <!-- .item -->
</div> <!-- #carousel-owl-3 -->

<div class="carousel-nav pull-right"></div>

JavaScript

$( '#carousel-owl-3' ).owlCarousel({
	dots: false,
	nav: true,
	navContainer: '.carousel-nav',
	navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']
});

Owl Carousel with Video

To enable Owl Carousel for videos, use the video: true option. To add video into carousel just put <a class="owl-video" href="_straight URL from youtube or vimeo"></a>.

HTML

<div id="carousel-owl-4" class="owl-carousel">
	<div class="item-video">
		<a class="owl-video" href="https://vimeo.com/105797233"></a>
	</div> <!-- .item-video -->

	<div class="item-video">
		<a class="owl-video" href="https://vimeo.com/104625184"></a>
	</div> <!-- .item-video -->

	<div class="item-video">
		<a class="owl-video" href="https://vimeo.com/104407535"></a>
	</div> <!-- .item-video -->

	<div class="item-video">
		<a class="owl-video" href="https://vimeo.com/92165005"></a>
	</div> <!-- .item-video -->
</div> <!-- #carousel-owl-4 -->

JavaScript

$( '#carousel-owl-4' ).owlCarousel({
	items: 1,
	margin: 10,
	lazyLoad: true,
	video: true
});

UA Carousel

These are code snippets for how to structure the UA carousel items.

Image

<div class="item">
    <div class="bg-img bg-center-center" style="background-image: url('./img/10.jpg');">
        <div class="container site-content">
	        <div class="caption caption-left">
		        <div class="caption-inner">
			        <a href="/academics/majors">
                        <h2>Find Your Major</h2>
						<p class="lead">UA offers more than 80 undergraduate degree<br /> programs through its 12 colleges and schools.</p>
					</a>
		        </div> <!-- .caption-inner -->
	        </div> <!-- .caption -->
        </div> <!-- .container -->
    </div> <!-- .bg-img -->
</div> <!-- .item -->

Video Link

<div class="item">
	<div class="bg-img bg-center-center" style="background-image: url('./img/10.jpg');">
	    <div class="caption">
	        <div class="caption-inner">
		        <a href="https://vimeo.com/104625184" target="_blank">
			        <h2>The Capstone of Higher Education</h2>
					<p class="lead">Take a birds-eye tour of UA’s beautiful campus and vibrant atmosphere</p>
					<button class="btn btn-transparent uppercase margin-top-10">Watch Video</button>
		        </a>
	        </div> <!-- .caption-inner -->
	    </div> <!-- .caption -->
	</div> <!-- .bg-img -->
</div> <!-- .item -->

Search

<div class="item">
	<div class="bg-img bg-center-center" style="background-image: url('./img/10.jpg');">
		<div class="container site-content">
			<div class="caption caption-center">
				<div class="caption-inner no-bottom-spacing">
					<h2><a href="/search">Search UA.edu</a></h2>
					<form role="form" action="/search" class="carousel-search-box">
						<label class="sr-only" for="search-site-slider">
		                	Search UA.edu
		                </label>

						<div class="input-group" style="max-width:500px;">
							<input id="search-site-slider" type="text" class="form-control" autocomplete="off" placeholder="Search UA web sites by keyword" name="q" />
							<span class="input-group-btn">
								<button class="btn btn-light" type="submit">Go</button>
							</span>
						</div> <!-- .input-group -->
					</form>
				</div> <!-- .caption-inner -->
			</div> <!-- .caption -->
		</div> <!-- .container -->
	</div> <!-- .bg-img -->
</div> <!-- .item -->