[Help] Custom jQuery slideshow

[joocy]

Been looking around the interwebz for a tutorial or shell for a custom jQuery, javascript, etc. slideshow I can edit in anyway I see fit but I can't find anything. If someone can provide a link to a tutorial, something else to search on google to find one, or the tutorial itself would be much appreciated, thanks.

 

[TimeBomb]

Clicky.

 

[WizCoder]

No timebomb No.

He said he already looked through google, as did I and it's terrible for those exact keywords. Someone needs to post a better tutorial on how to do a simple to advanced one.

I've done it before but it was bad but your good at what you do you should make one!

 

[EliteGM]

This is how I did it once (there's several ways for several different transitions of course), very simple. The basic idea of a slideshow that slides horizontally:

Say you have five slides which are 700x300.
Make a container div that is also 700x300 and has overflow: hidden;
Inside that div create an <ul> (use CSS Tools: Reset CSS) that is 5*700=3500px wide and 300px high, with position: relative; top: 0; and left: 0;
Then create five <li> tags (with the corresponding slides as <img> tags inside), each 700x300 and make them float left so they line up. Only one should be showing and the others should be hidden because of the overflow setting on the parent div.

For the jQuery part, you need to
1) Keep track of the current slide
2) Animate the "left" CSS property of the <ul> like so:

$(".container-div ul").animate({
		left: ((selected_slide - 1) * 700 * (-1))
	},
	1000 //Animation time in ms
);

//For slide 1, "left" will be ((1 - 1) * 700 * (-1)) = 0
//For slide 2, ((2 - 1) * 700 * (-1)) = -700
//And so on...

Now it is onto you to create forward/backward buttons or even make this thing auto-rotate using timeouts!

 

[joocy]

Thank you! So helpful, really appreciate it man.
Can you elaborate more of the <ul> and the Reset CSS thing more?

 

[EliteGM]

The reset.css is just a stylesheet you should always use when coding because it resets all the things that browsers have differences in. For example, has those list dots with every by default. Reset.css removes the list-style css option that causes those dots, amongst other things.
All you have to do is add a tag with the reset stylesheet and it will save you a bunch of hassle later on with regard to multi-browser support.

2