Tutorials Web Development

Animated Content Slider with Bubble Navigation Icons

One of the most common dynamic pieces to any modern website is the beloved content slider. These come in many different shapes & sizes to accommodate images, text, video, or a combination of all 3. Many of these sliders will use a dot-based breadcrumb navigation allowing users to move between slides without reliance on the next/prev arrows.

Live Demo - Download Source Code

In this tutorial I want to demonstrate how you can build one of these bubble circle nav sliders using JavaScript. Specifically I'll be working with the slidr.js library which is free and open source for any developer to use. It comes with some great editable options and it's fully responsive for any mobile screen or monitor.

Getting Started

First create a new HTML5 page along with an external stylesheet named styles.css. Thankfully slidr.js does not have any dependencies so just download the slidr.js script from Github and include that into the webpage header.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<code>
<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Bubble Nav Content Slider - Template Monster Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
  <link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/slidr.min.js"></script>
</head>
</code>

This script allows you to setup a content rotator using any HTML elements. The content might be stored inside a definition list or just within a series of divs. Skim through the Slidr documentation if you want to see more of their examples.

I've gone with the typical unordered list because it's the most common solution and provides better semantic markup. Inside each list item is similar HTML code which appears on each slide. The script uses an HTML5 attribute data-slidr on each item so the individual slides can referenced like an ID. Each data-slidr value should be unique like a numbering system.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="wrapper">
  <h1>Content Slider with Bubble Nav</h1>
 
  <ul id="imgrotate">
    <li data-slidr="1st"><span class="caption"><a href="https://dribbble.com/shots/1596598-Speed" target="_blank">Shot by Jackie Tran</a></span><img src="img/01-jackie-tran-dribbble-shot.jpg" alt="jackie tran icon"></li>
 
    <li data-slidr="2nd"><span class="caption"><a href="https://dribbble.com/shots/1596782-Floating" target="_blank">Shot by Tess Donohoe</a></span><img src="img/02-tess-donohoe-floating.jpg" alt="tess donohoe illustration"></li>
 
    <li data-slidr="3rd"><span class="caption"><a href="https://dribbble.com/shots/1596771-Lighter" target="_blank">Shot by Christoph Gromer</a></span><img src="img/03-christoph-gromer-zippo.jpg" alt="christoph gromer lighter"></li>
 
    <li data-slidr="4th"><span class="caption"><a href="https://dribbble.com/shots/1597254-Cats-in-space" target="_blank">Shot by Shirley-Ann D</a></span><img src="img/04-shirley-ann-d-cats-in-space.jpg" alt="cats in space"></li>
  </ul>
</div>

The UL element has an ID of #imgrotate which will be targeted directly in the Slidr JS method. Also notice how each list item includes some caption text linking out to the related Dribbble shot. It's very simple to add fully-contained HTML into each slide without worrying about messing up your own styles.

Designing with CSS

All of the Slidr CSS code is self-contained within the JavaScript file. This is helpful because it saves you from including another stylesheet - plus lots of other properties will be added inline on each element. But it's still possible to overwrite these styles using the CSS !important declaration. Let's start with my basic page formatting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/** page structure **/
#wrapper {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 15px 30px;
}
 
#imgrotate {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
  min-height: 250px;
}
#imgrotate li {
  position: relative;
  display: block;
}
 
#imgrotate li .caption {
  position: absolute;
  top: 25px; 
  left: 40px;
  font-weight: bold;
}
#imgrotate li .caption a {
  display: block;
  font-size: 1.2em;
  padding: 7px;
  color: #486680;
  background: rgba(255,255,255,0.8);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#imgrotate li .caption a:hover {
  color: #6184a1;
}

The #wrapper div contains the entire website and maxes out at 900px width. Yet it can still be resized down to any responsive device width and look great. #imgrotate has a max-width of 800px so there's always a bit of space between the contents and the browser window. I'm also using min-height because the slider will not setup a default height value. So if you have content with a certain height it's best to set up a minimum value.

Each .caption element is self-contained using absolute positioning. Since the list item container uses relative positioning we can move the caption anywhere and it should still look good at any screen size.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/** slidr CSS updates **/
.slidr-control.right {
  width: 40px !important;
  padding-right: 5px !important;
}
 
.slidr-control.left {
  width: 40px !important;
  padding-left: 5px !important;
}
 
 
/** responsive media queries **/
@media only screen and (max-width: 500px) {
  h1 {
    font-size: 2.0em;
  }
 
  #imgrotate li .caption {
    top: 10px;
  }
}

The only direct changes I've made to the Slidr CSS pertains to each of the navigation arrows. By default I feel they're a bit too thin, so I've increased the width on both arrows. Plus I've included some extra padding on both arrows to give space between the edge of the slider - this also makes the arrow link a little bigger and easier to tap on mobile devices.

If you want to customize more of the CSS just use Chrome or Firefox to inspect pieces of the slider. You'll be able to find the classes related to each item and you can overwrite their defaults pretty easily.

At the bottom of my CSS I've added some basic responsive code to update when the screen resizes smaller. Anything at 500px or below will force the heading text smaller and rearrange the caption link. Feel free to include your own responsive codes or add another breakpoint above or below 500px as needed.

Animating with Slidr.js

Finally we get to the JavaScript code which is quite simple once you understand how it works. If you check out the Slidr documentation you'll find a table full of optional settings. This will explain what each setting does, the default value, and what you might change the value to be.

The whole Slidr method can be initiated without changing any of these options. But if you want customized design then it's best to learn what you can change and how to do it. Also following this same code template you can add multiple sliders onto the same page.

1
2
3
4
5
6
7
8
9
10
11
slidr.create('imgrotate', {
  breadcrumbs: true,
  controls: 'border',
  direction: 'horizontal',
  fade: false,
  keyboard: true,
  overflow: true,
  theme: '#ffffff',
  touch: true,
  transition: 'fade' // fade, cube, or linear
}).start();

The basic function call should be slidr.create().start() with the options being passed into create(). There are 2 parameters - the first is a string with the slider ID name. Then an optional 2nd parameter contains a list of settings in the form of key:value pairs.

My very first option breadcrumbs is what forces the circle navigation buttons to appear. controls will manage the arrow navigation links. direction is also important because you can change different slides to be vertical or horizontal based on your preference. The docs go much more into detail about combining both vertical and horizontal slides together.

keyboard allows users to transition between slides with the arrow keys. overflow will allow a bit of content overflow when transitioning between slides. I like this effect because it looks more dynamic, but it won't change a whole lot if you set it to false. Possibly the most important option is transition which lets you setup the animated effect between slides.

The default is cube which uses a 3D rotation effect to switch between content. The other options are linear for a clean slide or fade for a fading effect. You can also turn off slide transitions with the value none. Most of these options are very straightforward and easy to understand once you have a look over the documentation.

Closing

I particularly love Slidr because it's responsive, lightweight, and provides a handful of nice options that you can use to modify the content. Also you don't need to rely on an external library such as jQuery. It might take a bit of time messing around with the code to get everything looking smooth - but Slidr is perfect for any website layout and simply offers a fantastic content sliding interface. Feel free to download a copy of my source code and try adding this into your next web project.

Leave a Reply

Your email address will not be published. Required fields are marked *