Web International Awards

payday loan

2

MAR 2010 20

Make your own jQuery slider using XML

Slider screenshot

Just a few days ago I had to build a slideshow on a website I developed. However, I couldn't find a proper slider that would work exactly as I wanted it to. The end result was that I coded a custom slider, and I am sharing the process with you. By the end of this article you'll be able to create a jQuery powered slider that uses XML to store information.

Why XML

I used XML because not all slides needed for the website contained vital information. Only the first slide contained critical information. I used XML because it allowed me to keep a clear and short source code that search engines would definitely like.

Progressive enhancement?

If javascript were turned off then the slider wouldn't work and it wouldn't load any content from the XML. The slider's canvas would be left blank. To fix this issue the first slide of the presentation is also included inside the html source of the site and is replaced via javascript, if available.

Slider description

I needed the slideshow to be dynamic — support variable number of slides. I also wanted the slider to have numeric controls and no thumbnails or any other gizmos. I also wanted to have all sorts of html tags inside the slides, not just images or movies. I also needed the slider to move forward on a given interval. And all these features were implemented, and you will be able to do the same by the end of this article.

HTML structure of the slider

1
2
3
4
5
6
<div class="splash">
	<div class="splash-content">
		This will hold the content in place, be it one image or a lot of HTML
	</div>
	<div class="splash-controls">&nbsp;</div>
</div>

The main .splash div will hold both content and slider's controls in place. The .splash-content div will wrap the actual content of the slider. The reason I used class attributes instead of id attributes is because I wanted to be able to insert multiple sliders inside the same page. But if I have multiple sliders, I need to make sure that each of them has unique content and that controls do not interfere from one to another. To do that, I added unique IDs to the outer splash div.

1
2
3
4
5
6
<div class="splash" id="unique_id_here">
	<div class="splash-content">
		This will hold the content in place, be it one image or a lot of HTML
	</div>
	<div class="splash-controls">&nbsp;</div>
</div>

Basic styling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.splash-controls
{ 
display:block; 
height:2em; 
margin:0 auto; 
margin-top:1em; 
}
.splash-controls a
{ display:block; 
width:2em; 
height:2em; 
color:green; 
background:rgb(51,51,51); /* Internet Explorer fallback color */      
background:rgba(51,51,51,0.1);
text-align:center; 
line-height:2em; 
float:left; 
margin-right:0.5em; 
text-decoration:none; 
border-radius:1em;
-moz-border-radius:1em;
-webkit-border-radius: 1em;
}
.splash-controls a.selected	
{ 
color:#FFF;
}

The reason why I didn't provide any styling to the outer div or the content wrapper is because I want it to take the shape, size and styling of the content loaded from the XML. If there's some HTML, applying some style here may get crippled because of the content loaded. With the above CSS rules, the controls will show up as circles in modern browsers. If you want this feature in all browsers, perhaps you should use some background images instead of rounded corners and RGBA.

XML structure

<?xml version="1.0" encoding="utf-8"?>
<slideshow>

<slide>
	<content>
		<![CDATA[
	images, youtube videos, plain html, anything you like
		]]>
	</content>
</slide>
<slide>
	<content>
		<![CDATA[
	images, youtube videos, plain html, anything you like
		]]>
	</content>
</slide>

</slideshow>

The CDATA inside the content tag is there because otherwise HTML wouldn't be requested correctly by the javascript we are about to indulge with. With that said, let's move on to some jQuery.

Adding jQuery functionality

A neat way to have multiple sliders on the same page and throughout the site would be to use a plugin or a function that can handle the task. I chose the later and constructed a function that takes as arguments the ID of the slider and the XML filepath. The ID is nothing else but the id attribute we assign to each slider.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function AwesomeSlider(selector,xml)
{
 
	// slider
	var items = 0;
	var content = new Array(10);
	var control = '';
	var count = 1;
 
	$.get(xml, function(data)
	{ // get contents from xml
 
		$(data).find('slide').each(function()
		{
			// populate array
			items++;
			var $slide = $(this); 
			content[items] = $slide.find('content').text();
			// create controls
			if(items==1) control = control + '<a href="#" class="selected" rel="'+items+'">'+items+'</a>';
			else control = control + '<a href="#" rel="'+items+'">'+items+'</a>';
		});
 
		$(selector+' .splash-content').html(content[count]);
 
		// add controls
 
		$(selector+' .splash-controls').html(control);
	});
 
	// control is clicked
	$(selector+' .splash-controls a').live('click',function (){
		var slideID = $(this).attr('rel');
		count = Slide2Next(selector,count,content,items,slideID);
		return false;
	});
}

items variable will hold the total number of slides our slider contains. The content array, initialized to a size of 10 objects will contain the content of each slide. We only read the XML once, not every time someone clicks a control to move to next slide or when the timer says so. control variable is in fact a string containing HTML source being built to hold the slider controls. The count variable will hold current slide's number.

By using the $.get request we get all the contents of the XML file, then loop through each slide to get it's content and construct the slider's controls. The if on line 20 checks if we're currently on the first slide, and if so adds a selected class to the current anchor tag — for styling purposes.

Once we've looped through all slides and gotten their content, we set the content from the first slide into the HTML (line 24) and insert the controls into the HTML as well (line 28). As controls are added inside the DOM after page is loaded, simply binding them with jQuery's .click() event handler will not work. Instead we use the .live() handler.

Once someone clicks a control, we need to get the ID of the slide they wish to move to. That ID is stored in the control anchor's rel attribute. Once we have the ID, we then move to next slide (line 34) and prevent default behavior for links by using the return false; on line 35.

Strangely, the function we just tried to call doesn't exist (the one on line 34), so we create it. The updated source looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
function AwesomeSlider(selector,xml)
{
 
	function Slide2Next(selector,count,content,items,slideID)
	{	
		if(slideID>0) count = slideID;
		else if(count<items) count++;
		else count = 1; // reached the last slide, get back to first
 
		$(selector+' .splash-content').animate({opacity:0},1000, function(){
			// faded out, changing content
			$(selector+ ' .splash-content').html(content[count]);
 
			// animating
			$(selector+' .splash-content').animate({height:'toggle'},1000, function(){
				// change style of controls
				$(selector+' .splash-controls a.selected').removeAttr("class");
				$(selector+' .splash-controls a[rel='+count+']').attr("class","selected");
				// fading back in
				$(selector+' .splash-content').animate({height: 'toggle'}, 1000, function(){
					$(selector+' .splash-content').animate({opacity:1},1000);
				});
			});
		});
                return count;
	}
 
	// slider
	var items = 0;
	var content = new Array(10);
	var control = '';
	var count = 1;
 
	$.get(xml, function(data)
	{ // get contents from xml
 
		$(data).find('slide').each(function()
		{
			// populate array
			items++;
			var $slide = $(this); 
			content[items] = $slide.find('content').text();
			// create controls
			if(items==1) control = control + '<a href="#" class="selected" rel="'+items+'">'+items+'</a>';
			else control = control + '<a href="#" rel="'+items+'">'+items+'</a>';
		});
 
		$(selector+' .splash-content').html(content[count]);
 
		// add controls
 
		$(selector+' .splash-controls').html(control);
	});
 
	// control is clicked
	$(selector+' .splash-controls a').live('click',function (){
		var slideID = $(this).attr('rel');
		count = Slide2Next(selector,count,content,items,slideID);
		return false;
	});
}

The Slide2Next function also works if the slideID is not provided, or null. We need this for the upcoming feature — moving to next slide after a set delay. The if statement on the 6th line checks if slideID is provided. If provided, count variable will now hold the ID of the slide the user wants to move to. If not, the count variable will be incremented by one, if not on the last slide. If slider's on the last slide, count variable will be reset to 1 — the first slide.

We then fade out current slide (line 10), we then set new content according to required slide ID (line 12), then toggle the height of the content div inside the HTML (line 15). We change the state of controls on lines 17 and 18 and on lines 20 and 21 we toggle the height back and then fade in the content.

But I still didn't add the timer to the slider which is actually quite easy. We add three new lines at the end of the main function inside the .click() event handler and just after it. The final source looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
function AwesomeSlider(selector,xml)
{
 
	function Slide2Next(selector,count,content,items,slideID)
	{	
		if(slideID>0) count = slideID;
		else if(count<items) count++;
		else count = 1; // reached the last slide, get back to first
 
		$(selector+' .splash-content').animate({opacity:0},1000, function(){
			// faded out, changing content
			$(selector+ ' .splash-content').html(content[count]);
 
			// animating
			$(selector+' .splash-content').animate({height:'toggle'},1000, function(){
				// change style of controls
				$(selector+' .splash-controls a.selected').removeAttr("class");
				$(selector+' .splash-controls a[rel='+count+']').attr("class","selected");
				// fading back in
				$(selector+' .splash-content').animate({height: 'toggle'}, 1000, function(){
					$(selector+' .splash-content').animate({opacity:1},1000);
				});
			});
		});
                return count;
	}
 
	// slider
	var items = 0;
	var content = new Array(10);
	var control = '';
	var count = 1;
 
	$.get(xml, function(data)
	{ // get contents from xml
 
		$(data).find('slide').each(function()
		{
			// populate array
			items++;
			var $slide = $(this); 
			content[items] = $slide.find('content').text();
			// create controls
			if(items==1) control = control + '<a href="#" class="selected" rel="'+items+'">'+items+'</a>';
			else control = control + '<a href="#" rel="'+items+'">'+items+'</a>';
		});
 
		$(selector+' .splash-content').html(content[count]);
 
		// add controls
 
		$(selector+' .splash-controls').html(control);
	});
 
	// control is clicked
	$(selector+' .splash-controls a').live('click',function (){
		var slideID = $(this).attr('rel');
		count = Slide2Next(selector,count,content,items,slideID);
		clearInterval(slideInterval);
		slideInterval = setInterval(function(){ count = Slide2Next(selector,count,content)}, 10000 );
		return false;
	});
 
 	var slideInterval = setInterval(function(){ count = Slide2Next(selector,count,content)}, 10000 );
}

On line 63 we set the Slide2Next function be called every 10 seconds. On line 58 and 59, we reset the interval back to 10 seconds after the user has clicked a control. We don't want bad functionality such as the following: User comes to site; user clicks a slider control after 9 seconds; new slide is loaded then faded out because due to the timer that calls for the next slide 1 second later.

To create the actual functionality for this slider, add the HTML, create the XML, load the jQuery script above then set the slider by adding into your javascript document the following command (it should be on document load): AwesomeSlider('#unique_id_here','path_to_your_xml_file.xml');

Demos

You can check out live versions of this slider on Evenimente by Niki website's homepage and soon on the new version of our web agency's website.

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

Published on Tuesday, March 2nd, 2010 at 7:14 pm in tutorials.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
 
  1. Shrikant says: March 3rd, 2010 at 3:13 pm

    Hi I’m trying to implement the above given code but it’s not working. It will be really better if you incorporate a working example / demo version which could be downloaded.

  2. Bogdan Pop says: March 3rd, 2010 at 3:48 pm

    Hi Shrikant,

    Thanks for your comment.

    All you need for this to work is link jquery in your html file, then link a file that contains the AwesomeSlider function, and perhaps add a classic behaviour in jQuery that would run on document load that would contain calls for the AwesomeSlider. That and the XML file.

    Anyways, if you still cannot figure it out, check for future updates because a demo version and source code download is in the works and should be released in just a couple of days.

  3. michael says: March 4th, 2010 at 7:34 am

    It is missing a function call inside the setInterval. It thinks the first variable is a function name, so replace the last bit of the javascript function with this code which includes a function call.

    (note i have replaced $ with jQuery because i am using no conflict mode.)

    //control is clicked
    $(selector+’ .splash-controls a’).live(‘click’,function ()
    {
    var slideID = jQuery(this).attr(‘rel’);
    Slide2Next(selector,count,content,items,slideID);
    clearInterval(slideInterval);
    slideInterval = setInterval(function () { Slide2Next(selector,count,content); }, 10000 );
    return false;
    });
    var slideInterval = setInterval(function () { Slide2Next(selector,count,content); }, 10000 );

  4. Bogdan Pop says: March 4th, 2010 at 9:24 am

    Hi Michael, thanks for your comment and for the heads up.

  5. Bogdan Pop says: March 4th, 2010 at 5:05 pm

    @Shrikant

    As I said the other day, there’s a new post with a demo and source code download for this tutorial.

  6. Avangelist says: March 4th, 2010 at 11:33 pm

    I am struggling to see why you use an XML file?

    I know you said it was to streamline your markup, but look at how much work you have caused yourself with your js file?

    The offset doesn’t add up. I guess in a production environment, perhaps it would be clearer the overheads reduced by using an XML feed. But what is likely to create this feed? If it’s coming form a database, well you would be foolish to not run it through a server-side query which would provide stronger validation.

    If it is from a feed of some kind, I guess I could see the validity, but then again you’d be more likely to be sourcing a feed direct.

    Is the XML an example of how you could take data from a feed?

    Perhaps I am reading into it a little too much.

  7. Bogdan Pop says: March 5th, 2010 at 12:19 am

    @Avangelist
    Thanks for taking the time to comment. Really appreciate the effort. And now the reply…

    I used XML because:
    1. The HTML code would be reduced. If the slides were inside the HTML, the size of the file would have got large and optimized content would have been pushed down below. I used XML to make sure that optimized content would be as high in the source code as possible.

    At first view it wouldn’t be that much, but this slider was developed to be used in a portfolio section, and there’s a lot of projects and screens.

    2. Indeed there’s more to code by using XML to store data, but this comes with benefits, as the number of mysql requests is minimized. In fact, the site doesn’t even use a mysql database.

    3. Most sliders out there use inline content, hiding it then revealing it, and this one is different.

  8. Tutorijali HDonWEB says: March 10th, 2010 at 12:08 am

    Nice tutorial. bookmarked

  9. Bogdan Pop says: March 10th, 2010 at 12:32 pm

    Thanks!

    There’s a demo and source codes available for download.

    http://www.webia.info/articles/tutorials/awesome-slider-demo-and-source-codes/

  10. Hoxxy says: March 10th, 2010 at 3:16 pm

    I’ve been thinking of learning xml a little so maybe I might start with this. Thanks for the great post.

  11. Gabe says: March 11th, 2010 at 6:29 pm

    I like everything except the way the whole thing moves up and down between slides. I find that distracting, especially if there is other content on the page that all moves up and down every time a slide changes. A simple fade would be more elegant, in my opinion.

    I see where the up/down animation is in the jQuery code, but not sure exactly what to remove to disable the height toggle, but leave the fade and control button update intact. Could you explain that? Thanks!

  12. Bogdan Pop says: March 11th, 2010 at 8:01 pm

    Hi Gabe and thank for your comment. You do have a point and I do agree with you. Unfortunately, I chose to do the toggle effect too because in the first site I implemented the slider the content of each slide had different heights, and then a simple fade out and fade in would have been too rough.

    I am planning to enhance this slider and release it as a plugin though, so any feedback you may have is appreciated!

    And to respond to your issues on the coding, there are two lines of code which contain the following:

    {height:’toggle’},1000,

    Just replace 1000 with 0 and the toggle effect will be gone. It is not the best way to do it, definitely not by the rules, but it will do the job.

  13. Enhancing UI with scrolling events – good or bad? says: March 16th, 2010 at 12:42 pm

    […] 1. Make your own jQuery slider using XML […]

  14. Impressive web forms. From coding to validation! says: March 23rd, 2010 at 7:38 pm

    […] in our contact and request quote forms from our newly released web development website, just as the jQuery slider tutorial published a few weeks ago was used in our portfolio […]

  15. Awesome Slider v1.0 says: April 22nd, 2010 at 2:01 pm

    […] a few weeks back I published an awesome tutorial on building a custom jQuery slider that uses XML to store data. The tutorial got really popular, therefor shortly after I published a rough demo and source codes […]

  16. Mark says: April 3rd, 2011 at 12:31 pm

    Great plugin, a clean code is just what i needed. There seems to be just 1 hickup. When initiated continues is set to ‘true’ the page it’s on slides up when scrolled down.
    Do you have a sollution for this? I’ve tried the heighttoggle set to false and 0 but it has no effect.

  17. Mark says: April 3rd, 2011 at 4:30 pm

    Like in an earlier post, it bothers me that when the image toggles up and down the content below is also going up and down.

    You gave the solution by telling to set height/toggle to ‘0’. I agree with you that when you do so, the content won’t “scroll up and down” anymore.

    But what I see happening now is that when I’m scrolled to the bottom of my page and the image is changing the page bumps up. Have any idea’s on how to set this one straight?

    I’ve looked in the scripts, even pulled jquery to the test but nothing seems to work this one out.

    Further this plugin seems to be a great asset for those who like a clean code.

  18. Bogdan Pop says: April 4th, 2011 at 8:59 am

    Hi Mark,

    if the content in the slider has the same height, you can put the slider inside a box of your own (a div or something) and set its height via css. The resizing will happen only inside the div and external content won’t be pushed up and down when the slider is changing content.

  19. Coding a simple slider in no time says: May 10th, 2011 at 5:08 pm

    […] published a couple of articles on sliders in the past. We first had a tutorial on building a XML powered slider, then we released the source codes and demo for the xml slider and we finally released the latest […]

  20. Carnk says: April 4th, 2014 at 9:22 pm

    I love this! Thanks for sharing!
    Is there anyway to add navigation buttons on the left and right sides of the slider? Perhaps on the hover effect?





Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.


If you do not have a username, you can register in just a few clicks.