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/3.3.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 3.3.1 of jQuery, which is the current version as of November 2018 (of the version 3 branch).
The next step is to download the Unslider files.
The original Unslider download no longer works. You can download the necessary files from the class website:
Where to save:
unslider-min.js file into your js folder.unslider.css file into your CSS folder.unslider-dots.css file into your CSS folder.Once you've done this, your website structure should look something like this:
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 library, 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/3.3.1/jquery.min.js"></script> <script src="js/unslider-min.js"></script></body> </html>
Unslider has some basic CSS styles to help make the slider work. Link them to your HTML page after any resets you have, but before your own CSS files.
The unslider-dots.css file is only necessary if you want to have the navigation dots for your slider.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Unslider Example</title> <link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/unslider.css" /> <link rel="stylesheet" href="css/unslider-dots.css" /><link rel="stylesheet" href="css/my-styles.css"> </head> <body> <!-- All of your content --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/unslider-min.js"></script> </body> </html>
The goal here is to show a slideshow of your images. In order for this to work, you must have all of your images ready in web format. Your images should probably also all be the same size.
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 sliding 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_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/3.3.1/jquery.min.js"></script> <script src="js/unslider/unslider-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 gallery. Here is is ('.banner') because we used a class of 'banner'. If our class was 'paintings-gallery', we would change the code to ('.paintings-gallery').
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.
There are a variety of options you can set for your slider. They get included when you initialize your slider.
Each option must end with a comma. The last option should not have a comma.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/unslider/unslider-min.js"></script> <script> $(function() { $('.banner').unslider({autoplay: true}); }); </script></body> </html>
Change the speed of the slides or the start delay.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/unslider/unslider-min.js"></script> <script> $(function() { $('.banner').unslider({speed: 1000, // The speed to animate each slide (in milliseconds) [default: 750] delay: 6000 // The delay between slide animations (in milliseconds) [default: 3000]}); }); </script></body> </html>
You can change the animation style to horizontal, vertical, or fade. Horizontal is the default.
If using fade, be sure to set an explicit height on your slider. The height should be the height of your images.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/unslider/unslider-min.js"></script> <script> $(function() { $('.banner').unslider({animation: 'fade'}); }); </script></body> </html>
There are more options you can play around with listed on the See the Advanced Unslider Demo code. For the more adventurous folk, the Unslider website contains all sorts of extra features that you can use tweak things.
To show navigation dots on your slides, you must link to the unslider-dots.css file included with the Unslider download.
By default, the dots will show under the slider. If you have a white background, they will be invisible. You can change the color of the dots by overriding the Unslider dots css colors.
If you want the dots to appear over your slider, you can use the following CSS (or similar):
/* Style the dots*/
.unslider {
/* set the positioning context for the dots */
position: relative;
}
.unslider-nav {
/* position the navigation dots over the slides */
position: absolute;
left: 0;
right: 0;
top: 95%;
z-index: 1000; /* Make sure the dots show over the images */
}Use CSS similar to what is shown above to style the navigation arrows. Review the code shown on the See the Advanced Unslider Demo for more information.