Table of Contents
You just started working on some interesting project. Wireframes and mockups are done and you also have an idea about the overall functionality. You decided to include some dynamic elements into this project with help of jQuery. Let’s say this element will be some simple image slider with controls – left and right arrows – so the visitors will be able to cycle through images as they wish. You have two options. First, use some plugin that suits your needs. Second, create the necessary code by yourself. Today, let’s explore the second one.
Before we start, I want to mention that choosing the second way is almost always wiser. If you don’t have required skills that might be even better. Going this way will force you to use two most important conditions for learning – focus and practice. Using these two conditions, you will be able to learn anything any time. Anyway, back to the tutorial …
Assets
We are going two external assets. First will be CSS stylesheet called normalize. This stylesheet will take care about unifying the visual side of all elements across the browsers. Second is font awesome. We need to include this font because we are going to use two icons for controls in slider – left and right angle (arrow).
Normalize stylesheet:
//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css
Font awesome:
//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css
Codepen demo:
https://codepen.io/d3v3r0/pen/NPWKay
HTML
First we are going to create a structure with content for slider. Whole slider will be wrapped up in div with class of “wrapper”. Inside will be nested three elements – i tag, unordered list and another i tag. First i tag will have following classes – “fa fa-angle-left js-control-left”. First class is for connecting the tag with font awesome, second for selecting specific icon and the last class is for jQuery.
List will have class “slider” and contain three list items with class “slide”. First slide will also have class “js-active”. For content, you can use whatever content you want. I chose the split the slides into two sections through two div tags with class “bit-2”. First half will contain two headings – h2, h3 and some random text in paragraph. Instead of boring lorem ipsum, let’s use Esperanto. Second half will contain image. For these images we will use img element. Don’t forget to include alt attribute.
Second i tag, and last HTML element, will look similar as the first one, except the second class will be “fa-angle-right” and for jQuery “js-control-right”.
HTML:
<div class="wrapper">
<i class="fa fa-angle-left js-control-left"></i>
<ul class="slider">
<li class="slide js-active">
<div class="bit-2">
<h1>Nikita</h1>
<h2>Specialty: Cleaning and maintaining your web browser</h2>
<p>Samtempe espereble kun at, eviti scivolema malantaŭa nun jh. Trioleto mezurunuo fratineto hop ut. Rilativo frazetvorto jo tre, mi des tiom mekao frazenkondukilo. Proto bedaŭrinde ed tet, oj finnlando daralbajdo dividostreko poa. Sen grado franjo fi.</p>
</div>
<div class="bit-2">
<img src="http://i.imgur.com/ekafYL3.png" alt="Nikita minion" />
</div>
</li>
<li class="slide">
<div class="bit-2">
<h1>Germin</h1>
<h2>Specialty: Speading up your computer by removing clutter</h2>
<p>Ido intere neŭtrala infinitivo lo, aĥ tempismo malantaŭa nv. Sen u tiuj ablativa, kuo ti povi movi alternativdemando, mis plua ripeti indikativo nu. Vo gibi simil suplemento poe, cento sekse pre ul. Hoj dato negi do, nj ism dura liva.</p>
</div>
<div class="bit-2">
<img src="http://i.imgur.com/PLj2PSX.png" alt="Germin minion" />
</div>
</li>
<li class="slide">
<div class="bit-2">
<h1>Sybila</h1>
<h2>Specialty: Fighting with spam in your email</h2>
<p>Iom land aliom kioma aj, ies ju modo finno ferio, apostrofo duonvokalo sh eks. Tuja ipsilono sub he, jes titolo traigi uk. San ge post espereble, fri nk ologi oktiliono malebligi. Io nur kab'o ebleco dikfingro, pere vela ut enz. Finnlando fundamenta pro de.</p>
</div>
<div class="bit-2">
<img src="http://i.imgur.com/sS4wjM1.png" alt="Sybila minion" />
</div>
</li>
</ul>
<i class="fa fa-angle-right js-control-right"></i>
</div>
CSS
Now, let’s focus on CSS part. The best place to start is to adjust typography. The font of body element will be set to “16px sans-serif”. For h1 we will use font-size of 1.75em and for h2 1.25em. Controllers (angles) will have font-size set to 4em. These values are based on observation, there is no system behind it.
CSS:
/*=Typography=*/
body {font: 16px sans-serif;}
h1 {font-size: 1.75em;}
h2 {font-size: 1.25em;}
.fa {font-size: 4em;}
For layout … Let’s change the text color to lighter black – #333 – by via body and color property. Wrapper div will have width of 700px and margin set to auto. Divs with class “bit-2” will have display property set to inline-block, width to 49% and vertical-align to top. I chose inline-block to avoid using floats and to be able to use vertical-align.
CSS:
body {color: #333;}
.wrapper {
margin: auto;
width: 700px;
}
.bit-2 {
display: inline-block;
width: 49%;
vertical-align: top;
}
Let’s style the controllers by selecting “fa” class. In order to center them vertically set the position to relative and top to 2em. Again, this value is also based just on observation. Let’s set the float to left, cursor to pointer and for smoothing hover state transition to color .25s. For hover change the color to light blue – #0086b3. For left controller set the margin-right to .5em and margin-left to .25em. For the right one margin-right will be .25em and set the float to right. This will add some white space between controllers and list.
CSS:
.fa {
position: relative;
top: 2em;
float: left;
cursor: pointer;
transition: color .25s;
}
.fa:hover { color: #0086b3; }
.fa-angle-left {
margin-right: .5em;
margin-left: .25em;
}
.fa-angle-right {
float: right;
margin-right: .25em;
}
The last thing we are going to do today is to style the slider and slides. Slider will have position set to relative, float to left, padding and margin to 0, width to 600px and list-style-type of none. This setting will place the list between the controllers, remove default space around it and also the bullet points. For slides, set the position to absolute, top and left to 0 and background to #fff. Thanks to absolute positioning and modifying top and left properties, slides will be stacked on each other in top-left corner of the list. The reason for using background color is to hide inactive slides. Otherwise, the content of individual slides would overlap.
CSS:
.slider {
position: relative;
float: left;
padding: 0;
margin: 0;
width: 600px;
list-style-type: none;
}
.slide {
position: absolute;
top: 0;
left: 0;
background: #fff;
}
Summary
This is all for CSS and also for this part of tutorial. In second part, last one, we will put together necessary jQuery code to bring functionality to the slider. We will also explore the way the code work so you will understand the logic and be able to get done similar task on your own in the future.
Remember, you don’t have to use third-side plugins just to achieve your goal. Instead, invest your time and effort and try to figure it on your own. This is the best way to learn how to program.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
