The hero is the main feature of my website. Although my location page will have an interactive map, I will still include this hero div as it is the central piece to my website. After looking through and researching quite a few different types of slider, I decided that the one I would use is the NivoSlider. This is because it was the best looking ready responsive slider I could find. I looked at various sliders and carousel jquery plugins, but at the end of the day I thought that although I couldn’t find a good looking, smooth responsive carousel that matched exactly what I wanted it to look like, it would be a lot easier to use a responsive slider as i’m not 100% confident on implementing jquery and javascript into my work, especially when it comes to altering java code. This is something I do want to learn, but I haven’t got enough time during this assignment to funnel all of my time into one aspect. Besides, the NivoSlider looks great!

jquery slider 3

Here is the HTML and CSS for the Hero:

<div id=”hero”>

This div defines the theme the nivo slider will be using, linked to a folder in the root called ‘themes’
<div class=”slider-wrapper theme-default”>

This is the div denoting the slider itself
<div id=”slider” class=”nivoSlider”>

These are the images that will be displayed in the slider
<img src=”images/slider3.jpg” alt=”” title=”<strong>This new circuit offers new and exciting challenges for drivers</strong>”/>
<img src=”images/slider2.jpg” alt=”” title=”<strong>There are a wide variety of races planned for the next year – Schedule TBC</strong>”/>
<img src=”images/slider1.jpg” alt=”” title=”<strong>The circuit will be open for track days and other public participant events</strong>”/>
</div>
</div>


This is the script that gets the nivo slider to work. It’s linked to these files in the js folder:
<link rel=”stylesheet” href=”themes/default/default.css” type=”text/css” media=”screen” />
<script src=”js/jquery.nivo.slider.pack.js” type=”text/javascript”></script>


<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider();
});
</script>

</div>

This is the CSS linked to this div:

The css below means that the hero div will stretch all the way across the container, and will change height based on the sizes of the pictures. There is no padding either in this div because I want the hero to fit completely without any gaps either side.

#hero{
width:100%;
height:auto;
padding:0;
}

There is also a css file linked to the nivoslider specifically. I haven’t had to change anything in it as it was ready responsive when I downloaded it. Most of it is self explanatory, but I will explain bits of it anyway:

/*
* jQuery Nivo Slider v3.1
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

This is for the physical slider itself, This means it will hide anything that means to display larger than the slider if it doesn’t resize. It’s position is relative as it is positioned in relation to the div it was placed in.

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
padding:0;
}

This is for the images contained in the slider. Absolutely positioned as they are inside a responsive div and the slider wont move except to accommodate the size of the images. 

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
padding:0;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}

Here the css changes if there is a link in the caption. It sets the z-index to 6 so that it lies on top of the image itself.

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
padding:0;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}

This css is for the buttons on the slider for navigation. The z-index is set at 9 so that it is higher than everything else in the slider. It’s also set to be positioned 45% from the top at all times, making it responsive when the slider shrinks in size and doesn’t escape the div at all.
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}

These next two css attributes indicate that the left and right cursors will sit 0px from the left and right sides respectively. This means they will be sat right on the edge of the slider at all times which is what you want really.

.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3…) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

I’ve added captions to the images but i’ve removed the html links as I didn’t feel that any were needed. All of the images were merely introductions to the website rather than definite offers/advertisement etc.

Here is what my nivo slider looks like now i’ve edited the images:

nivoslider

Advertisements