jQuery Image Slider Part 2

[Jayki21]

getting also the error: a[0] is undefinded .. the problem is in your jslider.js in line 94 .. but cant figure it out ;) could pls update your "jslider.js" for us? ;)

thanks !

[NoQlue]

Hey, me again.

I'm making a second slideshow at the bottom of my page, on the footer, to rotate through testimonials. I renamed the html and css elements from "prev" and "next" to "prev2" and "next2", and "slider" renamed to "testi". I also copy / pasted the function code in the head and renamed .slider to .testi , BUT for some reason all the pictures just end up on top of each other and the slider buttons don't work, any idea why? can I send you the code maybe to review?

Thanks again!

[NoQlue]

Hey man GREAT video! Thanks for doing this!

I notice a small problem though; Cycling through using the Next button works fine, but when you cycle through using the Previous button it doesn't show you the very last image.

My slideshow only has 3 images, and u can cycle through all 3 using next, but when I use previous it only cycles through 2 images. Any idea why it does this?

[ondari90]

Either there is a bug with the code on the tutorial or its me or my browsers (firefox 10,chrome and opera) but I have done everthing but all I get is three images following each other and the two next and prev buttons do nothing ,the images follow each other like a list can you post the source code somewhere so I can see if am messing up anywhere.thanks for the great work and greetings from Nairobi too

[richil1313]

Harry, nice clean code...thanks, just wondering is there some code to stop the slider when you have it on auto play? I have my slider showing videos and if you click on the slide, it starts the video, but moves on to the next image...a stop/pause btw solution would be appreciated...thanks, peace, richil

[COMETINI]

@Blacksmith200 The same thing is happening to me, could you fix it?

[Blacksmith200]

@COMETINI No I've still got the same problem, I just left it out

[TottoBennington]

Something's bad with my files, 'cause the slider do not works D:

i'll send you my files by email !

[permlimellissa]

THANK YOU SO MUCH HARRY :D WHAT A BIG HELP YOU HAVE GIVEN ME FOR MY PROJECT. CHEERS ^^

GOD BLESS YA :)

[jonochilds]

Sounds wicked! Can each picture link to a different URL??? Thanks

[antijames001]

Dude thanks for the tutorial....Please send me the jquery.js and jslid.js at satendra.svnit@gmail.com

Again very humble thnks to you :)

[slzes]

thank you for a great tutorial. There is a way to add a caption or another element, an image for example, above slided image?

[HarryFinnUK]

@slzes not 100% sure what you mean but you can use the title html tags for captions the style them with css to make the look nicer or float some caption text over the image currently shown by the slider

[chowyWonderland]

very very helpful

thank you very much

[sylogh]

please, how do I get the HTML file for this slider?

[Blacksmith200]

The slide is not working on mine and the images just line up below each other. Help!!

[ondari90]

@Blacksmith200 same problem here did you get it solved?

[Blacksmith200]

@ondari90 No I've still got the same problem, I just left it out

[Mertt03]

As a proud Turk i have to say you are great thanks.

[gebimalvarez]

if i will like to add image as background insted of a solid color what i can do

[TheGameSpy1]

@gebimalvarez background-image: url('imagename.jpg');

Change the 'imagename' for its name, and '.jpg' for the file extension (such as GIF or PNG).

Im guessing you mean for the page, not the slider?

[0904abhik]

dude what to do for jquery.js and jslider.js !!!

[bugeb]

Awesome tuts mate, i know where to come if i need web dev help :)

[smokenfly514]

Everything works perfectly, but how can we adjust the speed at which images change? Also, the transition from the last image to the first when you press "next" is a bit choppy. Is there anything we can do to change this too? Thanks a lot

[Contreras04]

i cant get it to work :(

i did everything as the video but the prev button does not work

[gemzcooke]

@Contreras04 I'm having the same problem.

[eyez666]

Is it able to change size on the slider?

[dankosta1]

@HarryFinnUK Works Great. Just wondering if you can have a slider nested in the "li" of another Slider?

I have attempted it but it glitches and stops working.

[sokakaification]

Thanks dude, propz

[mykxbox360]

I keep getting this error :

Erreur : a[0] is undefined

Fichier Source : file:///C:/Users/Mykael/Deskto­p/Portfolio/slider/jslider.js

Ligne : 94

Can you help me ?

[evirtual]

@mykxbox360 same thing here

[HarryFinnUK]

@mykxbox360 email your files to harry@harryfinn.co.uk and I will take a look!

[th3br0LESK]

THANKYOU YOU ARE THE BEST !

[isaacnicholas]

@HarryFinnUK Geetings frm Singapore!!!

tutorial isgreat and clear as glass xD thks needed a guide for this effect xD

btw how did u do the rollover in your first part in this tut with this effect?

[alshezawi2010]

thank you harry ..

nice tutorial ..

i was think this is very difficult ..

but i know now it is so easy to do it ..

thank you so much

[FromSomeGarage]

Thanks for the great tutorial! I've tried out the slider and it's absolutely fantastic.

I was wondering though, would it be possible to have three re-sized versions of this slider on a single website page? I know the prev and next buttons are ID's but is there a simple bit of coding that would allow me to have multiple instances of the buttons that affected different duplicates of the slider on one page? I appreciate all the help,

Francis

[alshezawi2010]

thank you Harry

for this tutorial ..

i will try to do it ..

and i will tell you if is done

[ignacio85r]

awsome!!! y see the tutorial and it works perfectly! Greetings from Argentina!!

[HarryFinnUK]

@ignacio85r Thanks! Argentina! Nice!! Greatings back from the UK! :)

[NoxitOfficial]

So I did everythign exactly the same, but I see a page with a black bckground, 1 image in the middle with the white border. The problem I have is that the previous button is just not there, while it should be on the left and the next button is on the left?? Also i cant click on the buttons... HELP ME PLEASE GUYS!

[HarryFinnUK]

@NoxitOfficial Please email harry@harryfinn.co.uk with all your slider related files and I will take a look at the problem for you!

[SuperBrian91]

Hi, Is it possible to make the slide show have a translation effects? For example a fade in/out? Thanks.

[HarryFinnUK]

@SuperBrian91 erm.... not really with this plugin as it was designed solely to slide.. there are others out there with a fade in and out effect - Have a look at my homepage = harryfinn.co.uk and see if the fading images on the main page are more what you wanted. If so email me at harry@harryfinn.co.uk and I will see what we can do!

[chess012345]

Hello,

Thanks for this tutorial!

But my slider is not working. Firefox is showing the images one under another. I wrote what you wrote. Do you know where the problem is? Where should I triple check?

Thanks!

[HarryFinnUK]

@chess012345 - Check the div class="slider" section and that the jquery at the top of the page is correct - Feel free to email me a copy of your files to harry@harryfinn.co.uk if you are still stuck!

[chess012345]

@HarryFinnUK Waw, you were right! There was my problem. Thanks!!!

[StationGix]

@HarryFinnUK Could I send u a copy of mine. For some reason nothing is being displayed. Thanks in advance.

[iGoshiix]

@chess012345 Mine does this as well. I, too, am using firefox. Although it does this in design mode, also. Did you find a solution?

[chess012345]

@iGoshiix NO :(

[TheKiirat]

what software you use ?!

[HarryFinnUK]

@TheKiirat On my MacBook Pro I use either Text mate (got a trial version atm) and/or Text wrangler. On Windows I use Notepad++

[manee1982com]

it's really a great tut ... but i tried to download the (jslider.js) file but i couldn't find it ... i am gratefull if you show me where can i download it ...

the same one you have

thanks

[HarryFinnUK]

@manee1982com Says in the description - All files are in the description of the first (part 1) video tutorial

[manee1982com]

@HarryFinnUK  thanks ... you are the best HARRY .. Looking forward for more TUT

[apper2112]

Excellent tutorial with everything explained to our liking. Cheers!

[ZJMostWanted]

hello there....i have a question...am building a site for graphics and i watch your video but a question..."can they see the picture enlarge when they click the image on the silde show?" if not "can you make a next video showing that please" thank you...learn alot from this video.

[HarryFinnUK]

@ZJMostWanted You could use the lightbox js+css plugin just google it online, fairly simple to implement too or if you just want it to go to the image source i.e. the larger image version etc just use a a href="linktoimage" before the img tags

[laurens4design]

Hmm i've the same issue as some previous comments. You know the 3 broken links stacked on top of each other. Can i mail my files to you?

[HarryFinnUK]

@laurens4design - please email harry@harryfinn.co.uk

[Ambuscade92i]

a rather excellent tutorial if i may say, you've got yourself a new subscriber may i add

[jackylt]

Nice tut :))) Really nice. Keep up the good work!!!

[KurayamiDayo]

An amazing tutorial. Been looking around for something like this for ages! Thanks for sharing! :)

[DJbvir]

Hi @HarryFinnUK ! this tutorial is great. im having the same issue as some previous comments. i have 3 broken image links stacked on top of each other. do you know what the issue might be?

[HarryFinnUK]

@DJbvir - Please email me your files to harry@harryfinn.co.uk and I will take a look this afternoon with a fix :)

[AMIRthe9]

Hi harry. Im using microsoft visual studio 2010. My images are being displayed from top to bottom and it doesnt slide at all. Can u check out whats the problem?

[WillWarHero]

my images dont show up. Do they have to be .png or can you use .jpeg? all the CSS seems to be right. :/

[HarryFinnUK]

@WillWarHero nope you can use whatever file type you want. it doesnt even have to be images, text works too. if you are still having issues with your code, email it all over to me at harry@harryfinn.co.uk and I will take a look

[areuEW]

the prev and next arrow at the t op left hand corner? how to adjust it at the side of the pic?

[HarryFinnUK]

@areuEW - alter your CSS positioning for the arrows

[areuEW]

my border doesnt work.

[123wendywhite]

Thanks Man!

[22letis22]

OMG It doesnt work for me!!! I spent about 1hour with it and nothing is working.

The images are visible in column and the buttons do nothing! I am really angry about it -.-

[HarryFinnUK]

@22letis22 Email me your code to harry@harryfinn.co.uk and I'll fix it now for you if you can get it sent to me in the next hour or so!

[testbloggenDK]

@22letis22 Me too, i can get it to work:(

[testbloggenDK]

@22letis22 Me too! i can get it to work:(

[HarryFinnUK]

@edaaaaaaaaarz excuse me??

[edaaaaaaaaarz]

Why the fuck you just dont explain how to add this on existing web page you fucking moron?

[d77h28]

@edaaaaaaaaarz Just paste the code in you dumbass. He's not here to explain remedial html to you.

[guthery1000]

The code overall works superbly. What I wonder is... when the slideshow is at the first image, and I click the previous button, then it abruptly displays the last image, and slides to the second to last image. Is there any way to fix this?

[HarryFinnUK]

@guthery1000 - This plugin is designed to work in a logic based order. Therefore it has no problem moving on to the next image in the sequence and then back to a previous one but it does cause the slight issue as you've mentioned above if you click previous first before going forward/onto the next item etc.

[MoreTestiMoney]

Thanks for the tutorial, I'm building my own business website and I'm a noob when it comes to web development. I thought the scrolling banner was something super complicated, but thanks to your tutorial I got it working finally!

[varyokh]

@FormidableTutorials you need to edit the your own css , you need to place code in right place , you have to replace the images

[Mad93Cracker]

Anyway you could add a start and pause button to it ?

[Tangenvgsfilm]

Well, i got all pictures a line down, what do i do wrong?

[HarryFinnUK]

@Tangenvgsfilm Please email me your code and I will take a look for you

[Akudosochim]

Hi Harry, THANKS SO MUCHH FOR THE VID..I WAS able to make the slide, but the problem i am having is how to upload it to my site, which code do i copy and paste or what do i need to do. PLEASE REPLY ASAP THANKS.

[HarryFinnUK]

@Akudosochim - You will need to upload all the files you are using currently to your site i.e. the index.html (or slider.html whatever you have called your main html doc) your styles.css file, the jquery and jslider.js files, the image files including the prev and next images + any other additional files that you have used/built in with this code.

[davehale007]

Thanks for the video Harry, there are a lot of very sad kids commenting on your video, it is a good video. To those sad fools who try to be cleaver writing smart arse comments, do not forget, you are looking for his videos for help because you can not do what Harry can. you are in no position to judge.

[982jo]

I tried to follow this tutorial, and it's really clear, but it doesn't work for me.

Can you please watch what i do wrong?

[HarryFinnUK]

@CJPLOR - Hi there - please email me your code files to harry@harryfinn.co.uk and I will have a look through for you!

[wook523]

Great video! Thank you very much for doing this.

If you set it to autoplay, I like that you can adjust the speed, but is there a way in the javascript to make the slider hold the image still a bit longer before moving on to the next?

[rockyscarlet]

ain't working, that ain't cool

[HarryFinnUK]

@rockyscarlet - if you've followed the tutorial correctly it will all work fine - if you are still having problems email your files and I will take a look at it for you - harry@harryfinn.co.uk

[nicoletyz1997]

thank you so much! i've finally found a comprehensive jquery image slider tutorial that really works!! i've been struggling to get my images to appear in the image slider for the past week until i found this video! thanks so much!! :))

[Bossiiiii]

everyone is trying to use a mac just to look good... he's definitely not a mac user

[HarryFinnUK]

@Bossiiiii ?? sorry what do you mean by that? i've been using a mac to do my work for over 2 and half years now, not because it looks good, but because it helps my workflow, web development and design work

[felbar22]

Very nice tutorial!

It works nicely. I just have one quaestion. How can I set it up for text?

[HarryFinnUK]

@felbar22 how do you mean? do you mean like a small caption under the images etc?

[reneel327]

go figure... I found the css. :-) but my slide show isn't working. It is just showing all the pics and the 'next' button isn't working. Can you please help me?

[reneel327]

@reneel327 I've gone through my script over and over again. I know why the "next" button wasn't showing up... I fixed that. but the images are still not working. They are all on the screen under eachother. Also, the buttons aren't taking the positioning of the relative div, they are going from the browser window. I have commented each section out... tried to "fix" the css on my own... then put it back to where you had it in the tutorial. It still won't work. Please help me. Thx

[HarryFinnUK]

@reneel327 please send me all the files related to your code issue to my personal email - harry@harryfinn.co.uk and I will get back to you with a fix

[reccirunescape]

Thank it worked!

[Rexkirbytv]

nice tut.. how would u go about doing one with thumb nails below and captions?? if u could link another tut that would be sick

[HarryFinnUK]

@Rexkirbytv - Thanks! - so thumbnails of the images above and where would you want the captions to be? appear over the bottom part of the big picture in the slider? or elsewhere? let me know and in the next week or two I will see what i can come up with!

[Rexkirbytv]

@HarryFinnUK yeah thumbnails below and caption on the image but the bottom side, cool cheers

[HarryFinnUK]

@branblackmon - The links to the files are all in the description - the reason I dont put the HTML in the description is because I want people to be able to learn it whilst coding it themselves rather than copying and pasting as it achieves nothing other than showing you can use a keyboard - should your own code not wrong the working files are in the description so you can simply download them and use etc - Im just looking through your code now, i'll pm back in a sec with the change in code

[edmundrojas]

great tutorial, thanks for this!

[bizkit01]

thank you! very nice, it works perfect! :)

[aembrace]

how do i put this into another html file once ive done it and its working? cause i am making a website and ive got all my banners and stuff but i want this to go in the middle? how do i put it on, im using dreamweaver.

[cattirun]

thank you very much for this tutorial... I followed it and it works perfect :)

I was getting kind of desperate because i didn't find any good tutorial but yours did the trick. Keep on the good work.

[kurty03]

ahm.... im just a beginner here in making a website.. so i really want to learn how to do this image sliding thing,,, can someone teach me how,,,,

tnk you......

[lindbl0m]

Hey man, great vid. but still i have a problem, my next button isnt working :S i can only slide to the left. i think it might have something to do with z-index, can you help?

[spooofcouk]

also having trouble, sent you a PM.

Thanks :)

[spooofcouk]

Hey,

Also have trouble.. ive gone through the video 3 times and cannot find any mistakes. I will PM you my link.

Cheers

[lindbl0m]

doesnt work for me either :O can you help me if i send you the code?

[NEIFitis]

funny, it works perfectly with Firefox but the "container" zone in safari and chrome are at about 5 px height and width! My Css is correct i wonder if it isn't the JS that's doing that! (i got the JS files from your links)

Any solutions?

thank your very much for the great tutorial! love it!

[iTzStarSkill]

hm, doesn't work.. the pictures are just on the page.. slideshow isn't there

i did all what u did..

[HarryFinnUK]

@iTzStarSkill if you followed it all correctly there is no reason for it not to work as it works in the video and i didnt do anything differently to my code then what i said in the video - if you are still unsure pm with a link to your code and i will take a look for you.

[iTzStarSkill]

@HarryFinnUK

i try all new..

[iTzStarSkill]

@HarryFinnUK not working..

[antonycleary]

@iTzStarSkill hey man same with me...but i worked it out i done a very stupid mistake of missplacing the .js files make sure you have them in your site root , hope it helped

[iTzStarSkill]

@antonycleary hey, my slideshow is working now :)

[antonycleary]

@iTzStarSkill hah yayyy lol

[MaxtheOptimist]

Hey Harry. Nearly have this fixed up but I am having a similar issue to some of the other posters. The images are in a column instead on in a slider. I have the exact jslider as you. Is there any way you can give me that code or link me to where you got it? If its not that I'm not sure.

[dariusrashaud]

Hey cool tutorial, I was wondering, can you use this for other content as well. instead of pics/images? like inside the ul>li can you put a div and then put a mixture of pics and text, links, code etc...

[HarryFinnUK]

@dariusrashaud yeah that shouldnt be an issue - just place the text inside the li tags and it should work fine :)

[kazmilahore]

good one. thanks a lot.

[WendySonglines]

fantastic tutorial, Harry, thanks so much!

[HarryFinnUK]

@WendySonglines Thanks Wendy!

[HarryFinnUK]

@WendySonglines Thanks Wendy! :)

[visualfeminet]

Thanks soooo much you may never know how happy I am about this

God bless you...

[HarryFinnUK]

@Dynus87 you sorted out your problem?? if not pm me with a link to download a copy of your code and i will take a look for you :)

[Dynus87]

@HarryFinnUK Yep I figured it out, thanks a lot for the tutorial! :)

[HarryFinnUK]

@Dynus87 great!! no worries thanks for watching - i will get around to doing a load more soooon but in the middle of sorting out uni stuff atm so that takes priority lol

[Kazenokuroka]

works great. thanks man =D

[deliveryguy]

Very handy tutorial :) Works great, thanks a lot for the help. One problem, how do you remove the white border of each image within the slider? Its the white line that splits each image from the next.

[deliveryguy]

@deliveryguy No problem, problem fixed :D

[copleykyle1]

great tutorial, but when you go from image 1 to image 3 by hitting the previous button it skips an image

[pakt40]

Nice tut. finally it was explained in a way a beginner can understand. Got it done nicely.

Thanks,

[pavidproductions]

this isnt working for me.

it seems the lists are messing up.

when you get to about 35secs in, it shows you only have the buttons in the browser and no images. on mine, i have the 2 buttons at the top and then the 3 images below, all of which have a bullet point to the left of them.

any idea what is happening?

cheers

[HarryFinnUK]

@pavidproductions Hey sorry its not working quite right - a few people have said they have had some problems with this so what i will do is go back through this and edit where required etc so its all working right - however i am currently in New Zealand travelling around the world but im back home in the UK in 15 days so i will do this asap once im back - thanks

Harry

[pavidproductions]

@HarryFinnUK great thanks a lot. i have another question about using a fade instead of slide. but wait untill you get back.

cheers

[m63shredder]

@pavidproductions I'm getting the same thing...

[koykemar]

@pavidproductions i am having the same problem...

[SensualEMO]

I have a little problem. It works just fine just like you said only for one thing. When I click prev after the first pic is shown, it makes a weird jump. Could you tell me what i did wrong?

[HarryFinnUK]

@SensualEMO What browser are you viewing with? some browsers do seem to produce a little jump with this - i am currently travelling the world and am back in mid May so i will try and find a solution to this once im back

[jeff1evesque]

Trying to use this code inn strict xhtml, and it doesn't work. Are the codes you write here actually get run? Is there a type on the javascript line: btnPrev: ".prev"

})(TYPO HERE: INSERT SEMICOLON??)

Do you have any typo's in your code?? It's not working for me

[HarryFinnUK]

No typo's should work fine - does for me

[SAMY2690]

THANKS

[proleyend]

hello, I am a beginner trying to build a personal website with jquery. I would like to have this slider as part as my website, but instead of the "next" and "prev" button, I would like my slides to change by pressing different tab keys, where each slide belongs to one tab.

Could you please let me know of a way of doing this. what would i need to change or add to make it work?

thanks! so much.. and great video!

[iceblitzyt]

Finally a great tutorial, thank you for this upload.

[gonzalezluis78]

Great tutorial man.. I have been looking for this

[HarryFinnUK]

no problem thanks for subscribing :)