Create a Slick and Accessible Slideshow Using jQuery

May 18th, 2009 by Jacob Gube | 147 Comments | Stumble It! Delicious

Accessible Slideshow.

In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.

Final Result

Clicking on the image below will take out to a live demonstration of the slideshow widget in action.

Final Result.

Download source files

You can download the source files for this tutorial to study. Along with the entire jQuery script used in this tutorial, the source file package also contains a PSD file named mockup-slideshow.psd for the web layout of the demonstration page, as well as the CSS background images and additional auxiliary files used to create the slideshow.

Setting the foundations

The most important part of any good web component is a solid HTML structure. A semantic foundation means that your content will be web accessible in virtually all browser clients.

Our content’s structure involves a div called #slideshow that serves as the container for our slideshow. Nested inside it is another div called #slideContainer that holds the slides, which are divs with a class set to .slide.

Block 1: HTML markup

<!-- Slideshow HTML -->
<div id="slideshow">
  <div id="slidesContainer">
    <div class="slide">
      <!-- Content for slide 1 goes here -->
    </div>
    <div class="slide">
      <!-- Content for slide 2 goes here. -->
    </div>
    <div class="slide">
      <!-- Content for slide 3 goes here. -->
    </div>
    <div class="slide">
      <!-- Content for slide 4 goes here. -->
    </div>
  </div>
</div>
<!-- Slideshow HTML -->

In example 1 below, you’ll see how text-based browsers, and browsers incapable of rendering CSS and JavaScript, will see our slideshow. It’s important to note that all of our content is easily accessible; we’ve hidden nothing from the user – ensuring that everyone will have the ability to view our content.

There is also no markup for the left and right arrow controls, which we will insert into the DOM later on using JavaScript. Having them in the content structure level would be confusing to individuals without CSS or JavaScript capabilities.

Example 1: HTML content structure of the slideshow

Tip: Test web accessibility first, and often. When working on anything new, you should always test your HTML structure for accessibility. You can use a free web application called WebAnywhere for screen reader web accessibility tests to simulate how a person using a screen reader will interact with your content.

Styling the slideshow

The next step to a strong design is having a good set of styles that consider the possibility that the user has JavaScript disabled.

For #slidesContainer, we set the overflow property to auto so that scroll bars appear when our content overflows over the set height of 263px (the height of our slides).

Block 2: #slidesContainer CSS

#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}

We have to reduce the width of the .slide div class by 20px to accommodate the right hand scroll bar that will appear when JavaScript is turned off.

Block 3: .slide class CSS

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
  height:263px;
}

Without JavaScript, our content is still accessible; users can scroll up and down using to view our slides.

Example 2: Slideshow without JavaScript

Alternatively, you can give the .slide style rule a float:left; property so that instead of scrolling vertically, users can scroll horizontally.

Left and right arrow CSS

To save some JavaScript rendering resources, we’ll declare style rules for the left and arrow controls that we will insert in the DOM via jQuery.

The elements will be <span> elements, so we declare a cursor property and assign it the value of pointer to change the mouse pointer when the user hovers over the controls. We use the text-indent property to hide the text out of sight, a CSS background image replacement method.

Block 4: Controls

/**
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
}

The best part… JavaScript

With our HTML and CSS in place, it’s time for the fun stuff. We’ll use the jQuery library to make our slideshow more interactive and animated.

The theory

The first thing we want to do is ‘undo’ the styles that we declared in CSS that deals with the JavaScript off scenario. This involves declaring CSS styles in JavaScript for #slidesContainer to remove its scroll bar. Additionally, we have to resize our .slide divs to 560px, which we reduced by 20px in to accommodate the scroll bar. We also want to float the divs to the left so that they are displayed side by side horizontally instead of stacked on top of each other vertically.

Then, by DOM manipulation, we insert a div called #slideInner that wraps around all of our slides that has a width equal to the total width of all the .slide div.

Finally, we insert left and right controls (with class names of .control) for user navigation; we do this in JavaScript so that browser clients that don’t have JavaScript enabled won’t see the controls.

Here’s the JavaScript code in its entirety for you to study, but we’ll go through it in detail afterwards.

Block 5: The entire jQuery script

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
  .wrapAll('<div id="slideInner"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert left and right arrow controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;

      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });

  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
  });

Creating some objects

First we initiate some variables at the top of the script that we’ll use throughout the script.

currentPosition will be a number that contains the current position of the slideshow. slideWidth is the width of each .slide div, which is fixed at 560px. I chose to declare an object for the $('.slide') selector to make our code look a bit cleaner, but you can skip this and instead use the full selector ($('.slide')) in your syntax.

Finally, we determine the number of slides in our slideshow using the .length method.

Block 6: Variables and constants

var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;

Removing the scroll bar

If our script runs, then our user has JavaScript enabled – so we’ll remove the scroll bar by setting the overflow property of slidesContainer to ‘hidden‘ and this will supersede the overflow:auto declaration in our CSS (see Block 3).

Block 7: Changing CSS overflow property value to hidden

$('#slidesContainer').css('overflow', 'hidden');

Inserting a div in the DOM

We’ll use the margin property to move our slides left and right (more on this later). To do so, we need to create a div that wraps around all of our .slide divs, set to the same width as the total width of all our slides. By adjusting this div’s margin property (later on), we will create the effect of it moving left and right.

Block 8: Inserting #slideInner into the DOM using the .wrapAll() method

slides
  .wrapAll('<div  id="slideInner"></div>')

We also need to set the width of #slideInner, the newly created div, to the total width of all .slide divs.

Block 9: Inserting #slideInner into the DOM using the .wrapAll() method

$('#slideInner').css('width', slideWidth * numberOfSlides);

Styling the Slideshow slides in JavaScript

With JavaScript enabled, we want to float the slides to the left so that they display side by side. We also want to set them to a width of 560px since we won’t have the scroll bar anymore.

We can chain the .css method along with the .wrapAll() method we used in Block 8.

Block 10: Giving .slide divs overflow:hidden CSS property

slides
  .css('overflow', 'hidden')
  .wrapAll('<div  id="slideInner"></div>')

Inserting the controls in the DOM

We insert the controls by manipulating the DOM; this way, users using JavaScript-disabled browsers and screen readers won’t have an invalid HTML structure with controls that take them nowhere which would be confusing because clicking on them would not work without JavaScript.

We do this using the .prepend() and .append() method which inserts an HTML string inside the selected object/s (in this case, the #slideshow div is selected). The text inside the span elements don’t matter because they were hidden

Block 11: Inserting the controls in the DOM

$('#slideshow')
  .prepend('<span class="control" id="leftControl">Moves left</span>')
  .append('<span class="control" id="rightControl">Moves right</span>');

Managing the left and right arrow controls with a function

To manage our controls, we create a function called manageControls that hides and shows the left and right arrow controls based on the current position of the slideshow.

If it’s on the first slide, we hide the left control because there is no preceding slide. On the last slide, we hide the right control because the user has reached the end of the slideshow. We do this by using the .hide() and .show() jQuery methods that hides/shows the selected DOM element/s that precedes it.

Block 12: the manageControls() function

function  manageControls(position){
  // position==0 is first slide
  if(position==0)  { $('#leftControl').hide(); }
  else { $('#leftControl').show(); }
    // numberOfSlides-1 is last slides
  if(position==numberOfSlides-1) {  $('#rightControl').hide(); }
  else { $('#rightControl').show(); }
}      

Call manageControls() on DOM ready

When our first script loads, we should call the manageControls() function once to hide the left arrow control. Calling it is easy, we just pass the currentPosition argument into it which should be 0 initially.

Block 13: calling manageControls() on script load (domready event)

manageControls(currentPosition);

Binding click events to the controls

The final step to the jQuery slideshow script is binding events to the left and right controls. This essentially creates "event listeners" that triggers functions when the user clicks on either the left or right arrow controls.

Block 14: Binding a click event listener to .control class

$('.control').bind('click',  function(){
  // do something when user clicks
});

Updating the value of currentPosition

When the user clicks on a control, we update the value of the currentPosition variable: if the user clicks on the right arrow control (with the ID of #rightControl) then we add one to our currentPosition; if the user clicks on the left arrow control (with the ID of #lefControl), then we subtract 1 from currentPosition. What you see below is called a ternary operator, which is shorthand for if/else control structures.

Block 15: Ternary operator to set new value of currentPosition

currentPosition = ($(this).attr('id')=='rightControl')
                  ?  currentPosition+1 : currentPosition-1;

Calling manageControls() after updating currentPosition

After we’ve adjusted the value of currentPosition, we call manageControls() again to hide or show our controls based on our new slide position.

Block 16: Calling manageControls() inside .bind method

manageControls(currentPosition);

Animating the slides

Finally, we move #slideInner to the left or right by animating it’s margin-left CSS property value. The left margin is the negative of the width of our slides multiplied by our current position. For example, if we’re moving to Slide 3, then our left margin is equal to -1120px.

Block 17: Using .animate method to transition margin-left CSS property

$('#slideInner').animate({
  'marginLeft' : slideWidth*(-currentPosition)
});

In summary

In this tutorial, we created a simple slideshow script using solid HTML, CSS, and JavaScript (jQuery). We applied the concept of Progressive Enhancement to ensure that our slideshow widget works without CSS and without JavaScript, making our script web accessible in most browsing scenarios.

Feedback? Questions?

What did you think about this tutorial? Was it helpful? Were you confused at any point? Did you spot errors or points of improvement? Please share your thoughts in the comments so that we can improve tutorials here on Six Revisions. Additionally, if you have questions, we’d love to help – so don’t be shy!

Related content

147 Comments

surreal

May 18th, 2009

I learned quite a bit and it was an easy to follow and precise tutorial so thank you guys.

Still, I have a question regarding the files and the PSD you released. Now, judging by the fact you made all the files (including the PSD) available for download I can assume we are free to use them as we see fit?

Is there any kind of restriction when it comes to individual files, both code and graphics? Is a link back required?

Marco

May 18th, 2009

Nice one Jacob, very detailed tut.

You should remove the “blue outline” of the images in the demo – they don’t look very professional.

a img { border:0 }

Keep up the great work!

Brandon

May 18th, 2009

Very nice looking and it works well, especially the way the arrows disappear when you are at the beginning or the end. My only suggestion would be to use hash navigation so that users can bookmark/share a specific slide from the slideshow.

Tyler

May 18th, 2009

I was actually going to do something similar to do as a websites header for a website I’m working on, so this has been a very good knock in the right direction, thanks :)

Jacob Gube

May 18th, 2009

@surreal: No, feel free to use them. The graphics and brushes I used in the PSD file are all released here on Six Revisions free for commercial and personal use, under the Creative Commons license. Now, CC license wants you to attribute it with a link based on the creator’s requirements, but my requirement is: “You don’t have to attribute it to me if you don’t want to, although I’d be glad if you did”.

@Marco: I should have listened to you on Twitter when you said coding in the morning isn’t a good idea! I wanted it to have a 2-pixel light gray border, not a blue border; oversight on my behalf, I tested it with the links visited, so it looked gray to me.

@Brandon: Great suggestion, hash URL’s are pretty common on these slideshows.

@Tyler: I’m glad you recognized my intent here – this isn’t meant to be a plug-and-play solution (jQuery plugin), it’s meant for you to read through and understand what’s going on so that you can adapt it into your own uses.

BillyG

May 18th, 2009

My first thought from “accessible” was that the keyboard was going to be used also, but it’s still nice for the mouse clickers.

Marco

May 18th, 2009

Haha, “told you so” :P .

Anyway, it looks pretty sleek now; Well done!

Jacob Gube

May 18th, 2009

@BillyG: Accessible in that people who use assistive technologies like screen readers can still read the entire page’s content, even though the slides only appear on screen one at a time.

This script wouldn’t be hard to modify to include keypress navigation though, you can add a document.bind('keypress', function(){}) to listen to the keys you want to use (such as A or D for left and right). I’ll write a jQuery tutorial that involves keypress navigation if that’s something you folks want to see.

Albert Pak

May 18th, 2009

Sweet tutorial, going to give it a try :) Thank you :)

fred

May 18th, 2009

Jacob,

Excellent, thorough article! Very useful information. I especially loved that you took time to break down the code and explain it all.

Kayla

May 18th, 2009

This is just what I needed for one of my sites! I was trying to implement this, got half-way there, and ran into problems I can’t seem to fix. Thanks for the tutorial. :)

Stephane

May 18th, 2009

Nice tutorial, easy to follow and well explained. thanks! :)

Joe McCann

May 18th, 2009

Nice tut, but careful of the word “accessible” as this tut fits under the “gracefully degrading” form of a slideshow. If you want to make it truly accessible, you need to add the proper ARIA attributes and make it keyboard navigable. I have done this and will be demo-ing it the AJAX Experience this year when I give my talk.

“Accessible in that people who use assistive technologies like screen readers can still read the entire page’s content, even though the slides only appear on screen one at a time.”

This is true, but changes to the DOM are not picked up by most assistive technologies like screen readers UNLESS you implement the WAI-ARIA spec. I am writing a blog post now with a working demo so I hope to have it up soon so you can see what I mean.

Kawsar Ali

May 18th, 2009

I really Like it Jacob.It could be used as content slider too. very detailed post. Maybe a wordpress plugin ?

Jacob Gube

May 18th, 2009

@Joe McCann: Looking forward to see the demo so I can better understand the issue.

“This is true, but changes to the DOM are not picked up by most assistive technologies like screen readers UNLESS you implement the WAI-ARIA spec.”

So you’re saying that an application is not accessible if it doesn’t comply to WAI-ARIA spec? I think the ultimate test of accessibility is whether it can be used by people with disabilities, not a set of rules and regulations. Have you tested this particular slideshow using a screen reader? Because I have.

Marie Poulin

May 18th, 2009

Is there an auto-slide function? i.e. after 2 seconds, the screen slides to the next one automatically?

Dicky

May 18th, 2009

Hi, i have another similar tutorial on creating content-slider using jQuery+jFlow, a minimalist plugin. It is much more easier. http://www.webdesignbooth.com/step-by-step-to-create-content-slider-using-jflow-a-minimalist-jquery-plugin/

Roberto

May 19th, 2009

Yes, autoslide after a couple of seconds. Also interested in that. How about Jacob? Can it be done?

Thanks!

Jacob Gube

May 19th, 2009

@Marie Poulin and @Roberto: This script wasn’t written for an auto-slide feature; we could re-write it, but something like that would be better off as a plugin.

Here’s what I’d like to do: how about ya’ll list down the features and options you’d like this slideshow to have, and if I get enough interest, I’ll write a jQuery plugin (or if there are any developers who’d like to work with me on that, shoot me an email).

We already have two (1 from Marie and Roberto, and 1 from me):
1. Auto-sliding feature
2. Different design themes (including the one featured about)

Ericramz

May 19th, 2009

How about while using the auto sliding feature, having the left,right controls hidden, then when hovering over the slide, you get the controls overlayed on the image, kinda like “lightbox”

Becka11y

May 19th, 2009

The tutorial itself is nice. However, I don’t see how you can claim this as accessible without keyboard or low vision support. I tried this with JAWS screen reader and it really isn’t very usable. Yes, I can browse the content in virtual cursor mode but I can’t easily go back and forth in the content because the arrows are not keyboard accessible. This also makes it pretty unusable for a keyboard only user – they can tab through the links but that doesn’t create a very slideshow type experience. And, if a low vision user wants to use this in Windows high contrast mode, they can’t see the arrows. Great start but it needs more work to be truly accessible.

Jason Garvey

May 19th, 2009

awesome, thanks.

Yes, auto slider would really complete it.

Jason

Ian

May 19th, 2009

Nice tute! It’s refreshing to see a JQuery-based walkthrough that doesn’t get all carried away and try to build a kitchen sink in Javascript just because we can.

Of course if you wanted to be fully semantic, seems to me the slides would make the most sense as an ordered list… :P

Still, nice technique with nice fundamentals.

Blue Blots

May 19th, 2009

Nice tutorial. i might try it on my spare time :)

Fabio

May 19th, 2009

great slideshow!..for the features, i’d really like to have in the final slide the “next” button pointing way back to the first slide.
great job!

Jake

May 19th, 2009

Nice Tutorial!

fyi, there’s an extra single quotation at the last slide.

Jacob Gube

May 19th, 2009

@Jake: Do you mean an extra single quotation on the title, ‘Tis the end my friend? If that’s what you’re referring to, that was intentional.

Excess

May 20th, 2009

AWESOME slider. GREAT work. MANY thanks.

Couple suggestions for you to think about when bored:

1).- Instead of the right arrow dissapearing on the last slide, make it change into a “go back to start” button, kind of an arrow rolling over itself? Standard is all slides roll left until it hits the first one.
An alternative could be infinite scrolling (if possible, never seen it yet, you could be the first one), but for that to be useful you may need some kind of visual representation on which slide are you. But that’s suggestion number 2…

2).- Tell the viewer how many slides are they, and which are they viewing. Sort of “1/4, 2/4″ or maybe something more minimalistic and visual, like ” · [·] · · “.

3).- Keyboard navigation. Yeah, I know they said it already, but I guess its easier to just add it than discussing whats “accessible” and whats not.

Did I already told you that I love the whole “Progressive Enhancement” thing? I haven’t? Oh, well, never mind. Next time maybe.

PS: If anyone is knd enough to make this into a Wordpress plugin, I would very much appreciate that he shares it with us.

Gobias

May 20th, 2009

Very nice indeed!
Im new to JQuery and this really showed me what can be done. Thx for the inspiration!

Keep it up!

maximum7

May 20th, 2009

first example not work

einwebdesigner

May 20th, 2009

Do you think its possible to create something like an “carrousel”? So that it will restart at the beginning when you are at the end? (if position is last slide)

EricB

May 20th, 2009

ei Jacob, this is a very cool tutorial and useful for web based presentations & portfolios! Good job on this!

Jacob Gube

May 20th, 2009

@einwebdesigner: It’s possible to do that. Yes, but not without tweaking the code a bit. I can see this working using the following logic:
1) Get to the last last slide
2) Clone first slide to go below of last slide
3) Remove first slide from the DOM

And keep doing that whenever you hit the “last” slide. There may be a better logic to do this though.

JohnW

May 20th, 2009

Great tutorial! One question though. Is there any way multiple instances can be used on the same page?

einwebdesigner

May 20th, 2009

Seems to be logical ;)
I will try something like that tomorrow. But so far:
Really Nice Tutorial. Do you think I have to lear JavaScript first before I start learn JQuery?

Vivekanand

May 20th, 2009

Hi Jacob,

As you are saying Accessible Slide Show, does it complies on Accessibility and Usability. Since when I navigate through keyboard without using mouse, the slideshow is not working properly. Could you please develop one slideshow which is compatible for Accessibility Constraints… (I will be not using Mouse – should run similar to the one when I use mouse)

Jacob Gube

May 21st, 2009

I received some great comments from other sources (emails, Twitter) about the script so I will be trying to push out a plugin with improvements and options that people like; crossing my fingers I have some time for this.

Jacob Gube

May 21st, 2009

@Vivekanand: I chose to use span tags for the controls. For keyboard users, you could modify it so that it uses styled input type=”button” or even a hyperlink, a tags. That will make the controls, ‘tabbable’ to.

greg

May 21st, 2009

Nice tutorial, I guess you are getting a bit of blow back from the ‘accessibility’ purists. In the end you can’t always make everybody happy… but the tutorial does it’s primary job which is to describe the process of developing a fairly simple slideshow with some nominal accessibility features.

To be fair to you, I wonder if going deeper into the more nuanced elements of accessibility for the real devotees would have eroded you initial goal of creating a jumping off point for beginners or other developers to pick up their own work.

In the meantime, you should rest easy knowing you design looks nice, and if it doesn’t satisfy the ‘high contrast’ crowd then it probably does a better job for people with decent vision. If you capitulate to everyone you risk watering down the elements that make this design attractive. After all, uneven experiences are a hallmark of life on earth.

I don’t mean to offend anyone,
Cheers!

Matt McGuire

May 22nd, 2009

After making some minor changes to the script and css I was able to fit it into a project that I’m currently working on. It was used for the product highlights feature on this page.

http://www.priorlife.com/new_site-mmcguire/home.html

Thanks for taking the time to lay the groundwork, Jacob!

Roger

May 22nd, 2009

Excellent work. Like JohnW, I am also interested in having multiple, separate slideshows on a page. I tried but found it’ll take quite a bit of tweaking to make that happen.

Jacob Gube

May 23rd, 2009

@Roger and @JohnW: This was designed for one instance per page; I should’ve made it reusable by setting it up as a function that you can pass parameters to (i.e. slideshow ID) and instantiate. Something like that would be / should be a jQuery plugin. I didn’t design this as a reusable plug-and-play solution, but rather as a tutorial on jQuery. There seems to be a lot of desire for more options and obviously, instantiation, so that you can have a multiple of these going at the same time.

I’m working on it, but realistically, I won’t be able to finish it anytime soon. In the meantime, I can help with specific questions or review your own implementations to see why they are or aren’t working.

@Matt McGuire: Matt, you rock! “Groundwork”, that’s exactly what I intended to do with this tutorial; lay out the foundations and you guys can implement it ‘as-is’ or push it to the limits with your own tweaks. I liked how you showed more than 1 “slide” at a time. I understand that was a simple modification, just changing the math of currentPosition to do + and – 4, instead of 1?

Garf

May 23rd, 2009

Hi,

I used your tutorial and i have to say it’s an amazing tutorial. But for some reason the arrows do not appear, but the area they are supposed to be in does work. I even tried copying your img folder into mine so theirs little changes as possible but i can’t seem to fix this problem. Any help will be greatly appreciated.

http://www.mgarf.com/jessica/

fractalbrothers

May 23rd, 2009

I love the well commented code. Thanks a million, this gave me a lot of insight into jQuery.

Jan

May 23rd, 2009

“@einwebdesigner: It’s possible to do that. Yes, but not without tweaking the code a bit. I can see this working using the following logic:
1) Get to the last last slide
2) Clone first slide to go below of last slide
3) Remove first slide from the DOM”

How is this done? Can you provide a little snippet on how to do it? I am using a modified version of your script but can’t figure out how to do this part.

Thanks for making such a nice script btw! :) – Just what I needed for a current project. Just need to make this modification before it is perfect.

firdaus

May 23rd, 2009

I try to put this script on my Blog on Blogger. But, it didn’t works.. D’you know why is it?.. :)

John Kary

May 24th, 2009

Why use ’s as to contain your slides? You could give the slides better semantic context by putting this in a structure.

You require the user to add class=”slide” to each slide, which is kind of superfluous and leaves more possibility for developer error. If you used the structure, you have an inherit parent/child relationship, and can still reference the slides just as easily in CSS (ul#slideContainer li)

You could also find your number of slides finding the children of the :

var slides = $(’#slideContainer’).children();
var numberOfSlides = slides.length;

Joe

May 24th, 2009

I have one question. It’s a bit out of the scope of the script. It’s about controlling the content that I put into the slides. I have embeded two audio files with windows media plugin, one each to slide one and two. My problem is that once I play the audio in slide one and then navigate to the next slide, the hidden frame continues to play the audio. How can I twick the settings to automatically stop the audio once the frame is hidden? Please help.

Jacob Gube

May 24th, 2009

@Jan: I’d love to help but its easier to see what you have right now (modified version).

@John Kary: Great tips. Your way is one of the ways to do it, yes. Why change the method for finding the number of slides when mine works? Don’t fix it if it ain’t broke — Just to be clear, I’m not conceding to your suggestions, I’m going to stand my ground: you offer an alternative solution, not a better solution.

In your suggestion, you also don’t factor in the fact that people will tweak this to use other elements besides div’s, what if I wanted 1 div and the next one an image and the next one a block-displayed unordered list.

Additionally, the inner slide container is there for graceful degradation (JS off).

You have to think about flexibility John.

@Joe: Do you have a web page where we can see it? It would be easier if we could see a live example. One thing I can think of is in the function that is executed after a click event on the controls, you add a block of code that checks to see if there is any audio playing, and if so, turning off the audio. Is the audio played via JavaScript or Flash?

Jan

May 24th, 2009

Jacob: Yes of course. I would really appreciate it :)
The site is currently under development and can be seen here: http://server1.hostedserver.nu/ – The script is running on the frontpage in the grey box with the text saying “Næste”.

For now it just goes back to the start. But as you know that is not exactly what I want :)

I have placed the script here: http://server1.hostedserver.nu/layouts/kommune/scripts/slideinit.js

Looking forward to hear from you.

Joe

May 24th, 2009

Thanks Jacob for responding. I haven’t uploaded into my server. Will get back to you once I do. Nevertheless I will use your script without audio for now. I like your script because it remains clean even when javascript is off. Keep up the good work!

Russ Murray

May 25th, 2009

This is outstanding. I am extremely excited about integrating this very, very slick slide show. The commented code is really helpful. Thanks Jacob.

frankybee

May 27th, 2009

Hi!

This is a nice application!

It works well for me, i’ve been able to customize it a bit even if i’m new to jQuery. — I’ve been trying to add to my page a second jquery fonction, but it doesn’t work if your fonction is installed on that same page… (Both are working separately)

Do you have any clues of what may cause that conflict?

Thanks for your good work!

jeff

May 28th, 2009

Hi,
i actually have a question about embedding audio files to specific slides.

i want specific slides to have a specific sound that plays when i click to that slide.

any idea?

thanks

Joe

May 31st, 2009

Hi Jacob, DON’T bother to publish my previous post, the question would require a new script. Rahter publish the one below since it’s similar to the question I had before:

Jeff: I think it’s possible to embed audio, but the problem comes when you have more than one audio file, since all of them will autoplay including those on hidden slides. I also wanted to have each each audio in visible slides to autoplay and then stop as soon as the user advances to the next slide but I don’t know how. For the past six months I’ve been posting this question on different forums but there seems to be no answer.

pekk@

June 1st, 2009

This i a gallery not a slideshow

Henry

June 2nd, 2009

Great job Jacob Gube! maybe its not a big change for you but maybe you could add some opacity when you click on the arrow, would look better and would add allot I think. her is an example. http://zendold.lojcomm.com.br/icarousel/example3.asp

Jamey

June 4th, 2009

Could this pull in pages (simple) from other url instead of images? I have a project where we want a lobby kiosk that displays info from our database (already have that parsed into simple html pages)

a

June 10th, 2009

is there anyway to quickly change the title text? i don’t wanna dig into the psd but the bg_pagecontainer_h1.jpeg in img is not really editable

Jacob Gube

June 10th, 2009

@Jamey: Yeah that’s easily modifiable to display remote/dynamic data, and depending on the server-side technology you use, you’d have to convert the HTML page to that.
@a: You can change it in the PSD file I provided. Though That was really all for decoration to make the demo a bit prettier (but yeah, you can definitely edit the text if you have access to Photoshop).

Daniel

June 15th, 2009

I have a question. I have implemented your slick slideshow in my website as a product scroll list. When i click a product it opens in an iFrame. If i click the “Shirts” link on my menu bar for example, how can i make it link to a specific slide, and iFrame?
Thank you for your assistance.
Daniel.

xoozlez

June 16th, 2009

Thank you for creating this slideshow and it is simply very easy to use!

I am hoping to have the auto slideshow feature though. Will the new version be ready anytime soon? :)

Jacob Gube

June 18th, 2009

@Daniel: It would be easier to provide help if I could see your implementation – what’s your site’s URL?

@xoozlez: Unfortunately, I’ve been caught up with a lot of projects and this has been put in a backburner. I’ll see if I can come up with an easy solution to auto-sliding (or if there’s a kind dev reading this comment – feel free to chime in).

Darwin Santos

June 19th, 2009

Thanks a lot Jacob. The mockup included is very helpful too. The light effects in it are very good. I’ll keep on checking this post. I also need it to auto-slide.

Darwin Santos

June 19th, 2009

I’m not a javascript expert so the syntax is not right, but please take a look at this approach it might work if its syntax is corrected.

function autoslide
{
   if (currentPosition < slides.length)
    {
       currentPosition = currentPosition + 1;
    }
   else if (currentPosition == slides.length)
   {
      currentPosition = 0;
   }
}
setInterval(autoslide, 3000);

would it work?

einw

June 21st, 2009

Hey Jacob,
is it possible to realize the width value with percents for a flexible layout?
I’ve try it for 2 hours, and its still not working.

XuanThanh

June 22nd, 2009

Nice tutorial, thx. BTW, I’ve modified it to make it a plugin and add some features: autoplay, slides index. You can download it here: http://files.myopera.com/xuanthanhmail/files/slick_accessible_slideshow_remix.rar .Happy coding!

Jacob Gube

June 22nd, 2009

@XuanThanh: Nice one, thanks!

Darwin Santos

June 22nd, 2009

@XuanThanh: Thanks!

xoozlez

June 23rd, 2009

Cool XuanThanh! I’ve used your modified version and it is working great! :)

Tomas

June 23rd, 2009

Thank you, works like a charm and looks absolutely great!

XuanThanh

June 23rd, 2009

Arg… Plz change the option “showSlideNumber” (in final.html page) to “showSlideIndex”. Sorry :P !

Zwamb

June 23rd, 2009

@jacob
Very nice mate. I will be using this at some point! I learn’t alot from this tutorial. Many Thanks

@XuanThanh
I can only see the scrolling version. Do you have any idea why?

XuanThanh

June 24th, 2009

@Zwamb: Did you rename #slideshow or #slidesContainer? If you did, change them back, unless I have no idea why… until u show the the code. Nice day!

Zwamb

June 24th, 2009

Sorted! What a wonderful plugin!

Is it possible to link the indexes to other links so it can be used as a content slider?

Stephane

June 26th, 2009

For those who are interested, I’ve translated this tutorial in French and made some improvements:
- Automatic return to the beginning
- Play/Stop button

I’ve also made a French tutorial on how to create a admin area in AJAX and jQuery where you can:
- Add/modified/remove a slide
- Change the order of the slides with “+” and “-”
- Images are automatically resized in PHP

The live demonstration of the slideshow:
http://snoupix.com/demo/slider-jquery/final.html

The live demonstration of the admin:
http://snoupix.com/demo/slider-jquery/admin/

Tutorial 1&2 in French here:
- http://snoupix.com/slideshow-jquery-accessible_tutorial_28.html
- http://snoupix.com/partie-admin-dun-slideshow_tutorial_29.html

Jacob Gube

June 26th, 2009

@XuanThanh: You rock! I’ll update this post to link to your file and give you credit.

@Stephane: Thanks for this. Just a note, Stepane had contacted me about a month ago to see if he could modify this tutorial and also translate it in French. Because I see a value in reaching a wide range of audiences, I’ve permitted him to modify and translate this tutorial in his native language.

Jon

June 29th, 2009

Dear mr sixrevisions dude, can you delete that last comment and replace it with this one, thanks mate :)

Awesome plugin/script, kudos to all its contributors!

Just a tip for IE6, ensure you have the dimensions in your images, not only is it XHTML compliant but ensures you don’t have strange things happen with the slideshow.

Chregan

July 2nd, 2009

Hey,

Great tutorial, it has helped me a lot, thank you.

I have made buttons that go over the image. I needed to change prepend to append in order to make it come up over the image. You were using absolute positioning, so why did you need to use prepend for the left control? just curious.

Thank you very much for this.

take care,
Chregan

Wallace

July 3rd, 2009

Nice plugin and working demo, actually i have used a similar jquery plugin on one of my sites.

Tabs

July 7th, 2009

I’m having the same trouble with the DOM arrows are not appearing. Same trouble Garf had (above) but no one answered the question. Is there any reason why they wouldn’t be working when the CSS is moved to an external style sheet..?
cheers

Jacob Gube

July 7th, 2009

@Garf: Upon inspection, it doesn’t look like the images for the controls aren’t in the right location. Based on the example page you provided, the image should be in this location (and it isn’t there): http://www.mgarf.com/jessica/img/control_right.jpg

The images responsible for the tab controls should be placed there, or if you modified the name, you should update the CSS to the correct file name and file location.

Browsing your image directory’s index, it doesn’t seem that the files you need for the left and right arrows exist: http://www.mgarf.com/jessica/img/

@Tabs: Read my response to Graf. Can you click on where the left and right arrows are, and the slideshow moves? In Graf’s example, it was simply images not being there, but you can still click on the location where it should be, the slideshows does move left and right. Do you have an example page we can check out?

bogo

July 10th, 2009

Slick plugin, but not too slick which makes it just right. And, its easy to implement. Since it doesn’t work for multiple instances, I want to create links to go to positions in slideinner. I am pretty weak at jscript but nonetheless trying to figure out how to write a little function like:

$(”#linkid a”).click(function(){
currentPosition == 10;

});

many thanks

Joshua

July 10th, 2009

I need both control arrows to be on the same side. I have tried to tweak this but have been unable to pull this off. Seems like it should be easy. Any tips on how to do this? Love this tutorial! Thanks.

val

July 14th, 2009

Great tutorial, thanks! Nice and easy.

One issue. I needed to insert YouTube/Vimeo objects into slides. And there is a problem with firefox. It doesn’t hide them once outside of the slidesContainer. This is just the flash issue, all of the other elements work as expected. And it only happens in firefox. Opera, IE6/7, Safary display embedded flash inside slides just as any other information (hides once outside of the container). I would greatly appreciate any help if anyone could suggest a workaround.

Jacob Gube

July 15th, 2009

@val: Your explanation is super thorough, but without seeing a live example, all I can offer you is a hundred speculations of what could be going wrong. We’d need to see a live page so that we can pull out our in-browser debuggers and see what’s up.

harrison v

July 15th, 2009

hi! i’ve installed the script and tested it. the problem i am having is that the image for the button doesn’t show up and i have a ridiculous amount of white space. http://www.fragnosis.com/new – maybe you can help me look it through Jacob.

harrison v

July 15th, 2009

sorry for the repost, i have a new issue now. the buttons are out of place and they aren’t showing. http://www.fragnosis.com/new

val

July 19th, 2009

@Jacob:

Hey, thanks! I’ve sorted the issue by changing ‘overflow’ to ‘overflow-x’:

$(’#slidesContainer’).css(’overflow-x’, ‘hidden’);

Otherwise ‘hidden’ wont work for FF, just ‘auto’.

I’ll post a link once the site is ready, thanks!

snowgrind

July 28th, 2009

loved the tutorial, but i am having an issue with the arrows, they do not line-up, properly.

they line-up to the bottom of my header and not the top of the div that they are in.

i have copied your css and java script and i still have this problem.

please help

Blarnee.com

August 1st, 2009

Great sliders! If anyone would like to grab a brand new jQuery Slideshow component that’s only 820 bytes in size, you can download it from my blog now.

Maxxis

August 3rd, 2009

Here is a doozie for you all. I have a form in the slider that submits via POST and funny enough my tags are not posting to the processor page. When I kill the auto slide script it works.

Any ideas?

The form submits via GET 100%.

Maxxis

August 3rd, 2009

Adding to the drama. Once the form is submitted the POST and GET data is duplicated.

Trying to establish the cause.

Maxxis

August 3rd, 2009

Found the problem. On line 30 of the slide.js file the first slide is cloned to create a smooth transition back to the first slide.

The first slide contains a form so naturally its duplicated as blank hence the submit is done with blank fields.

LOL. Commented the line out. Works perfectly.

Matthieu

August 6th, 2009

I might be wrong, but I cannot find the js file in the zip…

Jacob Gube

August 6th, 2009

@Matthieu: One thing I regret about this download is that I included the jQuery script inline of the HTML document. It’s something that I will no longer be doing: from now on, I’ll be providing scripts as external JS libraries for easier plug-and-play.

Matthieu

August 6th, 2009

wow Im sorry, I should have checked the html files before writing my useless comment! sorry about that thks for this great tutorial! till now, this is my favorite slider Ive seen around! I think Im going to use it for my website!

Jacob Gube

August 7th, 2009

@Matthieu: You brought up a good point though and your feedback (question) is always valuable. I’d rather that people ask lots of question and be vocal about needing help, rather than staying silent – or else I won’t know that anything’s wrong.

Brian

August 10th, 2009

Hi Jacob,

I like this slider. Is there a way to tweak the code to slide to boxes at once that are different size boxes? I would like a container for text and another for images because I want to put thumbnails below the text that can trigger a slide as well however the thumbnails don’t slide. Similar to this.
http://pikedesignstudio.com/new/solutions/interactive.shtml

I want to use a slider instead of an iFrame.

thanks

chris

August 12th, 2009

Works great for us with static content. I’ve been playing trying to create dynamic content and the jquery code seems to not work right. Doesn’t seem to be able to count the number of slides or do the .wrapall for some strange reason. if i execute the code in the browser address bar(e.g. count number of slides etc) after it’s already displayed on browser, it shows correct count. Looks like some sort of weird DOM timing issue with jquery. all the injected slides look perfectly formed like from a static html, in a DOM inspector. Stripped the slides to bare essential dynamically inserted plain text (no pics) and still won’t budge…always stuck on slide one. Using IE6 btw if that makes any difference; can’t change browser.
Has anyone had success with dynamically injected .slide divs?

Travis

August 12th, 2009

Hi Jacob

This looks a great tutorial. One thing I noticed though. Firefox 3.5 on the Mac (and 3.0.12) just shows a div with a long scrollbar which scrolls all the slides in a scroll. Like javascript is disabled or something. And this is on your demo page. I haven’t downloaded and tested it out on my own yet.

A quick look in the error console shows the following error:

$ is not defined. Line 110.

That’s on your demo page for the slider.

Any thoughts as to why this doesn’t work in Firefox on Mac?

Travis

August 12th, 2009

Oops. Looks like it works properly in FF 3.0.12 on Mac. But still not on FF 3.5.

chris

August 12th, 2009

I think i’m getting somewhere, slowly. Seems the problem is due to the .slide DOM creation inside of a jquery .get function. I’ll post some code when fixed.
Cheers

Joe

August 13th, 2009

How can I pause the slider on mouseover? Any ideas?

Eric

August 13th, 2009

Hey I am kinda new and was looking through the comments. I found out about this option – Automatic return to the beginning. Which is exactly what i need but its in french.

What is the code for – Automatic return to the beginning

Im sure its something very easy.

Thank you.

Qurrat

August 14th, 2009

Please explain why a class is #slideshow and another is a .slide??

whats it with a “#” and a “.” ??

Robert

August 14th, 2009

Hi everyone!
I am new to jquery, i followed ths amazing tutorial, but i have a problem. Everything works well, but left pointer isnt working. I click on right pointer, it gets me to next slide, but when i want to return to previous slide, the left pointer is not respornding. The background image of left pointer appears, but as a button its not working. Anyone has this problem?

thx!

Robert

Fran

August 14th, 2009

Hi guys!
Am just wondering, how can i make hover effect over left and right pointer?
So just an easy image replasement on hover effect.

Regards!

Travis

August 15th, 2009

It’s all good now in FF 3.5 on the Mac. Thanks.

Dave

August 20th, 2009

Very helpful post. I’m wondering about the comments regarding multiple slideshows- can you loop something like this in jquery? Say, replace the ids with classes, and put each div.slideshow in its own ? If you target the list-items, you could avoid crisscrossing variables. Or, does the DOM manipulation do something special to prevent this option? I don’t quite get that part. Any thoughts? Thanks!

Andy

August 22nd, 2009

Very nice script you’ve got here. Not that it matters (it still works), however, rel is not an attribute, it throws validation errors, simply moving the text to the empty title=”" and swapping out .attr(’rel’) for .attr(’title’), you achieve the same thing and make your validators happy. Assuming no one has posted this tidy yet, as i downloaded the source yesterday, and it hadn’t been dealt with.

I could also be wrong in using the title attribute for this purpose, but it wasn’t used and just sitting there, so correct me if it’s a taboo.

Dave

August 23rd, 2009

I have been a fan of JQuery for a while but found it all a little confusing. Your blog helped clear it up for me so thanks

chris

August 24th, 2009

found the problem why couldn’t populate the slideshow dynamically with an xml feed. the jquery .get function is asynch, so must use the longer .ajax function instead and set asynch to false during call.
cheers

Andrew

August 26th, 2009

My controls are showing up on my outside container, rather than the slide container:

http://www.andrewvieau.com/antibeautiful/shirts.htm

It otherwise appears to be working fine.

Any suggestions?

popularsite.ru

September 2nd, 2009

Try the cycle plugin for auto replay. It is realy easy:

http://malsup.com/jquery/cycle/

Regards.

Valberg

September 7th, 2009

Great tutorial, thanks for that!

Glen

September 11th, 2009

Great plugin! But I was wondering if it is possible to have multiple slideshows on the same page.

Martha

September 14th, 2009

Hi ~ This is great. I am so glad I found your site.

I am learning how to do some of this. I’ve been working with this and having some difficulty. I am hoping someone can help.

I would like to have two images with accompanying text and hyperlink side by side in each slide. Like this:
Ctrl / IMG Text / IMG Text / Ctrl
Then when you click on the control it displays another slide with two:
Ctrl / IMG Text / IMG Text / Ctrl

I keep getting the second two displaying to the right and on top of the first slide.

The page is not on an active server but can be if it would be helpful to view.

Thanks in advance for any guidance you can give me!

Martha

September 14th, 2009

Figured it out. It may not be the best solution but it works. Thanks again for the tutorial and the script. Just what I was looking for.

PSD to HTML

September 14th, 2009

This is totally awesome. I have been looking for something like this for a while now. Thanks so much. Ok i’m rolling up the sleeves and off to get some coffee so I can play around.

Once again thanks ;)

Agénor

September 15th, 2009

Can you add an option to set the transition to a “fade” effect ?

Cazman

September 16th, 2009

Hello Jacob, Caz here, I have to say it’s an amzing tutorial, but I think you missed out one part of the tutorial out, in the CSS, I think you forgot to specify the set width of the entire slideshow div, if you dont do that the controls appear right at the edge of the page, just thought I should let you know :) tell me if I’m wrong, I’m a bit new to this.

Christopher

September 17th, 2009

This is a great tut and nice work! Could you tell me how I could make the image fade instead of slide left or right and still keep the controls?

Donna

September 19th, 2009

Thanks for making great tutorial! I was playing around with making the images larger and making the content area wider/taller but I’m making a mess. I would like the whole thing bigger. Can you provide suggestions for increasing the overall dimensions?

David Riveroll

September 25th, 2009

First of all, thanks @Jacob for this great tutorial + awesome tool! I’m really a begginer in jQuery but I don’t feel like it thanks to you and some other generous folks, including the ones that have solved issues or expanded on your work, thanks too.

I saw the plugin version of @XuanThanh, by the way, you should really link to that on the post so people don’t have to search in the comments for it. It’s great Xuan, and it addressed something I needed (going to a specific slide) but now my problem is that I need the instruction to come from another page.

What I mean is this: I use the slideshow as a catalog of crafts of different categories, and I have the menu of the categories in another page, so I want them to pick one and they’d go straight to that slide, and from there they can continue forward or backward with the slideshow or go back to the menu

This is the slideshow – http://www.manosdemexico.com.mx/nuevo/artesanos.html

And this the menu – http://www.manosdemexico.com.mx/nuevo/productos.html

I tried placing anchors and using # on my links, but it didn’t work… actually it shows the right slide for half a second and it goes back to the first, and if I go to the URL bar and enter the link it works, but that’s not good enough for the project to work fine. Please help me with this one, I’m sure it would be useful to more people

Ranjith Siji

September 25th, 2009

Nice Tutorial. Great work. One thing can you update the transition with a fade effect ? Otherwise this is a great tool for nice websites.

Toan

September 29th, 2009

Thanks so much. Very cool, i’ll try to follow it and add it to my website.

Mec

September 29th, 2009

Hi ..
thanks for the tutorial ..

What can I add to this code to add automatic switch of content ?

Ryan

October 1st, 2009

Worked like a charm, very nice.

I have one question though. Could you perhaps show how you would adjust the DOM to show the controls, regardless of the current position? I realize I could just change the .hide’s to .show’s but I would like, when on the first slide if the user clicks left to take them to the last slide and visa versa? Been trying somethings myself to no avail.

Djavan

October 3rd, 2009

Im working on this now and so far when I open it up in IE I get prompted for activeX (to allow it to run) yet when I open yours up or someone elses I dont get that. The only code I modified was the css. any help is greatly appreciated

Ioannis

October 5th, 2009

Thanks for this nice tutorial.

I think there is a typo in the “Styling the Slideshow slides in JavaScript” section. I’m referring to the “.css(’overflow’, ‘hidden’)” , which should have been “.css({’float’ : ‘left’, ‘width’ : slideWidth})” , right?

Anthony

October 7th, 2009

Well I am working on this and my images slide in fine, but I cannot get the actual slideshow div background image or my two left and right arrow images to show. Can anyone think of a reason why?

And Djavan, It sounds like you might have IE security too high?

Frederik

October 13th, 2009

Many thx for this nice tutorial. it helps me very !

Mec

October 13th, 2009

Any ideas for automatic switch ? so I can make something similar to “eHow Topic Guides”
in here ehow.com

It will be a great help
Thanks

Louis

October 19th, 2009

I am new to jquery, so where exatly does the URL for “launch website” button go in the coding?

Thanks…great work.

Louis

October 19th, 2009

…nervermind found it in the code…I need sleep.

Thanks.

Karan

October 20th, 2009

Hi Jacob, I went through ur “Block 1: HTML markup” tutorial and quite liked it but i am facing a problem, pls help
The thing is I have inserted a flash swf file in the first slide nd jpeg images in rest of the four slides now the slideshow works perfectly fine when opened in internet explorer but when i open it in mozilla firefox the slides get misaligned and also the first slide which contains the flash swf movie does not masks itself and remains visible even after clicking on the next button.
Please try at ur end by inserting a flash swf file in first slide and image files in rest of the four slides and check it in firefox…
Thank You

Nuno Costa

October 21st, 2009

Excelent tutorial. I’m taking first steps into jQuery, it’s fascinating.

Pavan

October 22nd, 2009

Hi,
Superb and simple slideshow, can you please tell us how to autoslide the images displayed in the inner slide container?
I mean the images should move on automatically with certain interval of time say 10 seconds, after 10th second, the second image should appear.
Is it Possible?
Please do revert me back.
Thanks,
Keep up the good work!

MikeyBoy

October 22nd, 2009

Is it easy to make a Vertical version of this?

marcos cerutti

October 22nd, 2009

Lovely stuff mate!
Im facing a little issue. Im quite new to jquery and Im not able to manage this to work into tabs. anyone have the idea how it can be fixed?

Cheers

Lincster

October 24th, 2009

I plan on using this for my next website that I am currently researching for inspiration.. :) .. but I really like the admin panel that Stephane showed off.

Jacob, would it be possible to get that tutorial and source code translated into english?

TIA!!

ViMal

October 24th, 2009

Great one!. Thanks for explaining step by step.

Simmo

October 25th, 2009

Hey,

Great tutorial and well explained. Is there a way that you can have 2 sliders on the same page. I tried to create 2 but it would not work. any advice would be appriciated

Cheerz

Pozycjonowanie Stron

October 31st, 2009

Nice tutorial :)

James Tang

November 3rd, 2009

Perfect design, especially the tips including in this article is very useful! Thanks!

NitroD

November 3rd, 2009

Dear Sir,
Can some one tell me how i can let the slide play auto and also play it manually with the controls

THank You;

Leave a Comment

Subscribe to the comments on this article.