ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Really simple jQuery slider

Updated on June 7, 2013
jQuery logo. Credit: jQuery.com
jQuery logo. Credit: jQuery.com

I was working on a website in the last couple of days for a client, I wanted to implement a slider, I just wanted a simple slider not all fancy and obviously not hard coded. Every slider I found on the internet was either fancy or a plugin (a bit complex codes) therefore I didn't and couldn't use any of them what I did was use my limited knowledge to code a simple jQuery slider with no auto-scrolling feature just a simple previous and next navigation was enough for me. I know it is useless for most of the people who are reading this but it's worth a try. So what I did was simply create a list in HTML with the contents.

HTML Markup

<ul>
<li><a class="prev"></a><img src="img/slide1.jpg"><a class="next"></a></li>
<li><a class="prev"></a><img src="img/slide2.jpg"><a class="next"></a></li>
<li><a class="prev"></a><img src="img/slide3.jpg"><a class="next"></a></li>
</ul>

What I did was I removed the list style and floated all the li's to the left, defined a width for <ul> since all the images will be the same size and I set the overflow to hidden because we don't want the rest of the contents to appear unless we want them to. The CSS Code for this is below.

CSS Code:

ul {
width: 260px;
height: 232px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
ul li {
text-align:center;
list-style: none;
float:left;
margin-left: auto;
margin-right: auto;
}

margin-left: auto; and margin-right:auto; simply move the list to the center of the screen. Now let's go to jQuery. The jQuery code I've written is pretty easy and understandable. I'll also explain the whole code.

jQuery Code

$(document).ready(function() {
$('.prev').click(function() {
if ($(this).parent().prev().length === 0 ) {
$(this).parent().parent().children('li').each(function() {
$(this).fadeToggle('slow');
});
$(this).parent().siblings(':last').fadeToggle('slow');
} else {
$(this).parent().prev().fadeToggle('slow');
}
});

$('.next').click(function() {
$(this).parent().fadeToggle('slow');
if($(this).parent().next().length === 0 ) {
$(this).parent().parent().children('li').each(function() {
$(this).fadeToggle('slow');
});
}
});
});

Explanation

As you all know the $(document).ready() function waits for the document to load to run the codes in it. When the link for previous content is clicked it checks for the previous content if there is none it loads the last content. if ($(this).parent().prev().length === 0 ) { checks the availability of previous content, if there is none then:

$(this).parent().parent().children('li').each(function() {
$(this).fadeToggle('slow');
});

The above code is run which fades all the contents to make them invisible and then

$(this).parent().siblings(':last').fadeToggle('slow');

The above code is run which makes the last content visible. If there is a previous content then:

$(this).parent().prev().fadeToggle('slow');

The above code is run which makes the previous content visible due to which current content will be pushed to right or down thus making it invisible. Now let's focus on the next function, if we click on the next button, what it does first is it fades the current content due to which next content will be pushed to the left or up making it visible. The code:

$(this).parent().fadeToggle('slow');

And then the code to check for next content is run:

if($(this).parent().next().length === 0 ) {

It checks if there's any next content, if there's no next content then:

$(this).parent().parent().children('li').each(function() {
$(this).fadeToggle('slow');
});

The above code is run which makes all the contents visible therefore the slider will go back to the first content.

It is a really simple slider it can be improved to make it more interactive and user friendly, but as I said I just wanted a simple slider without any fancy features and definitely not hard coded.

Hope you liked it.

Thanks.

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      Michael Brunswick 4 years ago

      Thank you for sharing. Simplicity is sometimes underrated.

      I found http://imageslidermaker.com which generates simple code output, similar to above. Loaded with a default set of high quality images - I've found ideal for generic or corporate websites.

    • sharingknowledge profile image

      SHAR NOR 4 years ago from Miami, FL

      True, this is really simple but a great one. In this world, what I came to know is that simp0le things sometimes do have better effects that those which are taken to be more than simple. Thanks f9or sharing.