How to create a jQuery image slider with dots navigation

This article was written by in March 4, 2015, & may not be posted on other sites!
Original source url for this article: How to create a jQuery image slider with dots navigation

How to create a jQuery image slider with dots navigation.
Having an image slider with dots navigation is super easy and takes 5 minutes to create. You can even fade content like text, video or anything else. This is how to create a jQuery image slider dots navigation.

How to create a jQuery image slider with dots navigation

 

How to create a jQuery image slider with dots navigation

Unslider is a super tiny light weight jQuery library, basically only one small file needed. Follow these steps to create a jQuery image slider with dots navigation.

Basic code jQuery image slider

  1. Make sure you have included the basic jQuery library inside the <head> of your website. You can add an external link from http://code.jquery.com/ something like this:
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  2. After the basic jQuery library, add the image slider jQuery file. This can also be done with an external link from http://unslider.com/. Put the script tag inside the <head> of your website after the first one, something like this:
    <script src="http://unslider.com/unslider.min.js"></script>
  3. Next we are adding a list of items to slide in the HTML file. The <li> list items can hold any elements you like to slide. Something like this:
    <div class="banner">
    <ul>
    <li>This is a slide.</li>
    <li>This is another slide.</li>
    <li>This is a final slide.</li>
    </ul>
    </div>
  4. Next add this CSS code in your CSS file:
    .banner {
    position: relative;
    overflow: auto;
    padding-bottom: 100px;
    }
    .banner li {
    list-style: none;
    }
    .banner ul li {
    float: left;
    }
    .dots{
    text-align: center;
    }
    .dots li{
    display: inline;
    padding: 0 20px;
    cursor: pointer;
    }
    .active{
    text-decoration: underline;
    }
  5. Finally the jQuery code to get the slider going. Put this jQuery code inside a <script> tag at the bottom of your HTML file or in an external js-file:
    $('.banner').unslider({
    speed: 500,               //  The speed to animate each slide (in milliseconds)
    delay: 3000,              //  The delay between slide animations (in milliseconds)
    complete: function() {},  //  A function that gets called after every slide animation
    keys: true,               //  Enable keyboard (left, right) arrow shortcuts
    dots: true,               //  Display dot navigation
    fluid: false              //  Support responsive design. May break non-responsive designs
    });

 

Changing the numbers to dots in the image slider

By default, the navigation in the jQuery image slider is shown as numbers (text), but you can easily replace the numbers with dots or any other custom graphic. Simply change the CSS as below, but make sure the image paths match your correct image url:
.banner {
position: relative;
overflow: auto;
padding-bottom: 100px;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}
.dots{
text-align: center;
}
.dots li{
display: inline-block;
height: 0;
width: 15px; /*same as your img height*/
padding: 15px 20px 0 20px; /*the first number is your img height*/
background-image: url(images/dot.png);
background-repeat: no-repeat;
overflow: hidden;
cursor: pointer;
}
.dots .active{
background-image: url(images/dot-active.png);
}

 

 

Page template to get you started on the jquery image slider

Below a complete HTML document to get you started.
Source code and more info on the jquery image slider found here: http://unslider.com/

<?php ?>
<!DOCTYPE html>
<!--
Author Olivia Hoback
www.olivia.nu
-->
<html>
<head>
<title>jQuery slider tutorial by Olivia Hoback</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>

<style>
.banner {
position: relative;
overflow: auto;
padding-bottom: 100px;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}
.dots{
text-align: center;
}
.dots li{
display: inline;
padding: 0 20px;
cursor: pointer;
}
.active{
text-decoration: underline;
}

</style>
</head>


<body>
<div class="banner">
<ul>
<li>
<h2>Heading 1</h2>
<p>Some fine text about anything. You can also add an image element or any other content you wish to slide.</p>
</li>
<li>
<h2>Heading 2</h2>
<p>Another fine text about anything.</p>
</li>
<li>
<h2>Heading 3</h2>
<p>The last text about anything.</p>
</li>
</ul>
</div><!--.banner-->
<script>
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
</script>
</body>

</html>

Spread the word

Facebooktwittergoogle_pluslinkedinmail

2 thoughts on “How to create a jQuery image slider with dots navigation

  1. haxor Post author

    Did you try to write an alert() in your external js file to check if it is working? Also your external js-file must be linked in the HTML head after the basic jQuery library and the Unslider library…

Leave a Reply

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