Unslider is a jQuery plugin that creates a sliding image gallery. This is often called a hero or carousel.
Unslider is very easy to set up and even has great, easy to use documentation. The no frills version is very simple while adding some features will require a bit more work.
Unslider is a plugin for the JavaScript framework jQuery. You could download the library from the jQuery site. Better yet, you can use a hosted version of the library to speed up your site. Google hosts most popular JavaScript libraries.
We can include a Google hosted version of jQuery by using the following HTML in our page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>This link includes the jQuery library on our page. Keep in mind, that this link is version specific. The URL we used above included version 2.1.1 of jQuery, which is the current version as of November 2014 (of the version 2.0 branch).
The next step is to download the Unslider files.
Clicking the Download link on Unslider.com will open the JavaScript. Do a File > Save from the browser to save the code. You could also hold down the Option key while clicking the link to download the file automatically. Copy the downloaded file to your js folder in your website.
Next we need to link the Javascript file into our HTML page that we want to use Unslider on. We need links to both jQuery and the Unslider js file.
The two script tags should go just before the closing body tag of the document. The Unslider JavaScript needs to reference the jQuery framework, so you must include the jQuery file first or else it will not work.
Also note that your file names might be slightly different.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Unslider Example</title> </head> <body> <!-- All of your content --><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="js/unslider/unslider-1.4.2.min.js"></script></body> </html>
The goal here is to show a thumbnail image, or group of thumbnails, and then have them link to the full size image.
In order for this to work, you must have all of your full size images ready in web format. You should then decide on a thumbnail size and prepare a thumbnail for each of your images.
You should save all of the images in your images folder.
The neat part about this kind of thing is that we don't have to do very much to our HTML in order for Unslider to work.
You should use a list to mark up your images. You should wrap your entire list with a block element (article, section, div). Give the block element a class that you will use to reference your slider. This must be the same class used in the CSS, HTML, and JavaScript. This example uses the class 'banner', but you can use whatever you want.
Here's an example of a photo gallery of some paintings:
<section class="banner">
<ul>
<li><img src="images/kj_cosmopolitan.jpg" alt="Pen and ink painting"></li>
<li><img src="images/kj_sewmor.jpg" alt="Pen and ink painting"></li>
<li><img src="images/kj_morse.jpg" alt="Pen and ink painting"></li>
<li><img src="images/kj_spencer.jpg" alt="Pen and ink painting"></li>
</ul>
</section>Unslider must be initialized after your have loaded the JavaScript files. The code below loads the classic Unslider theme and then runs Unslider.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Unslider Example</title> </head> <body> <!-- All of your content --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="js/unslider/unslider-1.4.2.min.js"></script><script> $(function() { $('.banner').unslider(); }); </script></body> </html>
The text inside the parenthesis on the second highlighted line should match the class you used on your galllery. Here is is ('.unslider') because we used a class of 'unslider'. If our class was 'paintings-gallery', we would change the code to ('.paintings-gallery').
Unslider uses data-* attributes to add in titles and descriptions for each image in your Gallery. Add the appropriate attributes to your img tags.
<section class="unslider">
<a href="images/kj_cosmopolitan.jpg"><img src="images/kj_cosmopolitan-sm.jpg" data-title="Cosmospolitan" data-description="Pen and ink painting"></a>
<a href="images/kj_morse.jpg"><img src="images/kj_morse-sm.jpg" data-title="Morse" data-description="Pen and ink painting"></a>
<a href="images/kj_riccar.jpg"><img src="images/kj_riccar-sm.jpg" data-title="Riccar" data-description="Pen and ink painting"></a>
<a href="images/kj_sewmor.jpg"><img src="images/kj_sewmor-sm.jpg" data-title="Sewmor" data-description="Pen and ink painting"></a>
<a href="images/kj_spencer.jpg"><img src="images/kj_spencer-sm.jpg" data-title="Spencer" data-description="Pen and ink painting"></a>
</section>That's all you need for your basic Unslider implementation. Make sure to study the Unslider Demo I've provided so that you understand how to use it.
For the more adventurous folk, the Unslider documentation contains all sorts of extra features that you can use tweak things.