• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Elbongurk - Graphic Design, Branding, & Marketing || Stevens Point, WI

Stevens Point Design & Branding Services

  • Services
  • Work
  • About
  • Contact
  • Blog

Creating a Simple, Responsive Rotating Banner

March 7, 2016 by Jillian Noble 4 Comments

I come from a more traditional print design background and came to web design through a combination of market demand and my innate stubborn desire to make myself learn things I don’t know. I’ve gotten myself pretty well versed in HTML and CSS along the way, but draw the line when it comes to scripting or programming languages. Long-story short, I don’t personally write any JavaScript.

I do, however, integrate quite a bit of JavaScript features into my web work. I’m lucky enough to have a business partner that has a programming background and can make pretty much anything under the sun. Because of this, I have accumulated a pretty decent library of custom-made or customized common JavaScript features I can pull from when I work on a site. I’ve decided that I’d begin to share some of these in case anyone else would like to make use of them.

The first JavaScript feature we’ll be working on is a rotating banner as these types of banners are now becoming a very popular feature, especially on commerce and portfolio-type websites. This particular banner happens to be both responsive and super easy to implement.

Adding jQuery to Your Page

Our JavaScript feature is dependent on a large JavaScript library called jQuery. This is common with most prewritten JavaScript, as it significantly limits the amount of JavaScript code we have to deal with directly and more importantly, it reduces the amount of JavaScript we need to host on our own server.

Our first step is to add a link to the jQuery library itself. Lucky for us Google provides access to a whole bunch of libraries for free on developers.google.com, but the specific reference code we are looking for is jQuery 1.x snippet as seen in (fig. 1)

All we need to do is Copy the small chunk of code that appears after the 1.x Snippet: heading and Paste it into our HTML head section.

Here it is for easy reference:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

I like to put mine below my stylesheet. My typical head section looks something like this:

<head>
<title>Adding a Bit of Javascript</title>
<link href="css/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

 

Notice that the code begins with a <script> and ends with </script>. All JavaScript links will look like this. You’ll also notice that inside the opening tag is a src= attribute giving an address to where that bit of script (term for JavaScript code) lives. In this case it lives in a googleapis.com site.

Adding Our Banner JavaScript

Now if we want to add our banner JavaScript to this site, we’ll need to create our own JavaScript file. This time, instead of just simply linking to an external website, like we did with the jQuery library, we will actually host this bit of code ourselves. It’s actually quite a bit like dealing with a stylesheet, so the process should seem somewhat familiar to most of you.

  1. Inside the root folder, create a js folder (short for JavaScript)
  2. Open up your code editor.
  3. File > New to open a new file
  4. File > Save
  5. Navigate to the “js” folder you just created
  6. Name your file, script.js
  7. Hit Save

Just like if we had made a stylesheet, we would have to link it to our HTML page. The same thing applies here. We need to go our HTML page and use the same <script></script> tags we used to bring in the jQuery library to let the site know we have another JavaScript file to load, only difference is that this one lives in our root folder, so our address will need to reflect that. Let’s go ahead and create the link.

Here’s How your head section of your HTML should look:

<head>
<title>Adding a Bit of Javascript</title>
<link href="css/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>

 
It’s very important that you put the link to the jQuery library first and then any other JavaScript link after that. Order is important. The browser installs resources from the top down, so it needs to install the jQuery library before it installs our script.js for things to work properly.

The JavaScript we’re going to use for our banner initially comes from Jonathan Snook, but has been restructured for our purposes.

Let’s first take a quick look at the prewritten JavaScript that we will use for our slideshow:

$(function() {
$('#slideshow img:gt(0)').hide();
setInterval(function() {
$('#slideshow :first-child')
.fadeOut(1000)
.next('img')
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 4000);
});

 
Are you feeling a little overwhelmed?

Me too.

That is the thing I was talking about earlier. Cleary JavaScript is a much different kind of animal than HTML or CSS. It’s the reason that many designers rely on programmers and developers to write the JavaScript components for our sites.

There are a few things that I want to point out about the code that we’ll need to know to make this work with our site:

  1. The first and most important are the '#slideshow' references throughout the JavaScript. Similair to CSS, these are selectors that are telling us our slideshow will need to have an id="slideshow" in order for the JavaScript to be able work with it.
  2. The next is the 4000 value sitting at the end. This number controls the amount of time between transitions. Larger numbers provide for more time on each slide between the transitions and lower number will allow less time on each slide.
  3. Third is the .fadeOut(1000) and .fadeIn(1000). These numbers control just how long the cross fade between the slides takes. Once again larger numbers provide a lengthier cross fade and lower numbers a shorter cross fade.

Now that we’ve taken an initial look at the JavaScript we’ll be using, let’s add it to our site.

Copy the JavaScript from below in its entirely and Paste it into your script.js file. Make sure to Save your file when you are finished.

$(function() {
$('#slideshow img:gt(0)').hide();
setInterval(function() {
$('#slideshow :first-child')
.fadeOut(1000)
.next('img')
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 4000);
});

 

Setting up our Images to Be Rotated (HTML)

We saw when we dissected bits of the JavaScript code used to create our slideshow, we saw that we needed to use id="slideshow" to indicate the element that the JavaScript should work with. So for our slideshow, we’ll use a <figure> element with id="slideshow" and inside we’ll have three <img alt="" /> elements, each containing an image of the same exact size to rotate.

For images, I’ll be using some demo images available here. You can use your own, just make sure that they are all exactly the same size and already living inside your sites images folder.

Here’s how your HTML should look:

<figure id="slideshow">
<img src="images/banner_01.png" alt="" />
<img src="images/banner_02.png" alt="" />
<img src="images/banner_03.png" alt="" />
</figure>

 

and here’s how it looks in the browser. (fig. 2)

https://elbongurk.com/wp-content/uploads/2016/03/16-02.mp4?_=1

We can see that we already have most of what we are looking for. We have a rotating banner that switches between the three images, but the switch isn’t very smooth, the images aren’t responsive, and we don’t really need any margins here. To address these issues, let’s turn to our CSS.

Setting up our Images to Be Rotated (CSS)

In this case, the CSS can get a little bit complicated so I’m going to provide the code you can use in your site and make changes as you see fit.

/* makes images responsive */
img {
max-width: 100%;
}

/* takes care of clearing the floats */
#slideshow:after {
content: "";
display: table;
clear: both;
}

/* hides the images not being shown */
#slideshow img {
float: left;
margin: 0 -100% 0 0;
}

 

and here’s how it looks in the browser with the CSS from above applied. (fig. 3)

https://elbongurk.com/wp-content/uploads/2016/03/16-03.mp4?_=2

You can see we are close. We now have a functional reponsive slideshow. The only other thing we might want to do is get rid of the white edge around the edges. That is being caused by the default margin on the body, we can remove that by using our universal selector * { and setting our margin and padding to 0.

Here’s my revised CSS:

* {
margin: 0;
padding: 0;
}

img {
max-width: 100%;
}

#slideshow:after {
content: "";
display: table;
clear: both;
}

#slideshow img {
float: left;
margin: 0 -100% 0 0;
}

 

and here’s how it looks in the browser. (fig. 4)

As you see, that did take care of our white edge. Our banner now fully extends to the edge of our browser window.

We can add as many images as we want to our slideshow. It is just a matter of adding additional images inside our figure tag. Also, it’s worth reminding you at this point that any images you want incorporated into the slideshow need to be the exact same height and width. Other sizes will rotate, but the slideshow will jump from size to size and look very messy.

That wraps it up. You now know how to create a rotating banner using some simple HTML, a bit of prewritten CSS, and a chunk of prewritten JavaScript.

 

Web Design for Graphic Designers

A Step-by-Step Guide for creating a modern, responsive website from scratch

Co-authored by Jillian Noble and Ryan Krug

Published by EMSPACE

Read Online for Free

Filed Under: Design, Example, Nerd Tagged With: banner, code, Javascript, learn, responsive, responsive design, slideshow, tutorial, web design

About Jillian Noble

Creative Director & Brand Strategist - focused almost exclusively on the craft food and beverage industry since 2018.

Before launching Elbongurk, I worked as a creative director and senior designer for Pottery Barn, Target, and West Elm. I also spent nine years teaching branding and package design classes in the graphic design program at the University of Wisconsin-Stevens Point. Now, Elbongürk is my sole focus.

Emails Newsletter

Receive updates and hear what's recently been going on!

No charge. Unsubscribe anytime.

Reader Interactions

Comments

  1. Peter Czernecki says

    January 22, 2017 at 2:24 pm

    Thank you! You saved me tons of work and experimentation. And it just simply works! Thank you again! 🙂

    Reply
    • Jillian Noble says

      January 22, 2017 at 4:35 pm

      You’re welcome!

      Reply
  2. Jonathan says

    January 16, 2018 at 11:48 am

    What is the size of the pictures? i can’t seem to access the picture files

    Reply
    • Jillian Noble says

      January 16, 2018 at 4:20 pm

      The pictures are 900 X 514. Sorry about the link, looks like upload link has a bug. You can get them here. Give the page a second to load, it may look blank for just a second before the download appears.

      Reply

Leave a Reply Cancel reply

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

Footer

Our Location

A branding and design firm focused on craft food and beverage located in Stevens Point, Wisconsin.

3116 Vine Street
Stevens Point, WI 54481

Start a Project

Interested in working with us? The best way to get in touch is to fill out our contact form.

You could also shoot us an email at hello@elbongurk.com

Let’s Connect

  • Email
  • Facebook
  • Twitter

© 2023 Elbongurk, LLC, a company born of ♥