Create a Slick and Accessible Slideshow Using jQuery

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

Accessible Slideshow.

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

Final Result

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

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.

slick_accessible_slideshow.zip (ZIP, 2.8 MB)

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!

256 Comments

surreal

May 18th, 2009

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

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

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

Marco

May 18th, 2009

Nice one Jacob, very detailed tut.

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

a img { border:0 }

Keep up the great work!

Brandon

May 18th, 2009

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

Tyler

May 18th, 2009

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

Jacob Gube

May 18th, 2009

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

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

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

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

BillyG

May 18th, 2009

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

Marco

May 18th, 2009

Haha, “told you so” :P .

Anyway, it looks pretty sleek now; Well done!

Jacob Gube

May 18th, 2009

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

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

Albert Pak

May 18th, 2009

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

fred

May 18th, 2009

Jacob,

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

Kayla

May 18th, 2009

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

Stephane

May 18th, 2009

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

Joe McCann

May 18th, 2009

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

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

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

Kawsar Ali

May 18th, 2009

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

Jacob Gube

May 18th, 2009

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

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

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

Marie Poulin

May 18th, 2009

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

Dicky

May 18th, 2009

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

Roberto

May 19th, 2009

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

Thanks!

Jacob Gube

May 19th, 2009

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

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

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

Ericramz

May 19th, 2009

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

Becka11y

May 19th, 2009

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

Jason Garvey

May 19th, 2009

awesome, thanks.

Yes, auto slider would really complete it.

Jason

Ian

May 19th, 2009

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

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

Still, nice technique with nice fundamentals.

Blue Blots

May 19th, 2009

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

Fabio

May 19th, 2009

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

Jake

May 19th, 2009

Nice Tutorial!

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

Jacob Gube

May 19th, 2009

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

Excess

May 20th, 2009

AWESOME slider. GREAT work. MANY thanks.

Couple suggestions for you to think about when bored:

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

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

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

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

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

Gobias

May 20th, 2009

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

Keep it up!

maximum7

May 20th, 2009

first example not work

einwebdesigner

May 20th, 2009

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

EricB

May 20th, 2009

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

Jacob Gube

May 20th, 2009

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

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

JohnW

May 20th, 2009

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

einwebdesigner

May 20th, 2009

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

Vivekanand

May 20th, 2009

Hi Jacob,

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

Jacob Gube

May 21st, 2009

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

Jacob Gube

May 21st, 2009

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

greg

May 21st, 2009

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

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

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

I don’t mean to offend anyone,
Cheers!

Matt McGuire

May 22nd, 2009

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

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

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

Roger

May 22nd, 2009

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

Jacob Gube

May 23rd, 2009

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

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

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

Garf

May 23rd, 2009

Hi,

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

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

fractalbrothers

May 23rd, 2009

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

Jan

May 23rd, 2009

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

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

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

firdaus

May 23rd, 2009

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

John Kary

May 24th, 2009

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

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

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

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

Joe

May 24th, 2009

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

Jacob Gube

May 24th, 2009

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

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

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

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

You have to think about flexibility John.

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

Jan

May 24th, 2009

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

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

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

Looking forward to hear from you.

Joe

May 24th, 2009

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

Russ Murray

May 25th, 2009

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

frankybee

May 27th, 2009

Hi!

This is a nice application!

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

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

Thanks for your good work!

jeff

May 28th, 2009

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

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

any idea?

thanks

Joe

May 31st, 2009

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

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

pekk@

June 1st, 2009

This i a gallery not a slideshow

Henry

June 2nd, 2009

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

Jamey

June 4th, 2009

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

a

June 10th, 2009

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

Jacob Gube

June 10th, 2009

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

Daniel

June 15th, 2009

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

xoozlez

June 16th, 2009

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

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

Jacob Gube

June 18th, 2009

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

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

Darwin Santos

June 19th, 2009

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

Darwin Santos

June 19th, 2009

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

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

would it work?

einw

June 21st, 2009

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

XuanThanh

June 22nd, 2009

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

Jacob Gube

June 22nd, 2009

@XuanThanh: Nice one, thanks!

Darwin Santos

June 22nd, 2009

@XuanThanh: Thanks!

xoozlez

June 23rd, 2009

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

Tomas

June 23rd, 2009

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

XuanThanh

June 23rd, 2009

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

Zwamb

June 23rd, 2009

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

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

XuanThanh

June 24th, 2009

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

Zwamb

June 24th, 2009

Sorted! What a wonderful plugin!

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

Stephane

June 26th, 2009

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

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

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

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

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

Jacob Gube

June 26th, 2009

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

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

Jon

June 29th, 2009

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

Awesome plugin/script, kudos to all its contributors!

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

Chregan

July 2nd, 2009

Hey,

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

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

Thank you very much for this.

take care,
Chregan

Wallace

July 3rd, 2009

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

Tabs

July 7th, 2009

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

Jacob Gube

July 7th, 2009

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

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

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

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

bogo

July 10th, 2009

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

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

});

many thanks

Joshua

July 10th, 2009

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

val

July 14th, 2009

Great tutorial, thanks! Nice and easy.

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

Jacob Gube

July 15th, 2009

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

harrison v

July 15th, 2009

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

harrison v

July 15th, 2009

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

val

July 19th, 2009

@Jacob:

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

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

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

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

snowgrind

July 28th, 2009

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

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

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

please help

Blarnee.com

August 1st, 2009

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

Maxxis

August 3rd, 2009

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

Any ideas?

The form submits via GET 100%.

Maxxis

August 3rd, 2009

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

Trying to establish the cause.

Maxxis

August 3rd, 2009

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

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

LOL. Commented the line out. Works perfectly.

Matthieu

August 6th, 2009

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

Jacob Gube

August 6th, 2009

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

Matthieu

August 6th, 2009

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

Jacob Gube

August 7th, 2009

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

Brian

August 10th, 2009

Hi Jacob,

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

I want to use a slider instead of an iFrame.

thanks

chris

August 12th, 2009

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

Travis

August 12th, 2009

Hi Jacob

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

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

$ is not defined. Line 110.

That’s on your demo page for the slider.

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

Travis

August 12th, 2009

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

chris

August 12th, 2009

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

Joe

August 13th, 2009

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

Eric

August 13th, 2009

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

What is the code for – Automatic return to the beginning

Im sure its something very easy.

Thank you.

Qurrat

August 14th, 2009

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

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

Robert

August 14th, 2009

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

thx!

Robert

Fran

August 14th, 2009

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

Regards!

Travis

August 15th, 2009

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

Dave

August 20th, 2009

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

Andy

August 22nd, 2009

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

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

Dave

August 23rd, 2009

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

chris

August 24th, 2009

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

Andrew

August 26th, 2009

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

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

It otherwise appears to be working fine.

Any suggestions?

popularsite.ru

September 2nd, 2009

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

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

Regards.

Valberg

September 7th, 2009

Great tutorial, thanks for that!

Glen

September 11th, 2009

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

Martha

September 14th, 2009

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

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

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

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

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

Thanks in advance for any guidance you can give me!

Martha

September 14th, 2009

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

PSD to HTML

September 14th, 2009

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

Once again thanks ;)

Agénor

September 15th, 2009

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

Cazman

September 16th, 2009

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

Christopher

September 17th, 2009

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

Donna

September 19th, 2009

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

David Riveroll

September 25th, 2009

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

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

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

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

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

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

Ranjith Siji

September 25th, 2009

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

Toan

September 29th, 2009

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

Mec

September 29th, 2009

Hi ..
thanks for the tutorial ..

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

Ryan

October 1st, 2009

Worked like a charm, very nice.

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

Djavan

October 3rd, 2009

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

Ioannis

October 5th, 2009

Thanks for this nice tutorial.

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

Anthony

October 7th, 2009

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

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

Frederik

October 13th, 2009

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

Mec

October 13th, 2009

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

It will be a great help
Thanks

Louis

October 19th, 2009

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

Thanks…great work.

Louis

October 19th, 2009

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

Thanks.

Karan

October 20th, 2009

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

Nuno Costa

October 21st, 2009

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

Pavan

October 22nd, 2009

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

MikeyBoy

October 22nd, 2009

Is it easy to make a Vertical version of this?

marcos cerutti

October 22nd, 2009

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

Cheers

Lincster

October 24th, 2009

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

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

TIA!!

ViMal

October 24th, 2009

Great one!. Thanks for explaining step by step.

Simmo

October 25th, 2009

Hey,

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

Cheerz

Pozycjonowanie Stron

October 31st, 2009

Nice tutorial :)

James Tang

November 3rd, 2009

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

NitroD

November 3rd, 2009

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

THank You;

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 900×300px 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"

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.

Final Result

Download source files

Setting the foundations

Block 1: HTML markup

Styling the slideshow

Block 2: #slidesContainer CSS

Block 3: .slide class CSS

Left and right arrow CSS

Block 4: Controls

The best part… JavaScript

The theory

Block 5: The entire jQuery script

Creating some objects

Block 6: Variables and constants

Removing the scroll bar

Block 7: Changing CSS overflow property value to hidden

Inserting a div in the DOM

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

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

Styling the Slideshow slides in JavaScript

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

Inserting the controls in the DOM

Block 11: Inserting the controls in the DOM

Managing the left and right arrow controls with a function

Block 12: the manageControls() function

Call manageControls() on DOM ready

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

Binding click events to the controls

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

Updating the value of currentPosition

Block 15: Ternary operator to set new value of currentPosition

Calling manageControls() after updating currentPosition

Block 16: Calling manageControls() inside .bind method

Animating the slides

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

In summary

Feedback? Questions?

Related content

256 Comments

surreal

Tyler

Kawsar Ali

Becka11y

EricB

JohnW

greg

Roger

Garf

Jan

Joe

Jan

Joe

frankybee

jeff

Joe

pekk@

Jamey

a

Daniel

xoozlez

Darwin Santos

Darwin Santos

XuanThanh

Darwin Santos

xoozlez

Tomas

XuanThanh

XuanThanh

Tabs

Joshua

Maxxis

Maxxis

Maxxis

Brian

chris

Travis

Travis

chris

Joe

Eric

Block 2: `#slidesContainer` CSS

Block 3: `.slide` class CSS

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

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

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

Block 12: the `manageControls()` function

Call `manageControls()` on DOM ready

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

Block 15: Ternary operator to set new value of `currentPosition`

Calling `manageControls()` after updating currentPosition

Block 16: Calling `manageControls()` inside `.bind` method

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