Create a Slick and Accessible Slideshow Using jQuery

May 18 2009 by Jacob Gube | 441 Comments

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

441 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

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;

sibble

November 9th, 2009

Excellent article!

Phil D.

November 11th, 2009

holy shamoley! this is a lifesaver. I’ve been trying to figure out how to make my slideshow accessible for people who have javascript turned off. Thanks a TON!

Christina

November 13th, 2009

It seems that ther is a bug when using IE6. It shows all slides — (overflow’, ‘hidden’) –. Is there any fixes.

Rob

November 15th, 2009

Nice article. I’ve used this several times recently. A lot more lightweight than the coda slider too.

Sabian

November 25th, 2009

Can anyone help me in putting the controls at a different position?
I´d like to have them underneath including a mousover effect…

Sabian

November 25th, 2009

Ok, I was successful with the positioning. Now I try to figure out the mouse over effect… I guess nobody cares ;-)

Sabian

November 25th, 2009

I really don´t get it. How can I implement a mousover-effect on the controls?

Sabian

November 26th, 2009

So now it is 4:23 in the morning, after trying for over 5 hours to figure out how to do a mouse over on the controls, I have to give up. Im a newbie in Javascript and I guess Im to stupid to understand the html javascript connection to create a mouseover out of javascript. Everything in google refered to the html “a” tag, but as we dont use that here, it is not aplicable… I will try tomorrow again. Night.
If someone can tell me how to create the controls in html, I would love, pay, do just anything!!! My Email is sabian at gmx.net Thank you!

Ivor

November 26th, 2009

How would you add easing to the slide? like a bounce?

Awesome slider btw.@XuanThanh :thanks for adding theautoslide and converting it into a plugin

carolline

November 26th, 2009

Great! I just would like to know how do I show the current slide’s number on my sidebar. Something like 1/10, 2/10, 3/10…

Harsha M V

November 28th, 2009

thanx for the article. very helpfull

Enoch

December 1st, 2009

Hi, your script is very helpfull for my website!
It worked very well until two days ago, when i’ve encountered a problem:

I had changed the value of “currentPosition” and everything seemed to go well.. but now the slide shown is always the first.
The directional buttons are the only to change, which in fact do not work well.

Could you help me?

Thanks,
Gabriele

(Sorry for my bad english)

Monique

December 2nd, 2009

Love this tutorial. However, one issue that I found is that: Turning off the scrollbars if Javascript is running, turns them off completely for the entire window, not just Container within the slideshow. Interesting challenge to keep them on for the overall window, while turning them off for my graphics containers.

Monique

December 4th, 2009

Because I applied this to a smaller container within a container rather than full screen, I had to set overflow to scroll in the body tag, otherwise I got a shift because of the disappearing scroll bars.

Hope this helps others who may run into this issue.

Enoch

December 5th, 2009

Argh, another problem :(
Lightbox2 works only if i remove this line: “”… but so, the script were disable. Could you help me?

Yukon

December 9th, 2009

I’m having a similar issue to Robert from August 14, 2009 comment but my issue is with the right arrow.

I’m using XuanThanh version with autoplay.
If I remove the autoplay:

$().ready(function() {
$('#slideshow').slide({autoplay: true, duration: 4000, showSlideIndex: true});
});

The right arrow works fine. Once it is added back in to get it to autoplay and show the slide numbers, it no longer functions.

The left arrow works fine.

Any help would be appreciated.

Yukon

December 9th, 2009

Please ignore the previous comment by me. I found a conflict that was causing the issue

denbagus

December 22nd, 2009

awesome tutorial…easy to read…thankyou

Jonathan

January 1st, 2010

Thanks a lot. I’m trying to do that.

Vijaya Kumar S

January 2nd, 2010

Excellent tutorial. Thanks a lot for your sharing and for kind help.

James

January 7th, 2010

Thanks for the tutorial,
I have gotten it to function on my test page with the scrollbar but I can’t get the arrows to work with the javascript. I haven’t used javascript before this (I was working in almost 100% Flash AC). Where do I put the javascript code? is it on the page with the HTML or is it referenced and a seperate .js file?

Thanks

nzhul

January 8th, 2010

Excellent work dude :)
This is super useful for my personal site… but i’m trying to make modified version. The concept is something like that:
http://i280.photobucket.com/albums/kk167/nzhul/slide_concept.jpg

But to complete this i need to make the slider infinite. I have found that there was the same question in the comments, but without answer…
Please, give me advice how to modify your slider to make it infinite looping.
With Best Regards!
Dobromir Ivanov
Bulgaria

Pit

January 9th, 2010

Thanks for this great tutorial. I found an extension with autoslide and ajax preloading here: http://newbitsontheblog.com/jquery-slideshow/

Nico

January 12th, 2010

I have the same problem of some mentioned above…
Its like the JS is not “applied” and the arrows are not shown, yet the scrollbar is ;)

Can you hel me???

Regads!

Markus

January 13th, 2010

Hey, i love your script, and i was wondering.
Is there anyway to edit it so that it loops each slide
(i.e, when you reach slide 4, clicking on the right arrow, makes the slide go to #1, and on slide 1, clicking the left arrow takes you to slide 4?
Thanks.

Tyger

January 14th, 2010

Really love the article and you’ve made it simple to follow. Thanks. I am having one problem though, I adjusted a few things such as making Javascript code includes and separating the CSS into separate files (a _global.css for basic formating and a scrollbar.css for the jquery) finally I made mine 950px wide and 260 tall. The scrip works great except that for some reason the arrows won’t appear. Any suggestions? I added the link to the test site above. Any help would be appreciated.

Cor

January 16th, 2010

@Stephane: Great work! As my french is very bad, is there any chance the tutorial will become available in english? I’m especially interested in the admin tool and the start/pause function.

Amy

January 18th, 2010

is there a way to have this work with some sort of lightbox? Like i wanted to create album covers within the slidshow, once the user clicks on the album, a lightbox/mediabox pops up with the image gallery. so far i can’t seem to use mediabox, greybox or lightbox and i can’t figure it out. any idea?

Steve

January 19th, 2010

Nice, this is very slick.

Brandon

January 20th, 2010

Is there a way with this script to allow for automatic scrolling, where it pauses at each slide for a set amount of time, then scrolls to the next in a looop?

Mark

January 22nd, 2010

Jacob,

I am in the process of amalgamating this slider for some images with a JQZoom tool. However, what I need to be able to do is set a ‘rel’ tag based on the current slide position for the child ‘a’ within the slide ?

Is this possible and how would I go about setting the slide’s child element using the current position variable ?

Regards,

Mark

Tomas

January 23rd, 2010

Hello Jacob, nice tutorial, it would be nice to have some extension using XML passing content into the DIVs. I am quite new with jQueries but I have been experiencing flash modules quite a long time and this would make it even more interesting for some commercial purposes.

Goundy

January 24th, 2010

Hi.
I worked out a version for multi-instances ;)

[code]

$(document).ready(function(){
$(".slideshow").SlideShowManager();
});

jQuery.fn.SlideShowManager = function() {
return this.each(function(){
$.extend(this, new SlideShow(this));
});
};

function SlideShow(base){

this.currentPosition = 0;
this.slideWidth = 560;
this.slides = $('.slide', base);
this.numberOfSlides = this.slides.length;
this.inner;

var self = this;

self.slides
.wrapAll('')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : self.slideWidth
});

this.inner = $('.slideInner',base);

$('.slidesContainer',base).css('overflow', 'hidden');
$('.slideInner',base).css('width', self.slideWidth * self.numberOfSlides);

$(base)
.prepend('Move left')
.append('Move right');

$('.leftControl', base).bind('click', $.proxy(self.onLeftControlClick, self));
$('.rightControl', base).bind('click', $.proxy(self.onRightControlClick, self));

self.manageControls();
}

SlideShow.prototype.manageControls = function(){
var self = this;
if (self.currentPosition == 0){
$('.leftControl', self.base).hide();
}
else
{
$('.leftControl', self.base).show();
}

if (self.currentPosition == (self.numberOfSlides - 1)){
$('.rightControl', self.base).hide();
}
else
{
$('.rightControl', self.base).show();
}
}

SlideShow.prototype.animate = function(){
//for( k in this) console.log(k);
var self = this;
// $('.slideInner', self).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
// alert ('Animating: ' + self.slideWidth*(-self.currentPosition));
/* $('.slideInner', self).css({
'marginLeft' : self.slideWidth*(-self.currentPosition)
});*/
self.inner.animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
}

SlideShow.prototype.onLeftControlClick = function(){
//for( k in this) console.log(k);
var self = this;
self.currentPosition--;
self.manageControls();
self.animate();
}

SlideShow.prototype.onRightControlClick = function(){
//for( k in this) console.log(k);
var self = this;
self.currentPosition++;
self.manageControls();
self.animate();
}

//*/
[/code]

Please feedback ;)

Goundy

January 24th, 2010

By the way, with the code above don’t use ids, use classes for every attribute of the slideshow. Sliding is managed through objects, each slideshow becomes an object itself

Cheers

Goundy

January 24th, 2010

Oh sorry here’s the last correct version:

$(document).ready(function(){
  $(".slideshow").SlideShowManager();
});

jQuery.fn.SlideShowManager = function() {
    return this.each(function(){
	$.extend(this, new SlideShow(this));
  });
};


function SlideShow(base){

  this.currentPosition = 0;
  this.slideWidth = 560;
  this.slides = $('.slide', base);
  this.numberOfSlides = this.slides.length;
  this.inner;
  this.base = base;
            
  var self = this;

  self.slides
    .wrapAll('')
    // Float left to display horizontally, readjust .slides width
	.css({
	    'float' : 'left',
	    'width' : self.slideWidth
    });

  this.inner = $('.slideInner',base);
            
  $('.slidesContainer',base).css('overflow', 'hidden');
  $('.slideInner',base).css('width', self.slideWidth * self.numberOfSlides);
            
  $(base)
  .prepend('Move left')
  .append('Move right');
            
  $('.leftControl', base).bind('click', $.proxy(self.onLeftControlClick, self));
  $('.rightControl', base).bind('click', $.proxy(self.onRightControlClick, self));
            
  self.manageControls();
}

        SlideShow.prototype.manageControls = function(){
	    var self = this;
            if (self.currentPosition == 0){
                $('.leftControl', self.base).hide();
            }
            else
            {
                $('.leftControl', self.base).show();
            }
            
            if (self.currentPosition == (self.numberOfSlides - 1)){
                $('.rightControl', self.base).hide();
            }
            else
            {
                $('.rightControl', self.base).show();
            }
        }
         
        SlideShow.prototype.animate = function(){
            //for( k in this)   console.log(k);
            var self = this;
           // $('.slideInner', self).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
	   // alert ('Animating: ' + self.slideWidth*(-self.currentPosition));
	   /* $('.slideInner', self).css({
		    'marginLeft' : self.slideWidth*(-self.currentPosition)
		  });*/
	    self.inner.animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
        }      

        SlideShow.prototype.onLeftControlClick = function(){
	    //for( k in this)   console.log(k);
	    var self = this;
            self.currentPosition--;
            self.manageControls();
            self.animate();
        }
         
        SlideShow.prototype.onRightControlClick = function(){
	    //for( k in this)   console.log(k);
	    var self = this;
            self.currentPosition++;
            self.manageControls();
            self.animate();
        }

//*/
Goundy

January 24th, 2010

Hi back, I hacked the code again hehe. I added a auto play/stop button to make auto sliding. Here’s the url of the article on my blog http://mine.tuxfamily.org/?p=74#more-74
(I avoid posting the code since it’s gonna kinda flood that page)

Cheers

Meshack

January 29th, 2010

First of all, great tutorial. Thanks for putting this out there, I have found it super helpful not only for finding a carousel solution but also as an intro to jquery.

Several people have commented about having problems with the arrows not showing up or showing up in the wrong places. I ran into the same problems. Here is how I fixed them.

::The right/left arrow visibility thing::
The problem here is that the arrows were being hidden by other elements on the page. You can fix this by simply adding a z-index to the left and right arrows.

::The arrows are out of position::
If you copy and paste the code from the tutorial, you will run into this problem. The problem is fixed by adding position:relative to #slideshow. If you download the source files this isn’t a problem. You will notice this extra block of code:


#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}

novice

January 31st, 2010

How about if I would like to change the direction in which images moves or navigate, is that possible.

Christine

February 1st, 2010

Thank you, thank you, thank you!

seb

February 2nd, 2010

Thank you for your script, it works like a charm.

Only 1 little problem:
I have a multiple div’s wit absolute positioned div’s in them. In firefox and internet explorer the script works really great! But in Safari and Chrome the absolute div’s in the scrolldiv’s don’t move.

Did someone managed this problem already?

thank you very much!

seb

February 8th, 2010

Found a solution:

add position absolute in the slideinner

.wrapAll(”)

jcrog

February 11th, 2010

First off great tutorial! I am using this to show a portfolio and on the first load it takes some time.

How can I add a loading indicator to this while all the slides load?

Riikka

February 12th, 2010

Hi, you can add loading-image by creating new one for excamble here http://www.ajaxload.info/ and replacing the old one with it.

I was wondering if it’s possible to make this vertical instead of horizontal, does anyone know? If have tried so long and not succeed. If anyone knows please could you share your information? I would be more than happy.

Brad

February 17th, 2010

Very useful, learned quite a bit. Thanks!

Tayfun Erbilen

February 20th, 2010

Good tutorial :) Thanks

Kay

February 21st, 2010

I’m getting an error on my page when using this slideshow.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; WOW64; Trident/4.0; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Sun, 21 Feb 2010 20:52:33 UTC

Message: Object doesn’t support this property or method
Line: 4073
Char: 9
Code: 0
URI: http://localhost/fps/js/prototype.js

Message: ‘mc’ is undefined
Line: 14
Char: 2
Code: 0
URI: http://localhost/fps/js/scripts.js

any ideas?

Chris O

February 21st, 2010

First off thank you for sharing this slide show done with jQuery, as a new programmer to jQuery I have learned a lot by reading your code.

I have recently modified this slide show to automatically scroll through the slides and when it reaches either end it changes direction. The direction of the automatic scrolling is also controlled by clicking the left and right controls. I have also added a pause to the automatic scrolling when the mouse is within the slideshow div.

I am having a problem however with the pausing, once the mouse leaves the slideshow div I can’t get the interval to reset so once they mouse out the scrolling resumes with the time that was left over when the mouse entered the div.

Would you have any tips or solutions for fixing this problem?

Nick Young

February 25th, 2010

Fantastic and easy to follow tutorial. Spot on. Well done.

agr

March 2nd, 2010

i need autoplay button for ths script.plz can any one help me with the script?!

Yoshua

March 4th, 2010

Would like to link the control left/right buttons to images outside the js box, can anyone tell me how to do that? (images with arrows are +/- 100px outside the js box)

Almost like: when clicking on for ex “img17″ it does the exact same thing when cliking on the forwards button within js.

Tom

March 8th, 2010

I’ve read above – has anyone solved the issue of how to simply have the image inside the slide div link to the next image? Basically, the same functionality of clicking the forward arrow. Here’s what I’m working on:
http://www.uark.edu/ua/hapgood/dev/onf/build/
Thanks

Hermitbiker

March 14th, 2010

…. thanks for the slide-show tutorial…. it will be great once I study it more and really understand it entirely…. I am just a real beginner trying to run before I can crawl well !! :)

Neil Andrew DuPaul

March 16th, 2010

This slideshow was exactly what I needed, many thanks to the author.

Tanvir

March 17th, 2010

Thanks …….. very detailed … simply great job done …

Philippe Monnet (techarch)

March 17th, 2010

After getting Stéphane’s permission (see his comment on June 26th, 2009) I just translated his French tutorial back to English and made a few tweaks.
He had made the following useful enhancements:

* Automatic advance to the next slide with a parametizable pause on each slide
* Optional control panel with pause/resume buttons
* Auto-start of the slideshow
* Endless loop

See my blog post at: http://blog.monnet-usa.com/?p=276

Philippe (@techarch on Twitter)

Sean

March 22nd, 2010

Thanks Jacob and to Phillipe for the translation.

Justin

March 23rd, 2010

Is it possible to control the speed of the transition? + Another vote for a fading transition.

Michael

March 25th, 2010

Does anyone know of a way to set it up so that the #leftcontrol and #rightcontrol are placed right next to the .numbers?

Michael

March 25th, 2010

^ In the version created by XuanThanh I mean. (BTW THIS tutorial rocks.)

Hakan TAN

March 31st, 2010

Thanks for help.

Jackson25

April 7th, 2010

To what directory do I upload the .js file? Also, can this be used in WordPress?

Brian

April 16th, 2010

Great Tutorial, its almost what im looking for. Can it be used to display 3 image thumbnails per slide and have the thumbnails zoom to fullsize when clicked. Like how Shadowbox is used. If so, how would I go about accomplishing this.

Your Comments, Suggestion and Help will be highly appreciated. Thanks

Ravi

April 17th, 2010

hey, great tutorial. but i got a slight problem. when i tested the code in a standalone project it worked fine. but when i implement it in my site, i cannot see the right and left arrows. any ideas as to what may be wrong?

Raghib suleman

April 20th, 2010

Thanks its nice slideshow…

roman

April 27th, 2010

for marie’s auto-slide function, add this within “$(document).ready(function(){” after all the other code:

//starts automatically
var loop = 0;
function rotate(){
setTimeout(function(){
$(‘#rightControl’).click();
loop++;
if (loop < numberOfSlides – 1 ) rotate();
},5000);
}
rotate();

izle

May 1st, 2010

Great! happy jquery :D thanks.

Jonathan Cajepe

May 2nd, 2010

Downloaded the source files but the .js file plug ins aren’t in the folder

ana

May 4th, 2010

people and their dumb weird commets

sam tsohonis

May 9th, 2010

Hi
I am really thankful for this- I’m trying to set it up to work with html- I’m a bit of a javascript/jquery noob, though, so i’m struggling a bit. here’s where I’m at:

first, since I’m a little more familiar w/ php loops, I set up a little snippet that loaded the images and text well and worked fine with the script. But I want to be able to select from multiple xml collections, via an href link, and I don’t want to refresh the browser every time to reassociate the xml info.

So I’ve been using a jquery xml loop:

$(document).ready(function(){
$.ajax({
type: “GET”,
url: “web.xml”,
dataType: “xml”,
success: function(xml) {
var slidesContainer = $(‘#slidesContainer’);
$(xml).find(‘pic’).each(function(){
var thumb = $(this).find(‘thumb’).text();
var largeimg = $(this).find(‘largeimg’).text();
var early = $(this).find(‘early’).text();
var about = $(this).find(‘about’).text();
var html =’‘+about+”;
slidesContainer.append($(html));
});
}
});
});
to try to do the same thing, intending eventually to connect it to a click event for the purposes of switching xml files.

The problem I am having is, though I seem to be following the guidelines of the jquery xml data model, I can only get info from the first xml entry to display – every time I click the control buttons, nothing happens.

I’m sorry if this should be directed to a convo about the jquery xml functions, but since it’s in the context of this tool I thought I would put it out here. I can’t be the only one adapting this for xml…

thanks again

sam

sam tsohonis

May 9th, 2010

gawd
“I am really thankful for this- I’m trying to set it up to work with html-”…
i meant XML, of course.

sam tsohonis

May 9th, 2010

damn and the post function on here took out the div elements I’m trying to include in the loop, at declaration of var $(html).

that sucks.

Aaron Lutze

May 12th, 2010

Hi Jacob (or anyone else that can help),

I need some help with the slider on a website I am making. The left button is hidden behind the graphics but the right button is working fine. Why would this be?

Site: http://roarindustries.businesscatalyst.com/Home.htm

Any help or suggestions would be greatly appreciated.

Cheers

Aaron Lutze

May 13th, 2010

I fixed it everyone, just needed to use some absolute positioning and z-index…

Lorraine G

May 13th, 2010

I would like to use this but want the slides to change automatically. In other words, I don’t want my visitors to have to click. How can I do this?

NickD

May 13th, 2010

I was wondering if it was possible to remove the text in the slides and use full images instead. I was also wondering if it was possible to make the actual slider 250×250 in pixels. Any help would be great. I think this is a great slider and it looks like the support here is far greater then other sites I have visited.

Aaron Lutze

May 14th, 2010

@Lorraine G: The best solution is to use Phillipe Monnets script here: http://blog.monnet-usa.com/?p=276, that is what I am now using on my clients website. He has added to the current framework with automatic slide movement, plus a play/pause button.

@NickD: Yes, you can use full images, I am using full images and have used a trick to get extra text to appear over the top of them. Yes, you can resize it too. Are you savvy with web design and css?

Bruce

May 17th, 2010

Can I ask why there isn’t a separate CSS file for the style rules?

Lori

May 27th, 2010

I loved this slideshow. It is a great way for clients with multiple things to say at the top of the page to spit it out in one spot. Saves on realestate.

A few quick notes: I am more into css than script, so I can only comment with hopes of helping others: When ever a float is used, the width must be specified. So for .slide img it is in the tut set for right, and .slide p (content) isn’t set float or anything. What happens is the content won’t just slip over. At least not in firefox, Give each a width and have p float:left

For all of you who can’t find your arrows. if you are putting the css in a directory (folder) then add ../ in front of img/ Here is what it should look like. background:transparent url(../img/control_left.jpg) no-repeat 0 0;

Again loved this, can’t wait to hear from the client.

Lori

May 27th, 2010

@Nick are you wanting the overall to be 250×250 or that plus the arrows? You need to re-size the arrows. Then figure the width of those and width of the images – so you need to know your total space.

Adam

June 6th, 2010

I’m trying add a position UI @ the bottom of this to tell the user which slider their currently on / imagine a bunch of dots and the current slide is a different dot. One would then click a dot to go to that slide as an alternative navigation than the left and right.

how would I go about doing this? Help and suggestions please.
regards

Robert

June 7th, 2010

Hi, I tried this tutorial but after completing everything it never worked like it should. I guess it was because I was using CS4 version, I don’t know. Would have been nice if it did work, would like to use this type of feature on my own site. Thanks Anyway.

Nothing at all changed when I put in the entire code for jQuery. Was I suppose to delete something in the CSS code before adding the jQuery?

Thanks a bunch.

Kelly Johnson

June 8th, 2010

Good stuff. I’d like to have an event that works as if “when the sliding animation is complete, do this” and be able to insert a function. So, you navigate to whatever slide/content, that content comes in and then you can update some other element or what have you.

martin

June 10th, 2010

Hi,

great write-up Jacob, managed to implement & tweak with no probs, except…

works in all browsers apart from FF3.5 (fine in 3.0 & 3.6)
in FF3.5 i get all slides below each other in one container with a vertical scrollbar, any clues?

thanks,
Martin.

martin

June 10th, 2010

Hi,

scratch that last comment, works fine in all tested browsers (even IE6!).

thanks again,
Martin.

Sascha

June 13th, 2010

What a wonderful work! Even for me a non-coder is it possible to use ur slideshow!

But is it possible to let the control arrows disappear and they only appear if the mouse is hovering over one of the control areas?

many thanks!

James

June 14th, 2010

@Sabian: to answer your question about rollover image change on left/right buttons I have acheived this with the following code in javascript (find and replace the event listeners for .control clicks):
// Create event listeners for .controls clicks
$('#leftControl').click(function() { prev(); return false; });
$('#leftControl').mouseover(function() {$(this).css("background-image", "url(images/control_left_over.jpg)");}).mouseout(function() {$(this).css("background-image", "url(images/control_left.jpg)");});
$('#rightControl').click(function() { next(); return false; });
$('#rightControl').mouseover(function() {$(this).css("background-image", "url(images/control_right_over.jpg)");}).mouseout(function() {$(this).css("background-image", "url(images/control_right.jpg)");});
}

Ventura

June 16th, 2010

This is exactly what I was looking for. I’m going to place three thumbnails that link to video posts. Thanks Again!

Unusual

June 19th, 2010

I love this one very sleek and stylish

Amanda

June 20th, 2010

Love the slider & the incredibly simple JS behind it. However, I can’t quite get the look I want.
I am pretty sure there is a simple CSS fix for my problem, but I can’t seem to find it. I am trying to get my controls inline (you get the gist from the site). Any help would be appreciated. I’ve been staring at the code so long now it just looks like gibberish.
Site: http://www.amandahaecker.com

nirazul

June 22nd, 2010

I’m still new to jQuery, but I really enjoy working with this cool library. Your Tutorial was very helpful! However, I missed a direct linking to the different pages, so I tried to implement it and finally figured it out.
Please note, that I don’t use the img-Buttons to go forward or back. Instead I use Text, but the classes mostly remain the same.

Here you go:

$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 1024;
var slides = $(‘.slideContent’);
var numberOfSlides = slides.length;
var counter = 1;

// Remove scrollbar in JS
$(‘#slideWrapper’).css(‘overflow’, ‘hidden’);

// Wrap all .slides with #slideInner div
slides
.wrapAll(”)
// 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 the pageButtons in the DOM
$(‘.slideContent’).each( function(i){
$(‘li#rightControl’).before( “”);
$(“li:empty”).addClass(” + counter);
$(“li:empty”).bind(‘click’, function(){

// Determine new position
currentPosition = ($(this).attr(‘class’))-1;

// Active state on new current pageButton
$(‘li#activeSlider’).removeAttr(‘id’);
$(this).attr(‘id’, ‘activeSlider’);
manageControls(currentPosition);

// Move slideInner using margin-left
$(‘#slideInner’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
});
});

// Append Text on the pageButton
$(“li:empty”).append(“” + counter + “”);

counter++;
});

// Hide left arrow control and sets 1 active on first load
$(‘li.’+(currentPosition+1)).attr(‘id’,'activeSlider’);
manageControls(currentPosition);

// Create event listeners for .controls clicks
$(‘.controller’).bind(‘click’, function(){

// Determine new position
currentPosition = ($(this).attr(‘id’)==’rightControl’) ? currentPosition+1 : currentPosition-1;

// Active state on new current pageButton
$(‘li#activeSlider’).removeAttr(‘id’);
$(‘li.’+(currentPosition+1)).attr(‘id’,'activeSlider’);

// 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()
$(‘#slideControl’).css(‘padding-right’,’20px’)
}else{
$(‘#rightControl’).show()
$(‘#slideControl’).css(‘padding-right’,’0px’)
}
}
});

jva

June 22nd, 2010

Dear Jacob, thanx so much for this, i’ve been looking into carousels for over a week and this one is perfect.

I am new at jquery and i was wondering if anyone could help me since i haven’t been able to fix it on my own (desperate here!!!)

- how can i make that the links to prev / next images are outside the container? i need them to be above the slideshow container.

- my images are a lot bigger, so is the container. i need to show the first image aligned to the left, and a percentage of the next one on the right (without any spacing in between them), but on the last one, i need it to be aligned right, showing a percentage of the one before (to it’s left), how do i do this?

i know it’s a lot to ask, i really appreciate any help you can give me!!!! :)

best

Danijel Gajan

June 23rd, 2010

Great stuff Jacob. I’ve used the script on my portfolio page: http://www.danijelgajan.com/portfolio.php

KJR

July 8th, 2010

I arrived at here when I looked for a slider.This slider is very good movement.When I make a website next, I will refer to this slider.

elf

July 11th, 2010

Hi, I’m trying to use an image positioned in the sidebar of the page I’m trying to build, to be able to go to a specific slide. I tried to do it adding an onClick statement but haven’t been succesfull. Ultimately I’d like to be able to control the slideshow from an set of thumbnails, the same way the boxed numbers work. Being absolutely new to this, I wonder if anyone has any suggestions. Many thanks!

Max

July 12th, 2010

This is great and I have used it here – http://www.risal.com – but the trouble is, it won’t work on the same page as my mootools navigation – how can I get both js scripts to work together?? Thanks for your tutorial, – great work.

Malowanie

July 15th, 2010

Perfectly done. Thanks for big help with this tut. jquery rulez :)

Obie_one

July 25th, 2010

This was a great tutorial. It was very well explained.
As a novice myself I learned a lot. I can see the value
for this effect for viewing websites on the ipad which doesn’t support flash.This is a flashlike effect without the flash. Kudos to you.

flashmac

July 28th, 2010

Followed the article from start to finish, not a character out of place, worked like a charm – thanks for a great piece of code and for taking time to share.

curtismchale

August 13th, 2010

How about some thoughts on how to animate it automatically to a new position?

I’m using it for a calendar and need to animate it to the current month.

yorkboarder

August 15th, 2010

Thanks for the cool tutorial on creating this slide show, i have a couple of questions that hopefully you guys can answer;

Being a novice at web design i have reworked this into a slides which are 900x300px wide and have introduced 4 images into the slide, however how can i control there positions properly?

While I have modified some things from the css as below;

/**
* Slideshow style rules.
*/

#slideshow {
margin:0 auto;
width:940px;
height:340px;
background:transparent url(../images/bg_slideshow.jpg) no-repeat 0 0;
position:absolute;
top:208px;
left:242px;
}

#slideshow #slidesContainer {
margin:0 auto;
width:860px;
height:340px;
overflow:auto;
position:relative;

}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:840px;
height:340px;

}

.control {
display:block;
width:39px;
height:340px;
text-indent:-10000px;
position:absolute;
cursor: pointer;

}
#leftControl {
top:0;
left:0;
background:transparent url(../images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(../images/control_right.jpg) no-repeat 0 0;

}
.slide h1 {
font:normal 24px Arial, Helvetica, sans-serif;
color:#252525;
letter-spacing:-1px;
margin: 10px;

}

.slide h2 {
font:normal 16px Arial, Helvetica, sans-serif;
color:#252525;

Im struggling to be able to control the over postions of the images. Also can i add individual text comments below each of the images?

also enclosed is the section of html, that ive ammended;

Most recent works . . .
<img src="images/img_slide_01.jpg" BORDER=0 width= "192" height="130"

<img src="images/img_slide_01.jpg" BORDER=0 width= "192" height="130"

<img src="images/img_slide_01.jpg" BORDER=0 width= "192" height="130"

<img src="images/img_slide_01.jpg" BORDER=0 width= "192" height="130"

The heading goes here interesting article about the future content of my slideshow and its images

As you can see this is just the first slide that I have been amending, so any ideas would be appriciated.

Finally how would the slideshow div id+page container be amended so that i can attach this to the feature div id class from code-clean-professional-web-design as this is the template i have been using to create my page.

I hope all of this makes sense and look forward to any comments, help. Many thanks

renzo

August 15th, 2010

Bien me ayudaron bastante con ese slideshow
Gracias

jdavid

August 19th, 2010

I’m using the tutorials edition. Any thoughts on how to automatically set the scroller to move every 4 seconds? …and then back again.

Stephanie

August 20th, 2010

This looks fantastic. Been trying to learn javascript recently but I’m really struggling. Apparently jquery is actually quite old and ajax is the new thing.
In any case, I’ll definitely give this a try to show that I know what I’m doing ;)

Alex

August 20th, 2010

Awesome thanks. fyi I have deployed Phillipe’s modified version (of Stephane’s modified version) on a ‘Big Commerce’ website by creating a custom ‘panel’ and a custom CSS stylesheet. Works beautifully and can be duplicated anywhere on the website – once live you’ll be able to see it here: http://www.theoutdoorroom.co.nz.

Thanks again!

Thomas

August 21st, 2010

Hey, great plugin and tut! One question thought: it seems that my leftControl and rightControl are placed outside the #slideshow div.. how’s that possible? I’m really stuck on this.. Check it here: http://www.thomasplaizier.nl/1/

Thanks in advance

Thomas

August 21st, 2010

nvm got it solved :)

Debo

August 24th, 2010

thanks Jacob, i followed what you did and it worked. once again, thanks. but i have a challenge. i’m trying to make the images slide automatically. how do i achieve this with the jQuery script you posted above?

Kirk

August 26th, 2010

thanks roman
best comment on autoscroll so far
(although it needs fixing for syntax errors for some reason)

this works for me

//starts automatically
var loop=0;
function rotate()
{
setTimeout(function(){
$(‘#rightControl’).click();
loop++;
if (loop<numberOfSlides-1)rotate();
}
,5000);
}
rotate();

william

August 26th, 2010

Great Tutorial!! It helps a lot. Try also this site cincopa.com, it might help you too.

Kelly

September 2nd, 2010

Thank you for the great tutorial! I was also interested in the plug-in made by XuanThanh that was posted here. The link is no longer working. Do you know the URL of this?

Thanks so much for making this easy to understand. I am a jQuery newbie.

Moses

September 5th, 2010

Hello,
Thank you so much for this code!
I was wondering if it is at all possible to have the control buttons load in first and appear before the actual slides are loaded. I have a lot of images in the slider and the buttons don’t seem to appear until a certain number of slides are loaded. I don’t mind if a visitor uses a button before the slide has been loaded. Any help would be really appreciated. Thank you again.

Nirmik

September 7th, 2010

It is very Useful for me and i am also web developer in ahmedabad.

Georgiy

September 7th, 2010

it will be great if some one describe how add items navigation!!!! I’m tired of looking so simple example of div content slider just with jquery….

nii adjiri

September 9th, 2010

Great tutorial. Was looking for a similar effect using j query. Good job there.

Kylebebeau

September 9th, 2010

I used the tutorial, and am running into a problem. It’s probably not a hard fix, but I’m still learning this stuff.

I can’t seem to figure out how to have the scroll start off on the first slide, and end on the last slide. Every time I click the button either way it will slide past my slides to a blank one.

Brian Hoary

September 10th, 2010

Made a webcomic viewer based of of this script, though with a lot of additional coding.

Anyone who wants to look at/use the code for any of their own purposes is free to do so. Just leaving credit here to Jacob for the initial work :]. Thanks fella!!

http://www.levelmanga.com/level.php?page=0&episode=1

Tony Badu

September 12th, 2010

Great Tut!

Currently implementing the idea into one of my webpage deigns.

Just wanted to ask though…. is it possible to name the BG images?

I know we’ve got:
$(‘#slideshow’)
.prepend(‘ clicking moves left ‘)
.append(‘ Clicking moves right ‘);

and its hidden (if you want it to)

but can you add a image title? so that when users hover over the control images text pops up…

the Title” ” HTML mark up

any help would be great thanks

Business Society

September 15th, 2010

OMG, source files included. Keep the good works :)

serradifal

September 15th, 2010

@ nirazul, whats a great idea, thanks, very useful

Ingthor

September 16th, 2010

Looks very nice…

It works on my server but as soon as I adjusted to fit my design it looked perfectly in IE8 but in Google Chrome it’s mess…

If someone can show me a content slider that works great in Internet Explorer AND Google Chrome AND IS EDITABLE, please let me know and I pay for you a trip to Hawaii with hotel, rental car and breakfast

Guess I have to keep on looking :(

Noob

September 16th, 2010

Hi there, thanks for this great slideshow! I have adapted and simplified it a lot for my custom needs, now it´s just what I wanted, except for one thing…the controls don´t vanish as they should, so if anyone clicks on them, eventually the images slide too far and the slide container ends up empty. Could you have a look and help me fix this? Thanks in advance.

This is my code so far:


Cópia 5 de myslideshow

$(document).ready(function(){var currentPosition = 0; var slideWidth = 330; var slides = $(‘.slide’); var numberOfSlides =

slides.length;

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

// Wrap all .slides with #slideInner div
slides
.wrapAll(”)

// 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 controls in the DOM
$(‘#slideshow’) .prepend(”).append(”);

// 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() }}});

Noob

September 16th, 2010

The code was cut off, this is the full one:


Cópia 5 de myslideshow

$(document).ready(function(){var currentPosition = 0; var slideWidth = 330; var slides = $(‘.slide’); var numberOfSlides =

slides.length;

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

// Wrap all .slides with #slideInner div
slides
.wrapAll(”)

// 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 controls in the DOM
$(‘#slideshow’) .prepend(”).append(”);

// 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() }}});

Noob

September 16th, 2010

Darn…the code is being cut off, I´ll send it in parts:


Cópia 5 de myslideshow

Noob

September 16th, 2010

Naw…the HTML is not going, just a part of the javascript…too bad.

Hagge

September 20th, 2010

Many thanks! This tutorial saved my life… :D

Craig

September 22nd, 2010

Great jQuery slideshow tutorial, very easy to follow, and jQuery is definitely my favourite JavaScript library, Thanks!

El garch

September 27th, 2010

Great Job, i didn’t analyse the code, i tried to implement it directely to my page and it works well.
thx for sharing that nice script.I’ll use it in my future projects.
keep working ^^

Anicho

October 10th, 2010

Great work I understood it completely wooo keep it up! I added captions btw to my slideshow using http://web.enavu.com/tutorials/making-image-overlay-caption-using-css/… so now its a slideshow with optional captions :P :)

diesel

October 10th, 2010

Nice tutorial. I worship you for good job.
I added some more functionality and use it in project.
Thanks ;)

Alish

October 16th, 2010

Hello Jacob,

We are thankful to you mate. Me and my team are learning the jquery effects from the depth and found your tutorials very much helpful to us. We were stucked at one place and were not able to solve the error. But, after have a look to your tutorial, we found the problem and our error was solved. Plus, our clients gave us the bonus for the work we provide them and they were pleased with our work.
Great work and very much helpful.
Thank you once again mate!

Cheers! :)

KJ

October 20th, 2010

I’m working on a new folio site just now and found that the absolute positioning wasn’t what I needed. You can position relatively by setting

$(‘#slideshow’)
.prepend(‘Move left’)
.apend(‘Move right’);

to

$(‘#slideshow’)
.prepend(‘Move left’)
.prepend(‘Move right’);

and in the CSS

.control {
position:relative;
}

#leftControl {
float:left;
}
#rightControl {
float:right;
}

KJ

October 20th, 2010

Some bits got cancelled out there by the filter but it should make sense.

Edgar

October 29th, 2010

Can I make more tha one in a HTML??

John

October 29th, 2010

Grate tut. How to put it in blogger. Please Reply me.

maclade

October 31st, 2010

like it.

George

October 31st, 2010

Hi everyone here!
This is a great tutorial congratulations to Jacob Cube.

I try to validate my html page but it returns me 3 errors for lines 12, 24 and 25 of Block 5 Jscript code in this page.

The error says: document type does not allow element “div” here, this message for line 12.

For lines 24 and 25 the errors say: document type does not allow element “span” here.

The document type of the page is xhtml strict. I tried with transitional document type but not fixed.

Some help please?

George

November 2nd, 2010

Never mind!

I found the solution with html validation errors. I put the Jscript code in an external js file named jacobCube.js. So i passed the html validation test.

So simple!

Alex Mielus

November 9th, 2010

http://www.proconsconcept.ro Here is an example of an implementation Jacob, using both images and a video. thanks a lot for creating it! I will be using it on any project that requires a slideshow ;)

Alex Mielus

November 9th, 2010

Forgot about it … one thing I’ve run into while using it. If you don’t see all slides when you run the slider try emptying your cache. That fixed it for me ;)

Skye

November 12th, 2010

Hi,

first of all, this is a great plugin for a simple and clear gallery.
I use this on a website for a fashion brand.

I have a lot of images to slide in this slideshow, showed in a six-cell grid for each slide.

It seems work perfectly in all version of Internet Explorer, Safari e Chrome, but i have some bugs in Firefox 3.5.1 to 3.5.3.
Indeed, when i change page, images scroll with a ugly effect, like slowly scrolling.

This is a problem of Firefox, or i can resolve this matter coding better the slideshow.

Thanks a lot for answers, and sorry for my worst english.

Patrick

November 18th, 2010

Hi, this was a huge help and a great tutorial.
I am trying to expand on this idea by creating a page of thumbnails and when you click a thumbnail the entire list slides off to the left and the relative info slides in from the right. The reverse would happen when you hit the back button. Here is a jpg to help explain
http://i.imgur.com/awPWL.jpg

Can anyone help point me in the right direction?

Thanks!
- P

James

November 20th, 2010

Hello, this is an excellent tutorial and was just what I was after to use in my portfolio. I do have one question though, when I validated the code it came up with a few errors relating to the inside the WrapAll class parentheses.

I’m very new to jQuery and was wondering if there is something I might have missed?

Cheers

James

James

November 20th, 2010

Sorry, I missed out some code there. Was referring to the code inside the WrapAll class in the jQuery. The div id slideInner:

.wrapAll(”)

Marco

November 21st, 2010

Is possible load this script for set a position of control?
for example if have 3 pictures i wont when load script start of the image 2

1 2 3 load 2

ashley

November 22nd, 2010

Hey! LOEV IT! Is there any way to show the images coming up next, but they are faded out until you get to them? Like this?: http://www.vogue.com/parties/high-tech-meets-high-fashion/

Jacob Gube

November 23rd, 2010

@ashley: and everybody. I am currently working on a jQuery plugin for this script. I have taken everyone’s questions and suggestions and will incorporate the big ones in there (such as auto-play, continuous slide, different fade effects).

I will post here for updates on the project.

George Gonçalo

November 25th, 2010

My version:

$(document).ready(function(){

// Slider Transition
// @remake George Gonçalo
// @base Slick and Accessible Slideshow
// @author Jacob Gube

// Vars
var slides = $('.slide');
var nav = $('#slider-nav');

var numberOfSlides = slides.length;

var currentPosition = 0;
var slideWidth = 610;
var timeAuto = 5000;
var timeEffect = 1000;

var autoBack = true;
var Auto = true;

// Start
$('#container').css('overflow', 'hidden');

for (var c = 0; c < numberOfSlides; c++) {
nav.append('' + (c+1) + '');
}

slides
.wrapAll('')
.css({
'float' : 'left',
'width' : slideWidth
});

$('#slide-inner').css('width', slideWidth * numberOfSlides);

$('#slider')
.prepend('Esquerda')
.append('Direita');

// Navigation bar
$('#slider-nav li').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});

$('#slider-nav li')
.bind('click', function(){

var k = $(this).attr('id').split("-");
currentPosition = k[1];

manageControls(currentPosition);

Effect(currentPosition);

return false;

});

// Next and prev
$('.control')
.bind('click', function(){

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

manageControls(currentPosition);

Effect(currentPosition);

return false;

});

// Functions
function manageControls(position){

if(position == 0){ $('#left-control').hide(); } else{ $('#left-control').show(); }

if(position == numberOfSlides-1){ $('#right-control').hide(); } else { $('#right-control').show(); }

if(position == numberOfSlides && autoBack == true){ currentPosition = 0; $('#left-control').hide(); }

$('#slider-nav li').removeClass('active');
$('#slider-nav li#slide-'+currentPosition).addClass('active');

}

function Effect(positionTo){
$('#slide-inner').animate({ 'marginLeft' : slideWidth*(-positionTo) }, timeEffect);
}

function Roll(){
currentPosition = parseInt(currentPosition)+1;
manageControls(currentPosition);
Effect(currentPosition);
}

function Start(){
slideInterval = setInterval(Roll, timeAuto);
}

function Pause(){
clearInterval(slideInterval);
}

// Exec
manageControls(currentPosition);
if(Auto) Start();

});

Hranush

November 30th, 2010

Hi Jacob,

I have the same questions as Marco…regarding loading the second slide first? When I set the var currentPosition = 1; it doesn’t really work properly (the arrows become visible but it’s still loading the first slide). Any help and input and appreciated!

Thank you,

Adriano Maltha

December 5th, 2010

Olá pessoal,
para usar o modo auto-slides basta inserir o seguinte código.

setInterval(function() {
if(currentPosition==numberOfSlides-1){ currentPosition = 0 } else{ currentPosition = currentPosition+1 }
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$(‘#slideInner’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
});
}, 3000);

Boa Sorte!

QL

December 8th, 2010

wow — great script and a lot of feedback.. the final comment ( in Portuguese ) did the trick.. to translate Adriano said..


to use the auto-slide you just need to add the following code


setInterval(function() {
if(currentPosition==numberOfSlides-1){ currentPosition = 0 } else{ currentPosition = currentPosition+1 }
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$(’#slideInner’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
});
}, 3000);

good luck!

this comment feature seems to butcher a number of characters – for example single quotes and dashes, so add this code at the end of the script, but inside the $(document).ready(function(){ call – and watch firebug for errors.

Also, if anyone wants to add a nice hover effect to give descriptions, something like this will do the trick..


$(function () {
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var info = $('.popup', this).css('opacity', 0);

$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;

info.css({
top: +146,
left: -0,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}

return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});

}, hideDelay);

return false;
});
});
});


title
image description..

and some css:


.bubbleInfo { position: relative; }
.popup { position: absolute; display: none; /* keeps the popup hidden if no JS available */ }

QL

December 8th, 2010

oh well.. after seeing some many other comments cut-off in their prime, I should have expected that..

hope you all get the idea and thanks to the author.

Vlad

December 23rd, 2010

Hi there!

Thanks for the great tutorial. The slider work otherwise nicely, but I’m having problems with the navigation buttons. They don’t stay in the #containall-div I created, instead they are always at the borders of the screen.

Here’s how it looks: http://www.vladimirhalinen.com/

Could someone please help?

Thanks and merry Christmas to everyone!

-Vlad, Finland

WD

December 26th, 2010

Hi Jacob, I must say its a great piece of work. I integrated in my new web based application and works like a charm. Thanks very much. The only problem I had was to update the background colors as the arrows had a full bg color in them. thanks a lot again.

Goncalo Espinha

December 29th, 2010

Hi there,

Great sollution you`ve got there.

But is there any way I can insert numeric navigation on this slider?

Thanks ;)

Ash Blue

January 1st, 2011

I know a lot of people are looking for a simple modification to this script to get the slider working. Adriano had a great idea for a simple way to get this working using a timed interval. Problem is the script keeps running and conflicts with next and previous image sliding (results sometimes in two slides sliding instead of one). This event occurs because the interval isn’t being reset when you click next or previous on a slide.

Below I’ve made a modified version of what he posted to take into account intervals with the next and previous button.

// Slider Script
var currentPosition = 0;
var slideWidth = 938;
var slides = $j(‘.slide’);
var numberOfSlides = slides.length;
var slideSpeed = 1000;
var slideChangeSpeed = 5000;

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

// Wrap all .slides with #slideInner div
slides
.wrapAll(”)
// Float left to display horizontally, readjust .slides width
.css({
‘float’ : ‘left’,
‘width’ : slideWidth
});

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

// Insert left and right arrow controls in the DOM
$j(‘#slideshow’)
.prepend(‘Move left’)
.append(‘Move right’);

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

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

clearInterval(autoSlide);

// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$j(‘#slideInner’).stop(true, true).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
}, slideSpeed);
});

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

// Auto slide function
var autoSlide = 0;

autoSlide = setInterval(function() {
if(currentPosition==numberOfSlides-1){ currentPosition = 0 } else{ currentPosition = currentPosition+1 }

// Hide / show controls
manageControls(currentPosition);

$j(‘#slideInner’).stop(true, true).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
}, slideSpeed);

}, slideChangeSpeed);

james

January 6th, 2011

Awsome slider quick question…I’ve been trying to add a pagination feature to this slider and everything I tried has not worked. I first tried using a paginiation custom build and then I used something off of jQuery library and neither worked. So then I tried to see if maybe I can set my pagaination up as external triggers and still no luck…where am I going wrong???? I want to keep the hide feature I don’t want to damage that portion of this feature thats what makes this slider so unique

Maria Castillo

January 7th, 2011

Nice work Jacob! I have a problem, i want to include 3 instances of your gallery in the same page. I’m not very experienced in JQuery so I cannot modify by myself. Anyone has solved this issue?

Hope anyone of you can help me! Thanks

Spelen

January 7th, 2011

Thank you for this amazing slideshow. I’m very excited to use this :-)

I’ll definitly add this to my favourite list of jquery slideshows!

matusalem

January 9th, 2011

Hi to all people,
like this very great job of tutorial and try to customize the window: work very great in FF, Opera and Safari.
But i have more problems of position for the slide-container and a controls in IE 8 (with the same code edited).
Here the code for any kindly suggestion.

.

Slick jQuery Slidehow: Demo

$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 820;
var slides = $(‘.slide’);
var numberOfSlides = slides.length;

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

// Wrap all .slides with #slideInner div
slides
.wrapAll(”)
// 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 controls in the DOM
$(‘#slideshow’)
.prepend(‘Clicking moves left’)
.append(‘Clicking moves right’);

// 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() }
}
});

..

Lorem ipsum….etc.

Mitran

January 12th, 2011

Thanks for the tutorial… i just got her is right time…

Cgbaran

January 12th, 2011

Great tutorial thanks

Geert

January 12th, 2011

Nice job, good slider,

I played with it for a while…
Maybe is this something to add to…
It will make it slide automaticly forwards and backwards…

//####

var NumberOfSlides = 4; // Number of slides
var Delay = 10; // Delay time in seconds…
Delay = Delay * 1000;
NumberOfSlides = NumberOfSlides – 1;
var SlideCount = 0;
var runner = true;

function DoItAutomatic(){
if (runner == true){
if (SlideCount == NumberOfSlides){
runner = false;
–SlideCount;
} else {
++ SlideCount;
}
} else {
if (SlideCount == 0){
runner = true;
++SlideCount;
} else {
–SlideCount;
}
}
currentPosition = SlideCount;
manageControls(currentPosition);
$(‘#slideInner’).animate({‘marginLeft’ : slideWidth*(-currentPosition)},’slow’);
setTimeout(DoItAutomatic,Delay);
}
setTimeout(DoItAutomatic,Delay);

//#####

Hopefully you’ll like it,

Greets
Geert, Netherlands

Kjetil

January 13th, 2011

Hi Jacob Gube,

Thank you for an excellent script. Easy to implement and works perfectly.

I have one tiny question though; Is it possible to have both the navigation arrows visible all the time?

I have tried to modify the code but can not find a solution for this.

Thank you in advance.

Kind Regards
Kjetil

Danny Chrastil

January 13th, 2011

If you want to add the auto slide feature to this great slider just add the following:

# Add this to the top with your other variables
var timer = 4000; // 4 seconds

# Place this after the manageControls() function
function autoMagic(position) {
// Set new position
position = position < (numberOfSlides-1) ? position + 1 : 0;

// Hide / show controls
manageControls(position);

// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-position)
});

// set automagic
var initTimer = setTimeout(function(){ autoMagic(position); },timer);
}
//set automagic
var initTimer = setTimeout(function(){ autoMagic(currentPosition); },timer);

// Hide / show controls
manageControls(position);

// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-position)
});

// set automagic
var initTimer = setTimeout(function(){ autoMagic(position); },timer);
}
//set automagic
var initTimer = setTimeout(function(){ autoMagic(currentPosition); },timer);

Cathy Marvin

January 14th, 2011

Great tutorial! Everything is working great. I would like to add thumbnails below the slideshow. This way people will see the images coming up and click where they want to. Can you point me in the right direction to link the thumbnail with the proper slide?

Thanks for all your hard work.
Cathy

Apie Studio

January 17th, 2011

simplicity matters in design and this slick s.s. got it all.

mokear

January 23rd, 2011

Sorry, my english is very poor, so, i say chinese.
如果能把自动播放和当鼠标位于其上时暂停切换都写出来就好了,各位大侠的留言我都看了看,虽然有人给出了自动播放。但我太菜了,不会用。

scribbleberry

January 23rd, 2011

I like to share with you.

//Pause/Resume at hover
var slidetimer = function (x){
if(slideshow_start_mode == true) {
if(interval != null)
clearInterval(interval);
interval= setInterval(show_next_slide, slide_viewing_time );
}
}
jqslide(‘.slidebox’).hover(
function() {
clearInterval(interval);
},
function() {
slidetimer();
});

Have a nice day ;-)

scribbleberry

January 23rd, 2011

oops,

replace the “jqslide” with “$”

;-)

scribbleberry

January 23rd, 2011

Oh man,

ok,…here the way you like. sorry for the mishaps

//Pause/Resume at hover
var slidetimer = function (x){
if(slideshow_start_mode == true) {
if(interval != null)
clearInterval(interval);
interval= setInterval(show_next_slide, slide_viewing_time );
}
}
$(‘#slidesContainer’).hover(
function() {
clearInterval(interval);
},
function() {
slidetimer();
});

so,…i go to bed,..bye^^

merry

January 23rd, 2011

Thank you for this great article and many suggestion from the readers. I am learning to create one for my website template.

Jonathan

January 25th, 2011

First off, thank you for this wonderful tutorial. I was getting tired of resorting to using plugins all the time!

I just wanted to make the following info available in case anyone else runs into it. I followed your tutorial exactly but had a few errors by the end of it that I managed to handle easily. Here are the fixes I used:

at the end of the manageControls function set return true; so the document.ready script is able to complete

change the function manageControls(position) to manageControls(position, numberOfSlides) and send numberOfSlides as the second argument in the .bind(‘click’, function

lastly, and I think I must have done something wrong here, I had to set .control to z-index:100

Hope this helps someone

memezen

January 28th, 2011

Cool tutorial! Iv came up with slightly modified version and pushed more pixel perfection to achive perfect “masking effect”.

It will be on my blog, lab page for this lies here:
http://bit.ly/dI8qkr

Thumbs up!

RaYZoR

January 28th, 2011

Hi, I want to use this for its nice simple design but there’s so much HTML, CSS and all, that I don’t know how to do it.

Could you guys just post a simple HTML to put in blogger and then let us choose the content and pictures to go along with it? The stuff above is too difficult for me. Thanks.

Parsons Projects

February 5th, 2011

Hello,

I have been playing with this code and using it into a custom slideshow i am creating for my new portfolio site i have put some code below that will let both arrows show at once and not break the slideshow and leave empty space when you click the arrow. This code needs to replace the old bind code and you also need to remove all the manageControls call ins. Hope this makes sense.

$(‘.control’)
.bind(‘click’, function(){

// If first slide
if(currentPosition==0){

// Determine new position
currentPosition = ($(this).attr(‘id’)==’rightControl’) ? currentPosition+1 : numberOfSlides-1;

// If end slide
} else if(currentPosition==numberOfSlides-1){

// Determine new position
currentPosition = ($(this).attr(‘id’)==’rightControl’) ? 0 : currentPosition-1;

// If Anything inbetween
} else {

// Determine new position
currentPosition = ($(this).attr(‘id’)==’rightControl’) ? currentPosition+1 : currentPosition-1;

}

// Move thumbs_inner using margin-left
$(‘#slideInner’).animate({
‘margin-left’ : slideWidth*(-currentPosition)
});
});

By the way great tutorial.

SBC

February 8th, 2011

I am using this on my website. In the slide class I simply have an image. 10 slides so 10 images (1 per slide). After each week I will increase the slides ‘currentPosition’ by one. When I do this, say for instance I set current position to ’2′ representing the 3rd slide, it will go to that position but for some reason displays the image from slide 1 not slide 3 as it should. Any suggestions?

Meeko

February 9th, 2011

I am below even a JavaScript Noob and there seems to be many variations on adding an auto-play function. Add this here, put this there. I’ve tried some and keep getting errors that I don’t know how to correct. I need to add an auto-play to my existing code. Can someone help? Please paste the code in full, not just the auto-play addition if possible.

HERE IS THE CODE: NEED TO ADD AUTO-PLAY FOR ABOUT 5 SECONDS PER SLIDE.

$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 994;
var slides = $(‘.slide’);
var numberOfSlides = slides.length;

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

// Wrap all .slides with #slideInner div
slides
.wrapAll(”)
// 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 controls in the DOM
$(‘#slideshow’)
.prepend(‘Clicking moves left’)
.append(‘Clicking moves right’);

// 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() }
}
});

Paladyn

February 12th, 2011

Hi, you have made really great tutorial!
But as a jQuery beginner, i`m not able to modify script to the way i like to see it working. So i ask for a little help :)
I like to move slider by image width. I`ll show it in graphical way (by numbers i mean image number and size, by [] -> slide width):
[11222]334444 -> 11[22233]4444 -> 11222[334444]

So every image can be other width (same height) and i want to move only to next image. My biggest problem at this time is to take width size from every image (it is taking only from first one).
I wonder if i can store images in array and then just create who tags on side by jQuery.
I will appreciate any suggestion.
Thanks again for tutorial!

George E.

February 16th, 2011

I would like to start off by saying thank you to Jacob for this. I have been looking high and low for something similar. I am a noob at jQuery and for my project require a continuous loop so that the users can go left or right. Any update on this?

Thanks again.

Khanh

February 22nd, 2011

Adriano Maltha – beautiful – thank you.

Dariush

February 28th, 2011

thank for the details, but any easier way to do it?

Ted

March 1st, 2011

hey thanks for the great module. i saw above that you were going to work on a version that allowed for multiple instances. has any progress been made on that? thank you.

sue

March 8th, 2011

changing the start position of slider
Not going to copy paste the whole code again but here it is.

//set the new current position
var currentPosition = 1;

Add animate to the load event.
Paste right below manageControls(currentPosition);. It will auto slide to new postion.

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

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

Kosta

March 8th, 2011

Love this module.
Does this script allow for a non-animated top layer? ie. I am thinking of adding the site navigation on top of the scrolling objects but I don’t want the nav links to scroll. Can I add the links in a unique div as well?

Thanks!

Kosta

March 8th, 2011

Can we auto slide in say 7 sec. intervals?

sue

March 8th, 2011

slide show on different pages with different start positions.
First set the currentPosition var as global. Just throw it outside the $(document).ready(function(){.

var currentPosition;

$(document).ready(function(){
//var currentPosition = 0;

then add this to your pages

document.body.onload=retreiveCurrentPosition();
function retreiveCurrentPosition() {
currentPosition=2;
}

This only worked for me if made sure to add .animate to the load, right after this line.
manageControls(currentPosition);

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

sue

March 8th, 2011

small fix for ie. Change

document.body.onload=retreiveCurrentPosition();
function retreiveCurrentPosition() {
currentPosition=2;
}

to

document.onload=retreiveCurrentPosition();
function retreiveCurrentPosition() {
currentPosition=2;
}

seems ie has a problem with
document.body.onload

Lucky James

March 9th, 2011

Excellent tutorial…. it helps a lot… thanks…

Benneth Okeoma

March 9th, 2011

Nice one. real nice

sue

March 12th, 2011

had a problem with slider inside nested table, in the safari mac browser. But i seemed to have fixed it without completely destroying the whole thing.

I believe the problem lies here
.wrapAll(”)

The .wrapAll isn’t kicking in.

All i did was add another div to slide html

slides here

and then changed the
$(‘#slidesI’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)

to match. Seems to be working everywhere now.

mehmet kaya

March 18th, 2011

Hello, I designed these app for my websites but the container is on the right of screen on Mozilla / Firefox , but on IE thats ok.
http://www.anketciniz.com/mk/

redlex

March 22nd, 2011

hi hey thanks for the great module. i saw above that you were going to work on a version that allowed for multiple instanceshttp://colorfashion.co.cc/. has any progress been made on that? thank you.

Onur

March 23rd, 2011

Very good in My web site templates. Thank u for slider

Chris

March 24th, 2011

Earlier XuanThanh posted a link to his version with pagination so users could easily “slide” to particular pages. This is EXACTLY what i need but its no longer hosted on his site. I was wondering if anyone had a link to it by chance or could upload it somewhere else for me.

Thank you in advance! and great tutorial!

Philips Hai

March 26th, 2011

Hi Jacob,
I will follow your guides to change my WordPress template on my site. Can’t wait for the result.Thank

Philips

Michelle

March 27th, 2011

Hi Jacob,

Brilliant work on this i am very impressed.

Michelle

Elliott

March 29th, 2011

Has anyone found out how to include thumbnails that slide to the desired position?

I can get it to jump, but there is no transition.

Werel

April 6th, 2011

Tutorial is very helpful. Is this correct?:
slides
.wrapAll(”)
// Float left to display horizontally, readjust .slides width
.css({
‘float’ : ‘left’,
‘width’ : slideWidth
});

Ajay

April 13th, 2011

First of all, thanks @Jacob for this excelent tutorial I need a image hover Java script but hover should be smooth like flash. i have found this but in jquery and it is not working on IE. can anyone help me?

Rajeev Sinha

April 19th, 2011

Autoplay function???

Mimi

April 22nd, 2011

This is not working at all with the keyboard. Not sure why it’s supposed to be “accessible”?

Sandy

April 23rd, 2011

This is amazing.

Thanks

Marino

April 28th, 2011

is possible to paginate the slides with links? example: 1,2,3, etc. thanks!

Hendrik

May 3rd, 2011

Hey, great tutorial! Works fine!
Now I like to place more than one slideshow on the same page.
But all slides are shown in the first slideshow.

How and where do i have to edit the code to fix it?

Thanks!

Nico

May 5th, 2011

Excelent tutorial! the js code is very clean.
Thanks!

Ben

May 5th, 2011

Hi it works fine for me too!
and i have exactly the same problem as Hendrik!
how can we get more than one slideshow on the same page ?

sahil

May 5th, 2011

hi, i have question. i did not get the heading “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.

jojo

May 7th, 2011

excellent tutorial.
can i adjust the motion speed?
i would like to make it slower is that possible?
thanks in advance jojo.

Qaiser

May 9th, 2011

nice tutorial I’m personally trying to add clickable navigation under the images. both in form of dots and 1,2,3… i am enjoying editing the code :-)

Beben Koben

May 11th, 2011

excellent explained…thanks

Blink

May 13th, 2011

Hi,

Nice tutorial.
I’m using it on a website and have a question.
Is it possible to show the number of the position as

1 2 3 4 5 6 and so one ?

Thanx

Chris

May 17th, 2011

Love the slider! I can see how I can start at a different position by changing the
var currentPosition = 0; to another number.
But how do I change the start number based on a hyperlinked parameter.

I’m showing the slider at the top of teh page, with 20 products below. it loops through at teh top but I’d like to change the start position when I click on a product below.

neok

May 21st, 2011

does not for for ie7-ie8

Laptophobo

May 23rd, 2011

Thank you so much for sharing your knowledge with us. I’ve downloaded the files and it’s nearly working fine. But my versions keep on adding a blank space (looks like there should be another slide, but they’re all accounted for) and the beginning and end of the show.

I’m new at jQuery.

matt

May 25th, 2011

Hi,

Is it possible to get hover effect on those left and right buttons ?

If so … how can I make that ?

SuringMiKe

May 27th, 2011

Thank you!! This was a life saver, and your tutorial was really easy to follow. Please keep it up. We are all most grateful!

Christopher.

May 27th, 2011

Hi. Excellent slider, very easy to use.

Is there a way to pause an audio file once you click next? For example, if I have audio file 1 and click next, I would like it to stop and play audio file 2 instead. I have looked all over the internet for an answer to no avail.

Thanks!

Nick

June 1st, 2011

Hi

Fantastic tutorial and script – I have been using it for over a year. I have just noticed though that IE9 isn’t rendering the buttons on either side of the slide container. Is anyone else having the same problem?

Thanks!

Viktor Nagornyy

June 2nd, 2011

Hey,
Thanks for a cool tutorial. It seems like slideshow js code conflicts with other js. Unfortunately, using another CMS I don’t have access to that js. Is there a way to include noConflict with your slideshow js script? Thanks.

Anthony

June 4th, 2011

Like the slider very muc.. good stuff.. My only suggestion is please make it auto slide as well. or give the ability to turn auto slide on or off

vasudhevan

June 5th, 2011

this is an excellent tutorial

cupcrack

June 8th, 2011

Excellent tutorial Jacob! Worked for me the first time.

Vikas Rana

June 9th, 2011

For Auto Scrolling after 5 sec….

Vikas Rana

June 9th, 2011

For Auto Scrolling after 5 sec…. Here is the code
var a=0;
function autoslide(gg)
{
a=a+gg;
currentPosition=a;
if (currentPosition == 3)
{
a=0;
}
callauto(a);
}
t=setInterval(‘autoslide(1)’, 5000);

function callauto(val)
{
var currentPosition = val;
var slideWidth = 960;
var slides = $(‘.slide’);
var numberOfSlides = 3;

$(‘#slidesContainer’).css(‘overflow’, ‘hidden’);
slides.wrapAll(”)
width.css({
‘float’ : ‘left’,
‘width’ : slideWidth
});

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

manageControls(currentPosition);

currentPosition = ($(this).attr(‘id’)==’rightControl’) ? currentPosition : currentPosition;

manageControls(currentPosition);

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

function manageControls(position){

if(position==0){ $(‘#leftControl’).hide() } else{ $(‘#leftControl’).show() }

if(position==numberOfSlides-1){ $(‘#rightControl’).hide() } else{ $(‘#rightControl’).show() }
}

Efie

June 10th, 2011

This was a really well written tutorial. Easy and simple.

If you can reach, give yourself a well deserved pat on the back!

Excellent work!

Helenmary

June 16th, 2011

Great tutorial, easy to follow and very informative. I am using this with an ASP.net site and dynamically inserting the info on page load. This lets me pull the Title from the .jpg to use as a caption for the picture.

I ran into one small problem with Firefox 4.0.1. It didn’t want to recognize the mangeControls function when the definition was below the call to the function. I just moved the function up in the code so that it comes right after the arrow inserts and now it works fine.

Thanks for making this available!

Heather

June 18th, 2011

I haven’t tried this out yet, but this looks like a great tutorial! Exactly what I was looking for!

Sharon

June 19th, 2011

Nice tutorial and very easy to follow.

Jose

June 21st, 2011

I’m just learning jquery and this article/tutorial is very easy to understand, clear, informative and to the point. These quality of tutorials are why I regularly visit this website.

Thank You

dpmops

June 23rd, 2011

Hi Jacob,

There is a problem with the code when you add like 10+ slides. Each time you click on the next button, the content shifts a few pixels to the right… When you’re at slide 15 or so, you can see a clear gap with a piece of the previous slide. This gap keeps increasing each time you press next.
I made a screenshot of the problem: http://i.imgur.com/xjNUk.jpg

It’s clear to see when you put a red border property to the .slide class.

Any idea how to resolve this?

tspot

June 25th, 2011

Hi, thanks for this excellent tutorial. I try implement this in Django

anemogenitries

June 27th, 2011

Very nice slideshow can you put a demo please :) ???

Gregor

June 28th, 2011

Awesome slideshow. Thanks to its structure, I customized and integrated it into my website. Nice job :)

HGF

June 28th, 2011

Hello,

I am trying to put the javascript in an external file. I am new to js so can you tell me how to call the function? I just copied the script from up above and saved it into a filled called lookbook.js. I then called that file in the but how do I get it triggered?

Thanks!

benbenasc

June 29th, 2011

Thank you so much for making this available! I have a big question though: I am a typoe3 user and is limited in the sense that I cannot use extensions/plugins – can I use this solution and if so how?

Any response would be warmly appreciated!

vahid

July 10th, 2011

Great tutorial, when I am using this with an ASP.net site with master page and content slider not work properly. pause and play button doesn’t show and all image and control show in slideshow.
please help me…
tanks

BJW

July 11th, 2011

I am also trying to use this code and struggling with getting the auto slide to work.

Can someone paste the complete code with autoslide?

Everytime I have used one that has been previously posted they don’t seem to work.

Thanks Bryan

Shohreh Ferdowsi

July 12th, 2011

I love this site. It has the best JQuery slideshows ever! Thank you for a nice tutorial!

Jose

July 14th, 2011

paste this code inside the
$(document).ready(function(){
———————-
——————— etc.

function autoshow(){
//alert(‘start’);
currentPosition = currentPosition+1 ;
if(currentPosition==numberOfSlides){
currentPosition=0;
}
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$(‘#slideInner’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
});
setTimeout(autoshow, 5000);
}
setTimeout(autoshow, 5000);

});
}

Ian

July 18th, 2011

Is there way I can have multiple instances of the slider by duplicating the code? Which code would I need to duplicate exactly?

ignacio

July 18th, 2011

any working solution for auto slide???

Cameron

July 20th, 2011

Cut through some snippets here and got this to work like a charm to Auto-Show, and to Auto-Restart

[quote]
//starts automatically

var loop=0;
function rotate()
{
setTimeout(function(){

$(‘#rightControl’).click();
loop++;

if (loop=numberOfSlides-1) {
loop=0;
currentPosition=0;

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

rotate();
}
}
,3000);
}
rotate();

[/quote]

Anish

July 23rd, 2011

Great Tutorial.you explanation is perfect.Keep Up this good work..

Alessandro

July 25th, 2011

Hi guys, I have a problem with vimeo videos on my slideshow.
If you take a look on my website (www.meonmysofa.com) get to the “portfolio area” and click on the last “multimedia” work, you can see a video slideshow.

I’d like to stop one video if I go and check another one? Do you know what can I do?

ignacio

July 25th, 2011

i make some changes to cameron auto-show…
it’s work fine.

// — autoshow ———
var loop=-1;
function rotate(){
if (loop==numberOfSlides-1) {
loop=0;
currentPosition=0;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$(‘#slideInner’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
});
}
$(‘#rightControl’).click();
loop++;
setTimeout(rotate, 5000);
}
rotate();
// —-autoshow ———–

Mehar

July 26th, 2011

very nice tutorial.it helped me alot.
Nice job.. :)

ignacio

July 26th, 2011

put this after variables for a auto-show
its work perfectly

// — autoshow ———
function rotate(){
if (currentPosition==numberOfSlides-1) {
currentPosition=0;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$(‘#slideInner’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
});
}else{
$(‘#rightControl’).click();
}
setTimeout(rotate, 3000);
}
rotate();
// —-autoshow ———–

Marco Avellaneda

August 11th, 2011

thank you ver much Jacob, your gallery is clean and elegant.
I only changed the widths to percentages to be able to use with differentes layouts.
And added the “autoshow” from Ignacio (thankyou ignacio and cameron)

Dan

August 16th, 2011

Awesome tut, exactly what I’ve been looking for. Like you said unlike a plugin we’re able to learn from this.

Which bring me to my question; When JS is disabled I need people to scroll horizontally, I have removed the margin:0 auto; and placed the float like you suggested but still no joy.

Here’s my code – Please and thank you :)

#slideshow #slidesContainer {
float:left;
width:350px;
height:90px;
overflow:auto;
}

#slideshow #slidesContainer .slide {
float:left;
width:115px;
height:90px;
margin:0 30px 0 0;
}

D

Mano

August 25th, 2011

Please, write final complete steps (for dummies)) to realize auto-slide function for this tutorial. Thx!

Martijn Drenth

August 25th, 2011

Hi,

Great tutorial and very easy to use!

But i have one question. Is it possible to get the slideshow working with both arrows and links?

Example:

————-

On the left i have a list of links of my work.

On the right i have the slideshow with arrows. The slideshow contains the images of my work and info.

————-

With the arrows i can slide, that i understand, and it works perfectly. But how can i make it possible that the slideshow also slides when clicking on one of the links on the left.

Kind regards,
Martijn Drenth

victor

August 25th, 2011

excelente el toturial, saludos.

Filipp

September 1st, 2011

Very nice, but is there any way to make autoplay with time delay?

Andrea Mezzanotte

September 5th, 2011

For anyone who asked for multiple instances (Ian) I made an object-style version of the code with some other changes that allow multiple slider in the same page.

You can see it working at

http://www.offcode.it/javascript/slideshow/

- multiple instance
- autoplay
- delay on autoplay
- custom prev|next buttons
- some dynamic css (width,heigth)
- when in autoplay mode, changed the way to go back to first slide: no more slide-back (to bad when having a lot of slides) but just fadeOut+fadeIn
- added Start and Stop function
- some code optimization

Thanks for everyone contribution
I hope you like it

Nick

September 6th, 2011

Thanks a lot! But can I use it commercially, via a template?

Sven M.

September 13th, 2011

Great slideshow and easy to use. Thanks a lot

artrayd

September 14th, 2011

I used this code for slideshow, but now how I can stop the slideshow, when user press next or prev button?

paste this code inside the
$(document).ready(functiona(){
———————-
——————— etc.

function autoshow(){
//alert(‘start’);
currentPosition = currentPosition+1 ;
if(currentPosition==numberOfSlides){
currentPosition=0;
}
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$(‘#slideInner’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
});
setTimeout(autoshow, 5000);
}
setTimeout(autoshow, 5000);

});
}

shan

September 14th, 2011

great article. very helpful.
thank you very much

Bjik

September 16th, 2011

please help me, how must I put the preloader in to the slideshow code

Marcia

September 20th, 2011

I was wondering if I want to have multiple slide shows on one page? Is there an easy way to add more script to have 3 slide shows on one page?

ed

September 22nd, 2011

Hi Guys

Sorry for my ignorance how ever i am really stuck with this code.
I am no coding guru and im pretty new to it all.

My problem is that i have added the java from the above guide to a html page i have been playing with and it look and works really well in on my Mac in FireFox, Chrome and Safari. However, when i open it on a windows machine i can only get it to work in Chrome. IE and FF are simply displaying a vertical slider bar.

Any ideas ?

my full code is the following…

$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 903;
var slides = $(‘.slide’);
var numberOfSlides = slides.length;

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

// Wrap all .slides with #slideInner div
slides
.wrapAll(”)
// 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 controls in the DOM
$(‘#slideshow’)
.prepend(‘Clicking moves left’)
.append(‘Clicking moves right’);

// 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() }
}
});

 

Thanks

Lucas del Río

September 22nd, 2011

I’m needing to make this work automatic but I can’t, any help please!

Jeff

September 24th, 2011

Hi Jacob, how’s the jQuery plugin for this script. I’m looking forward to the auto-play & continuous slide. Many thanks

Melange

September 24th, 2011

Great slideshow. But I don’t want to have those big arrows on either side of my images. I’ve created much smaller arrows that actually parse on the lower right side of my images. I’ve positioned them and they are working fine.

This is the problem. Something somewhere, certainly in the JavaScript, is continuing to add extra space on the left and right side of my images – as if the arrows are still there. I’ve tried everything. Right now the slideshow container is so large it’s parsing outside of it’s container. All of my css is programmed for the 600px width of my slideshow (without arrows). Any suggestions on how to modify the JavaScript. My JS is pretty rusty.

resistance wire

September 25th, 2011

please help me,Can someone paste the complete code with autoslide?

Melange

September 25th, 2011

I hope someone read my previous plea for help. Here is some info that should assist. First, I’ve now got everything parsing inside the correct containers. But JavaScript is definitely still leaving space for the arrows.

Here is a link to the file with no JS:
http://www.10milerun.com/bounce_draft/noJS.html
That ugly purple image with the blue border is the slideshow. Contrasting colors are great when working out bugs. The white rectangle on the lower right side is where the arrows should parse.

Now here is the file with the JS added:
http://www.10milerun.com/bounce_draft/evrything.html

Everything is in that file. You can “View Source” to see css and JS. The arrows do function, but JS is continuing to provide space for the arrows on the right side of the images. It’s leaving space on the right side because of the way I’ve positioned class .slide (margin-left:-30px;). Changing css every which way does not fix the problem.

Can a JS guru help me?

Pomplemouse

September 29th, 2011

I realize that I’m a little late to the party, but I’m a big fan of this script. A couple people in the comments are asking about making it work with lightbox. I managed to get it to work with Slimbox 2 with relative ease. http://www.digitalia.be/software/slimbox2

Tomy

October 5th, 2011

Your information help me a lot. Good job.keep it up. Thanks!

TerryJ

October 5th, 2011

Excellent code! Love it! I am looking to add 2 different things to this, first, how to get it to start back at the first slide, when it reaches the end. Second, where to add .click events in it to get a div on the page to change visibility with each slide. Does that make sense? Basically have a slide show above and text below in hidden and visible divs, but I want the hidden divs to become visible as the user changes the slide…

simo

October 7th, 2011

hello, thanks for your script. im trying to display pics pulled from a sqlite database, is that possible? i’ve added an “echo” with the path of the DB url from the images, put i just see a simple img (i think i need an array, dont I?)

simo

October 7th, 2011

nevermind, it was already workin, i didnt upload the img folder so i didnt see the arrows :)

Ahmet E.

October 15th, 2011

@Adriano Maltha

Thanks. Your codes are working for me.

Brittany

October 17th, 2011

Hey Guys!!

I am trying to learn about how to do this. But whenever I copy and paste the javascript code to my website, it won’t work. (yes I am a complete noob at this) I can get up the css and html all working. But for some reason the javascript won’t work. It has linked fine. Anyone else have this problem?? And if so how do you fix it???

Thanks

Tanya Delaney

October 22nd, 2011

Hi Jacob, I am grateful for this script – its terrific! I’m trying to do something creative with it, and I had a question. I am trying to implement more than 1 slider on a page. Is there a way to do this? While I have managed to reproduce the code, it breaks. I’m positive it’s something simple. Can you give me some insight on a simple way to put more than 1 slider on a page and have each one work independently of the others?

Thanks in advance. Its terrific code and I can’t wait to finish my project and credit you with high honors.

Best Regards,

Tanya

Diego

October 27th, 2011

Very nice script, thx!!!

How to pass automatically to the slides?

artrayd

November 3rd, 2011

Great tutorial!

I did a little upgrade for this script. I used Jose July 14th, 2011 code and added function to stop slideshow, when pressing on arrows.

I hope this code will useful!

/* Javscript Document */

$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $(‘.slide’);
var numberOfSlides = slides.length;
function autoshow(){
//alert(‘start’);
currentPosition = currentPosition+1 ;
if(currentPosition==numberOfSlides){
currentPosition=0;
}
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$(‘#slideInner’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
});
timeOut = setTimeout(autoshow, 5000);
}
timeOut = setTimeout(autoshow, 5000);

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

// Wrap all .slides with #slideInner div
slides
.wrapAll(”)
// 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 controls in the DOM
$(‘#slideshow’)
.prepend(‘Clicking moves left’)
.append(‘Clicking moves right’);

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

// Create event listeners for .controls clicks
$(‘.control’)
.bind(‘click’, function(){
// stop animation
clearTimeout(timeOut);
// 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() }
}
});

Michel Kogan

November 3rd, 2011

Thanks for this tutorial.
for RTL layout do these changes:

‘float’ : ‘right’,
and
‘marginRight’ : slideWidth*(-currentPosition)

william banks

November 8th, 2011

Cheers buddy I have a better understanding of what you can learn in an hour reading and seeing, this was so helpful, I am building a website at the moment I think include it.

can you resize the image to be bigger?

Thanks.

Ath

November 17th, 2011

I really like this tutorial but i need some help.This tutorial display only one div() but want to show once with two div.

First slide show:
Content A
Content B

Second slide show:
Content C
Content D

And I don’t want to do like this:

Content A
Content B

Content C
Content D

Kindly let me know, if you don’t understand what i mean.

Thanks

Fotovoltaika thessaloniki

November 20th, 2011

Michel kogan i made the changes and work perfect! I would be still happy if someone has a demo… :)

Li

November 21st, 2011

Does anyone know how to make the slider loop continuously instead of rewinding when it comes to the end or to the start? I guess you just have to reposition the slides but I am new to JavaScript so any help would be greatly appreciated.

dee

November 29th, 2011

is there an easy way to change width & height ?

ive been going through changing CSS like #slidecontainer width & height on firebug and it looks like you have to change a lot just to do this..

my arrows are all over the place..:(

Cristiano

November 29th, 2011

Thanks, very good!
Obrigado, Muito bom!

apokriatika

December 11th, 2011

Nice slideshow keep up! jQuery is awesome!

Alessandro

June 15th, 2012

Very nicely explained, after revising it one more time I will try to make it responsive and add few tabs if the user wants to jump from one slide to another.

Thank you

asugrue15

October 9th, 2012

Anyone having trouble with copying in the auto play code; be sure to replace the ‘ in the copied text. It replaced ‘ with ` and this broke the javascript for me!

Deanne

October 10th, 2012

This is an excellent tutorial. I am running into issues though trying to remove the JQuery ocde into an external ile and linking to it and having it still work. Basically I am taking all the code from the Block 5 script and pasting it into a .js file. In the header (just before the tag of my html page i am referencing the following:
<!——>

After doing that I see the scrolls instead of the arrows. Is there a flaw in my linking methods? I am new at this!

Robert

November 19th, 2012

Hey

Great tut. I am having an issue with adding multiple slideshows on my page. The images will not load. I am pretty sure it is not set up to just add multiple slideshows without changing the script.

Any ideas?

Thanks.

Vili G

March 4th, 2013

I found this one very usefull online slideshow creator and it’s totaly free: http://www.comslider.com :)

Tim

March 6th, 2013

Brilliant, its really efficiently written. thanks

Arun

September 22nd, 2013

ya using Jquery plugin or slideshow is an good idea if you want to enhance the loading speed of your website, nice tutorial i configured it successfully reading your instructions

Leave a Comment

Subscribe to the comments on this article.