This is the generic carousel that ships with Bootstrap. Captions are optional.
For more configuration options, see the Bootstrap documentation
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.
<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>
$( '#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>']
});
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>
.
<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 -->
$( '#carousel-owl-4' ).owlCarousel({
items: 1,
margin: 10,
lazyLoad: true,
video: true
});
These are code snippets for how to structure the UA carousel items.
<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 -->
<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 -->
<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 -->