post: Styling the Owl Carousel: Links and Pagination

Home

Styling the Owl Carousel

Working With CSS

  

Articles

CSS HTML jQuery Theme Development

Owl Carousel is a popular lightweight touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders. It is highly customizable and easy to add to any site including WordPress. Here I show you how to add the slider, and how to tweak the layout and style of the icons and buttons.

Links

Owl Carousel v1: Owl Carousel v1

Owl Carousel v2: Owl Carousel v2

Basic Structure

Looking at the demo page we’ve selected the basic full page slider:


<div id="owl-demo" class="owl-carousel owl-theme">
    <div class="item"><img src="images/image1.jpg" alt="Image1"></div>
    <div class="item"><img src="images/image2.jpg" alt="Image2"></div>
    <div class="item"><img src="images/image3.jpg" alt="Image3"></div>
</div>


$(document).ready(function() {

  $("#owl-demo").owlCarousel({
 
      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true
   });

});


#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
}

Implementing The Carousel

First we add the required javascript. This is the main jQuery file, which comes above the owl carousel plugin. These should be placed in the body of the page, just above the </body> tag. The singleItem forces the plugin to display a single item at a time. The navigation setting adds the next/prev links, which we style below.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/owl.carousel.min.js" type="text/javascript"></script>

Below this add the small javascript document ready block which will instantiate the owl carousel to the html container. Wrap this in a <script></script>script tag.

Next we add the small css file which contains the base styling for the carousel.


<link rel="stylesheet" type="text/css" href="styles/owl.carousel.css"  />

Basic Look

This is what the basic carousel looks like with the default html, css & js.

carousel-1

Digging deeper

Once the slider / carousel is up and running you will notice a few additions to the html that are not in the basic structure – such as the prev / next buttons and the slider buttons. There is additional layering to the slider as well. This is html that the owl carousel jQuery plugin adds to the DOM depending on the options at instantiation. These are what we’re targeting. So what does the enhanced html look like?

If you inspect the DOM in your browser now you will see Owl Carousel gives us 2 Div’s inside the div with the class “owl-controls” one called “owl-pagination” for our pagination dots and one called “owl-buttons” which contains our previous and next buttons. These elements we will be styling:


<div class="owl-carousel owl-theme" id="owl-demo" style="display: block; opacity: 1;">
    <div class="owl-wrapper-outer">
        <div class="owl-wrapper" style="left: -2340px; width: 7020px; display: block;">
            <div class="owl-item" style="width: 1170px;">
                <div class="item">
                    <img alt="The Last of us" src="assets/fullimage1.jpg">
                </div>
            </div>
            <div class="owl-item" style="width: 1170px;">
                <div class="item">
                    <img alt="GTA V" src="assets/fullimage2.jpg">
                </div>
            </div>
            <div class="owl-item" style="width: 1170px;">
                <div class="item">
                    <img alt="Mirror Edge" src="assets/fullimage3.jpg">
                </div>
            </div>
        </div>
    </div>
    <div class="owl-controls clickable">
        <div class="owl-pagination">
            <div class="owl-page">
                <span></span>
            </div>
            <div class="owl-page">
                <span></span>
            </div>
            <div class="owl-page active">
                <span></span>
            </div>
        </div>
        <div class="owl-buttons">
            <div class="owl-prev">prev</div>
            <div class="owl-next">next</div>
        </div>
    </div>
</div>

Styling the carousel

Next we add some custom css to the foot of the carousel.css file to style the images and carousel icons/ links. First we add the image css section from above to ensure that the full page images will the available space in the carousel, and are responsive depending on the carousel width.


.owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;

Next we move on to the next/prev links. We’re going to position them layered on top of the images, and next to each other. This is done through position:absolute. This requires the containing element to be position:relative, which fortunately the owl-carousel class already is.


.owl-theme .owl-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

We’re going to pin the links to the bottom right of the image, and positioned together. We’ll add some opacity to them, and make them solid when hovered over. A subtle transition for the hover adds a bit of class.


.owl-theme .owl-controls .owl-buttons {
  position: absolute;
  right: 0;
  bottom: 0;
}
.owl-theme .owl-controls .owl-buttons div {
  color: #FFF;
  display: inline-block;
  zoom: 1;
  *display: inline;
  margin: 0;
  padding: 10px 16px;
  font-size: 16px;
  opacity: 0.8;
  -webkit-transition: opacity 200ms ease;
     -moz-transition: opacity 200ms ease;
       -o-transition: opacity 200ms ease;
          transition: opacity 200ms ease;
}
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
  opacity: 1;
  text-decoration: none;
}
.owl-theme .owl-controls .owl-buttons .owl-prev { background-color: #252525; }
.owl-theme .owl-controls .owl-buttons .owl-next { background-color: #191919; }

Next well style the pagination links. These are centered at the foot of the images, and in-line with the next/prev links. We’ll also make the active button a bit larger than the inactive ones


.owl-theme .owl-controls .owl-page{
	display: inline-block;
	zoom: 1;
	*display: inline;
}
.owl-theme .owl-controls .owl-page span{
	display: block;
	width: 15px;
	height: 15px;
	margin: 16px 7px 8px;
	opacity: 0.6;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: #222;
}
.owl-theme .owl-controls .owl-page.active span{
	-webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.owl-theme .owl-controls.clickable .owl-page:hover span { opacity: 1; }

Finished Look

This is what the basic carousel looks like with the default html, css & js.

carousel-2

Wrapping it up

Hopefully that has given you an idea of the flexibility of the owl carousel and an insight into the multiple ways it can be styled to fit your theme.

comments powered by Disqus