Это видео недоступно.
Сожалеем об этом.
jQuery Tutorial #6 - Building a jQuery Image Slider
HTML-код
- Опубликовано: 11 июн 2014
- In this jQuery Tutorial, we're going to be building a jQuery Image Slider Widget. There are lots of great jQuery slider plugins out there that have way more features and real-world testing, but this lesson on building one will help you understand jQuery programming a lot. We'll also introduce the concept of "DOM caching" - searching the DOM as little as we possibly can and then saving the results for quick-access later. Let's get into this jQuery Tutorial
View the source code here: jsfiddle.net/Ej...
Lesson #1: jQuery Tutorial for Beginners
• jQuery Tutorial #1 - j...
Lesson #2: Listen to user events and respond with jQuery actions!
• jQuery Tutorial #2 - E...
Lesson #3: Clean up the jQuery by putting some data in the HTML
• jQuery Tutorial #3 - W...
Lesson #4: "DOM Traversal" with jQuery
• jQuery Tutorial #4 - D...
Lesson #5: Building a jQuery Tab Panel Widget
• jQuery Tutorial #5 - B...
~-~~-~~~-~~-~
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
• Responsive Design Tuto...
~-~~-~~~-~~-~
There are ton of tutorials but the reason why i'm watching your videos because when i listen to you i dont get asleep. You sound great and you are having fun while teaching. This is the reason i get attacted to your videos. Other things i like about you is you dont show us boring intros, you start directly coding, you dont make forced and fake jokes. Keep it up
"Types slideConaiier"
"Oh I didn't spell that right"
*corrects it*
"Types slideConatiner and copy's it everywhere"
There we go! now, *continues
so far, this is the BEST tutorial about Image Slider I've never seen in youtube, this channel is great! thanks a lot!
Duuude I have never thought about sliders in the way you explained them in this video. The first 2 mins alone were very informative
Great, that is how a knowledgeable, smart and tidy volunteer tutor should be, otherwise no "lots of thanks for sharing ur knowledge';
You have my favorite tutorials. These are super straightforward and practical.
Thanks, Sam! Great to hear.
Great tutorial! I challenged myself and I was able to add captions, next/prev buttons and easing to the animation. I know my way around Jquery quite a bit, but there's always something new to learn, which is pretty sweet. Thanks a lot.
Nice! Way to go. yeah, nothing's impossible, but new ground is always daunting to say the least.
LearnCode.academy By the way, I tried various things for fun and ended up with a strange and unexpected but quite nice result nonetheless. By adding CSS3 transition markup, 'transition: all .5s ease-in-out;' , inside the '#slider .slides' css rule, once the slider reaches the last slide, the animation will reset to the first slide by going backwards right up to the first slide. So instead of having a seamless auto-loop feature, the slider resets backwards showing and skipping all slides until it stops at the first one. I reverted my code to the auto-loop after, but thought it was pretty neat.
Nice. Yeah, CSS3 transitions are also much smoother than JS. Beyond the scope of this video, but should be used in place of JS whenever possible.
The quality and cleanliness of your code is awesome. It made me rethink a lot about my own.
I am a javascripter and have a head start here. This is a very cool tutorial series. Makes a lot of sense.
the way you teach is aewsome sir . now i finally i can make a image slider anywhere in my webpage; you are great sir
Great Tutorials, well explained, good presentations, easy to follow, basically my favorite instructor for tutorials.
If its to fast or whatever for you just go to the settings and choose a slower speed, "right hand side of the play video menu in settings"
Thanx for posting!
Awesome tutorial. After getting your slider working, I challenged myself to adding buttons for Previous, Play/Pause and Next. Took me a couple of hours, but got everything working. Even going from the first image around back to the last image, without a skip of images. Pretty proud of myself if I do say so.
Thanks, for these tutorials.
Hey cmon, that's awesome! Next time you do it, it will take far less time, too. You'll have the confidence that it's doable and somewhat of a memory of how you did it.
I would love to see your code! I'm a noob and i've been struggling to put effective buttons to my slides I get it to work and then it abruptly skips back to the front.
Brian Nelson I've put my code in Codepen. If you haven't used it, you really should give it a try. The basic service is free. It allows you to write HTML/CSS/Javascript in a really nice structure.
Great for testing out small (or even large) amount of code quickly.
codepen.io/RussEby/pen/pvgVMo
For some reason the photos don't always load. If you refresh it a couple of times, you'll get all the images. The JavaScript I break into more functions then the video tutorial did. I found it easier for me to grasp.
Best Tutorial ever seen for JQuery. No Words to Thank u. Amazing stuff
Thanks so much for these tutorials, you're a life saver.
Thrilled to help!
+LearnCode.academy Great tutorial mate and also great tips and habits to get into like caching the Dom and so on. I just have a little problem. I wanted to extend the functionality of the slider and once I put text or arrows on top of it it the hover pause stopped working.
I fixed it dont bother to respond! Thanks again for the tutorial.
"if there are things that don't make sense, have yourself a great day" :D
the tutorial is great, thank you!
Really great tutorials. They don't put me to sleep
Every Thing here makes a lot of sense & i think my university education is totally crap , this great person is giving me more knowledge that 2 for free are kidding me freeee damn , i should hv spent that to support :P but i will once i get a nice job & i will support every person that has taught me sooo many things :') frm videocopilots andrew kramer to learnCode academy all of em , Thank you very much :') .....!!!
Thank you so much!!!! I was struggling with the slideshow that goes back to the original slide without scroll all the slides. Thanks for the logic and you ARE AWESOME!!! I finally got it work! Thank you again!
One of the most well presented slider tuts I have watched. Nice.
This is absolutely fantastic. I know very little about javascript or jquery but I understand everything you explained and it is extremely clear.
Would easily be able to replicate this for my websites.
Thank you so much for doing this.
Thanks for the great feedback. Always great to know it's helping people.
Very stright and clear.. Saved me a little bit of effort.. Thanks man...
for vartical motion ==> if we set the width of .slides { width:720px; height:>2400;} and then animating the magin-top by 400 we could make the slides move vertically.
Amazing! You're a great teacher. If only my school teachers were as good as you.
Thanks man!
Thank you so much, I've been pulling my hairs trying to understand JS and you make it so simple.
I like your teaching style. Very accessible
You're doing a great job there.. Helps a lot. Keep making more videos.
Your Tutorials are totally worth it.
best Channel so far in regards to jQuery and Javascript. Keep up to good work
Awsome. Realy great toturial. Easy to understand and follow. Thumbs up man!!!
Thank you very much, you just made me understand how it realy works without lots and lots of confusing code! great tutorial!
Lucas Almeida Awesome, glad to hear!
This is really great, recently starting my journey into webdev and I've found all your vids informative. DOM caching caught my interest.
Thanks! Glad to hear they help!
Quick question, is this slider responsive? if not could u show how you go about making it responsive?
SUBSCRIBE! This is the far best channel i found on development. Although i think there could be some improvements that would be nice. But so far soo good.
Thank you very much. Very simple and easy to understand.
The best! Understood even more than from tutorials in my native language.
Thank you man! You're so kind! It's like having a private tutor!
Maximus Hsieh Awesome, glad it's helping!
A great series. You have a very good presentation capacity. My request and suggestion is a continuation for the medium and, why not, one for the advanced level. Congratulations.
Best tutorial on jQuery sliders I have found! Thank you so much :)
Thumbs up! Really liked the DOM explanation and callback.
Dude bc you, now im making sites and i will work making them!! YOU NEED MORE SUPPORT!
Good tutorial but I just want to clarify one point about global variables because it confuses a lot of people.
If you declare a variable outside of a function using "var", it has GLOBAL scope.
var interval = 'this variable has GLOBAL scope';
If you declare a variable inside of a function using "var" it has LOCAL scope (i.e. it can only be accessed inside of the function)
function startSlider() {
var interval = 'this variable has LOCAL scope';
}
If you declare a variable inside of a function WITHOUT using "var" it has GLOBAL scope, regardless of whether or not you have declared the variable outside of the function.
function startSlider() {
interval = 'this variable has GLOBAL scope';
}
So on line 17 (at 17:00), your statement "var interval;" is superfluous.
Thank you so much, it was a great and enjoyable tutorial, it also does answer many are asking which is how to start animate after clearing the interval.
many thanks
Thank you a lot for this tutorial. Well made and well explained slideshow. Also easily customizable.
I've never seen the tutorial like that before!
about jQuery
I wanted something simple. And I finally found it!
glad to see your back man
Thanks! Yeah, had some travel and family stuff to attend to there for a while.
Thank you very much sir! You are doing a great help to people like us!
Interesting...simple and very well explained, worked for me :)
How to make it work with a faster pause, for example 200. The slider doesnt stop instantly when you mouseenter, its like it has some slide left in memory that it executes before it stops.
As a beginner, this is tight. Thanks.
Nice guide, sure gonna help me out with my build... Except now i'm trying to make a back and forward button, except the back button gives me a "no image" if you go back on the first image, tried all kind of ways but i'm just not getting the hang of that bit -.-
Can you make a video about freelancing?
very usefull video and your explanation make it more simple 👍
I had problem with the interval doesn't stop when mouse enters every time, probably due to animation. The work around I did is to add
$slideContainer.clearQueue();
before
clearInterval(interval);
in stopSlider() function
Thanks for the video! What themes did you use for sublime text?
Best guide for me. Thank you !
the code works fine but when the last image in the queue pauses only for split of a second and the first image just pops instead
+Hatem Nabih did u find a solution to this?
+Hatem Nabih i have the same problem
+Hatem Nabih Have the same problem.
+Hatem Nabih The problem may be that your last does not match the first and the width of your .slide is not wide enough to contain the elements. I have added my own code below for you to see what I mean :)
EXAMPLE
HTML
CSS
.slideContainer {
border: 1px solid red;
width: 780px;
height: 400px;
overflow: hidden;
margin: auto;
}
.slideWrapper {
list-style-type: none;
margin: 0px;
padding: 0px;
display: block;
width: 3120px;
height: 400px;
}
.slideItem {
float: left;
}
JQuery
$(function() {
var currentSlide = 1;
setInterval(function(){
$('.slideWrapper').animate({'margin-left': '-=780px'}, 1000, function() {
currentSlide++;
console.log(currentSlide);
if(currentSlide == $('.slideItem').length) {
currentSlide = 1;
$('.slideWrapper').css('margin-left', '0px');
}
})
}, 3000)
});
+THREE6IXDIGITAL If anyone still doesnt get it.. You just have to go in css folder, #slider .slides div and increase width there.. So it would look like this
#slider .slides {
display:block;
width:8000px; ------ increased to 8000px from 6000px
height:400px;
margin:0;
padding:0;
}
Quality Information, good programming techniques-brilliant video.
Thank you for making my day.
Thanks!
Great tute! many thanks. btw I make 4 slides, It works though, most of it, only one problem with my slide 4 it only flashes briefly then back to slide one. What could be the problem?? Please help!
Fixed it! :)
AutoPilot69 How did u fixed it? I got that issue too.
Que Nguyen Thien Remember to put the last image the same as first one. then in css just add the width of that last one to #slider .slides{width: }
Ivan Gajic Thanks!
Gracias teacher you are the BEST!!!!
Question: I have been working with this example. I used ten photos, all formatted the same width and height (width="200" height="100"). The last photo slides, and then there is a jump, to the first slide. Why is it jumping like that? I tried adjusting the #slider .slides, width (for example 10 pic, would be 2000px), but get this weird jump from the last pic to the start? Why?
THX Sir ... great tut for me starting as fullstack Dev.
Great tutorial, thanks so much, it's clear and helpful.
Bob.
you have the best tutorials ever i was just wondering can u make a tutorial of a simple and basic slideshow like that but responsive, i've been trying with that base but no luck and can't find tutorials in the internet only with plugins but i want to learn how to make one myself can u do it?
thank you.. it is completely helpful for JQuery beginner..!!
Thank you for a great tutorial. This was a big help!
I follow the steps in the video but my slider is not working. I don't know if there is something wrong with my code or with my pictures. I made the pictures the same size. I check my jquery code is the same as in the video, but no luck.
very helpful and easy to understand :)
This is a great tutorial but I have a problem. I want the slider to be full width so I'm using $(window).width() to get that. I now discover that it doesn't give the same result in every browser so the lateral movement is not consistent. How would I fix that?
Wow, what a great educational video!
Thanks Andrew!
I know this is years later but I'm wondering if it´s possible to auto update the script so when i resize my window the code updates? what I mean by that is: I changed the var width = 720; to var width = $('.slide').css('width'); so what ever size I have on my .slide my var width; always change. I did this so I could be able to use media queries. but now when I resize my window I have to manually update my page for it to work. PLEASE help me :(
responsiveslides.com should help..not sure if its still an issue...
Please how can I make it look the same as yours but with next and previous buttons meaning that it will slide to the left just the same as the automatic sliding if next button is pressed and also how to make the moved slider fill the whole container at a time just as the automatic slider?
Thank you very much for yuor video! It was very useful for me!
Best guide so far. GG man
+Belmin Mustajbašić Thanks Belmin!
hello, I'm trying to figure this out and when I'm adding my images in for the slider only the first shows. The animation transition still plays however my other two images don't show. I'm wondering if you would have any advice on solving the situation, also if you have any jQuery that you would recommend for adding arrows for navigating through the slides.
Thanks!
very nice tutorial. thank you so much
Great teaching!
You are great, thank you for the tutorials bro I enjoy your videos
Thank you so much, very helpful tutorial.
hahahah you are so funny!!! great tut!!! loved it... very simple and cool
I am using similar .css .html and .js files as shown in video.but its moving left (-720px) only top most image and remaining images are not showing after that. plz help
Great tutorial. I have built the same, working perfectly in full window, but when changing the size of the browser the slider keeps its size, if have changed the px values to % than didnt work properly. What do you suggest? Thanks
Guys I'm confused with one thing, why is the last line of code calling the "startSlider" only once instead of every frame?
My works normal, but when it changes to $ slideContainer.css ('margin-left', 0); It is not pausing, it returns to the beginning as it finishes pulling the last slide
Very very helpful video. It didn't work for me, though. After a lot of experimentation, I figured out that the LIST was the problem. So, I simply changed the list to a div containing images. The classes were the same.
Ah, gotcha. Sorry for any missed explanation on my part, but awesome to hear you got it going!
Thanks a lot buddy! best tuto ever seen. keep it up!!
Thanks for this tutorial, it helped me a lot!
thanks a ton man. straightforwardness helped alot
Thanks you very much, your tutorials is just perfect. I`ll hope, that this information is really actually nowadays))
The problem I am facing is that when I reach the last image, it does not animate to the first image. It just abruptly starts the slider fromthe first image.
thanks for the tutorial.
i have one question ..when it reaches to the last slide it goes to slide one very fast..why is that happening?
Thanks for the tutorial made life easy but one question how do I make responsive. Please assist.
responsive pages is done through html/css.. but I guess you already figured that out..
is there a way to make the slider go back to the first slide smoothly? for me it just jumps to it. I've tried to animate it back but it goes all the way back.
Thanks for the tutorial, very informative. Though i would get a nullpointerexception when i tried to run it without the startSlider(); than see what would happen if i would mouseenter and let it call stopSlider(). The "var interval" would not have been initialized.
This is really very helpfull sir.but i have an issue while working on small devices. Can i get a way to fix it please!
I have used the code in description, but the slide show doesn't work at all, what is missing for me ? can anyone help plz?
Excellent video.
Tanx for the video..but when i load my page the images doesn't move.. it just stay on the first image
Its not working for me, i have even copied the exact code from jsfiddle into my files and it still doesnt work... Its frustrating that i dont know what i am missing
thanks for the video . I have a question and i hope You answer
how i can add a button to Slide the to the left
and another to the right
I am missing some key step or am completely dumb! I have tried this over and over. I even went and copied the source code exactly from the website link. All I end up with is where it says JQueary Slider bar then has slide 1, slide 2, etc as bullet points!!! I have no clue what I am doing wrong!