jQuery Image Slider - Quick & Easy
HTML-код
- Опубликовано: 10 сен 2024
- In this video we will build a very simple jQuery image slider or image switcher. We will use a little css for styling as well.
CODE: Code for this video
www.traversymed...
IMAGES ONLY:
www.traversymed...
VISIT US:
www.traversymed...
EDUONIX COURSES: Pleas use affiliate links from website below
www.traversymed...
SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
/ traversymedia
www.paypal.me/t...
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ bradtraversy
you're simply the best web programming tutor. Thanks Brad
Teaching is a gift. Thanks for your good work! :-)
5 years on and Brad is still coming to the rescue with his tutorials
you saved me on my last project thanks alot man very clear guide to follow
One of the best instructors I've seen so far, Thanks Man !
this is good stuff ! this is why i keep commenting on insta post about " best web dev bloggers " who keeps forgetting you in them !
Checking out your jQuery course next! Thanks. My next challenge is how to make a continuous rotation.
where are images i am not able to download plz help me for this
Thank you, this is my first time getting my feet wet with JQuery.
Albert Galvez did you catch cold?
waaauw man just what I needed dude , I was searching for sliders like crazy and not one of them fit my need as well a my lack of knowledge how to customize them. This is really helpfull man and it had giving me great insight man, I ll buy you a cup of coffee asap !!!!
Thanks :)
Wow, great video,
Recommending this for my bro ASAP.
Great tut.
Traversy media is a blessings from Ue.
You have a hug fan base in Bangladesh 🇧🇩
I really like this video format, thanks for putting out there!
Thank you, it's working for me very well. I add an infinitive loop to it and now I have a complete slideshow :)
how
@@hassanaliraza9208 my way: set id to first and last components and add 'else' condition in your code to add active class to the first or last and to remove the active class from current.
@@k0kuyo133 bro can u help with code , im beginner in js
Thank you a lot, after having watched many videos, now by your simple and very clear explaination, I'v succeed to create what I wanted :) very very grateful !
Dear Sir,
image slider is working fine on pc site but slider not showing on mobile.
plz share code to add so that slider should show on mobile.
plz guide me.
Thanx Sir.
It is so good and perfect .thank you bro.God Bless you .
Your videos are the best.
Great work !
thank u so much, it more easier with jquery and your explain
Nice & Easy ....just the way I like it - thanks!
So why did you include the outer class? You didn't define any size parameters for it in the css file, so what was the point in having it?
I really like your videos! Keep going.
Douda Andreea In sfarsit un roman =))
Hello , Brad Traversy ... I'm using ATOM text editor but after some days my CPC memory Usage 100% when i'm using ATOM text editor ... Please Give me Solution how to fix it.
Thank for your video. Easy to understand.
Hey this is awesome. Thank you very much
Will this work five years later and I have to download the library.
I literally am stuck on making this work with my wrapper div, which sits in my body div. My css contains a css reset as well as the styling for the exiting elements on my site. the Script works great, it's just that the elements in the slider div are appearing stacked instead of inline and on top of one another based up how it's displayed in this video. Can anyone help me?
Thank you, this video was very helpful.
Great tutorial. Thanks!
like a pro. thanks man
Jquery is my favourite, I just wish I knew it better haha
thanks you brad
thanks alot man,,nice
🤝🤝
Very helpful. Thank you.
Thank you!
Super code!!! Thank you!!!
@Traversy Media It's not working, i have copied exactly what you wrote and it doesnt work. When I preview and click on the arrow s, it doesnt work. Please help!
Use this:
can you please tell me how to make this slider work/change pictures automatically?
Nice tutorial. I have tried this and it works. Can you tell how do make It Automatic Slideshow along with next, prev buttons and also bullet thumbnails.
What is Jquery? i see it everywhere but do not understand what it is and why it is used
Brad, can you touch the moment of using jQuery in Angular/TypeScript? Thanks.
Thanks! About the images, I don't know if it's only me but the link (as well as the site as a whole) appears to be down.
thank you, this worked
Thanks for you tutorials Traversy Media ,they are very helpful ,just small request if you show us final result i mean the slider in this case and tell us what are the main part , in the slider where is container and why we put this or that we just copy what you write without understanding well,we just want to be like we are the designers ,thanks again for your help
Can someone help me to loop the image, like autoplay ?
great video man
what is the best way to add a description to the images?
How do you make it a fade-in/fade-out slideshow ? Kinda like the one on the Twitter mainpage when you login ?
nice question
jQuery has a fadeIn(), fadeOut() and fadeToggle() function. Check my jQuery crash course videos. You would set it up a bit different than this slider though
did you try css' :hover ?
Just use the powerful @keyframes query to add that sort of animation.
give your first image a class of "is-first"
give your last image a class of "is-last"
in css, remove the inline-block style from your "active" class, and give it to your "is-first" class
the rest is jquery
$(document).ready(function(){
$(".next").click(function(){
var currentImg = $(".active");
var nextImg = currentImg.next();
if(nextImg.length){
currentImg.removeClass("active").fadeOut(300).css("z-index", "-10");
nextImg.addClass("active").delay(300).fadeIn(300).css("z-index", "10");
}
else{
currentImg.removeClass("active").fadeOut(300).css("z-index", "-10");
$(".is-first").addClass("active").delay(300).fadeIn(300).css("z-index", "10");
}
});
$(".prev").click(function(){
var currentImg = $(".active");
var prevImg = currentImg.prev();
if(prevImg.length){
currentImg.removeClass("active").fadeOut(300).css("z-index", "-10");
prevImg.addClass("active").delay(300).fadeIn(300).css("z-index", "10");
}else{
currentImg.removeClass("active").fadeOut(300).css("z-index", "-10");
$(".is-last").addClass("active").delay(300).fadeIn(300).css("z-index", "10");
}
});
});
Hey! Thanks very much for this video. Is it possible to add a voting system to the images? Like per example, from 1 to 10 where people can tell which one they prefer and that then it shows the average points the images have?
thanx alot
your great
its 100% working dude, but i want it with some animation so i add transition property in jquery like this nextimg.addClass('active').css({"z-index": "10","transition": ".8s ease" });
} but still it works like same as before which means no animation so plss tell me solution fast.
my images doesn't move. why?
but after the consol.log('clicked') it worksssssss
:-(
Thanks man!
thank you!!!!!!!!!!!!!!!!!!
I downloaded your files and when I bring it up onto my browser, nothing happens, is everything outdated or? I tried everything out myself, but the only thing that's not working is clicking left or right still.
Yes, every code is correct according to this video (checked 10 times).
Use this:
how to make it auto play cant find any thing
how to download code for this videos?
How do you make a slide-in animation?
Thanks 🔥
perfect
I don't know why, but it didn't work for me. My images don't show up for some reason.
Use this:
Thank you, so so much ;)
Mine is not working
What are your thoughts of using velocity.js vs jQuery?
I actually have never used Velocity. Well not enough to compare
Thaaaanks a looot !!!
I managed to make it go in circles. Like it's infinite.
Can you share your code? I'm trying to do the same.
Thanks .
Used your code and it didnt work in sublime text
Did you delete your Linkedin?
links dont work.
Hope that you'll learn the difference b/w a slider and a slideshow.
anybody has the solution or it to cycles again? lol
Sirr can you create a tutorial on how to integrate node.js in php script?
This Web Development thins has me burned out brad. how do you do this.
currentImg.siblings().last().addClass('active').css('z-index', 99);
for looping :)
Skills
It doesn't work. I tried to integrate it into a project and doesn't work
Use this:
Thanks! Very helpful.
Thank You!