How to Create Image Slider in HTML, CSS & JS - Step by Step | JavaScript Projects
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- In this video, learn How to Create an Image Slider in HTML, CSS & JS - Step by Step | JavaScript Projects. Find all the videos of the JavaScript Projects in this playlist: • JavaScript Project Ser...
💎 Get Access to Premium Videos and Live Streams: / @wscubetech
WsCube Tech is a leading Web, Mobile App & Digital Marketing company, and institute in India.
We help businesses of all sizes to build their online presence, grow their business, and reach new heights.
👉For Digital Marketing services (Brand Building, SEO, SMO, PPC, SEM, Content Writing), Web Development and App Development solutions, visit our website: www.wscubetech...
👉Want to learn new skills and improve existing ones with in-depth and practical sessions? Enroll in our advanced online courses now and make yourself job-ready: courses.wscube...
All the courses are job-oriented, up-to-date with the latest algorithms and modules, fully practical, and provide you hands-on projects.
👉 Want to learn and acquire skills in English? Visit WsCube Tech English channel: bit.ly/2M3oYOs
📞 For more info about the courses, call us: +91-7878985501, +91-9269698122
✅ CONNECT WITH THE FOUNDER (Mr. Kushagra Bhatia) -
👉 Instagram - / kushagrabhatiaofficial
👉 LinkedIn - / kushagra-bhatia
Connect with WsCube Tech on social media for the latest offers, promos, job vacancies, and much more:
► Subscribe: bit.ly/wscubech...
► Facebook: / wscubetech.india
► Twitter: / wscubetechindia
► Instagram: / wscubetechindia
► LinkedIn : / wscubetechindia
► TH-cam: / wscubetechjodhpur
► Website: wscubetech.com
-------------------------------------| Thanks |--------------------------
#JavaScript #JavaScriptProjects #ImageSlider
VERY GOOD EXPLANATION, no destructive music, clear voice no jargon, no beating around the bush straight to the point every line explained THANK YOU VERY MUCH.
It's was easy😅, just takes a little thinking.
const goNext = () => {
if (counter < slides.length - 1) {
counter++;
slideImage();
}
};
const goPrev = () => {
if (counter != 0) {
counter--;
slideImage();
}
};
I did the same as shown in video but I am getting error.
When I checked in console it is showing slides.forEach is not a function.
Please help
Yeh tw Galat code hai try kia but hua he nahi😊
@@Himanshua09 make sure you used querySelectorAll() not querySelector()
This project help me. And I create with help of slider automatically slide prev and Next.
Thanks Sir!
Following changes must be done in 'goPrev' and 'goNext' functions to fix this BUG:
const goPrev = () => {
if (counter == 0) {
counter = slides.length - 1;
slideShow();
} else {
counter--;
slideShow();
}
}
const goNext = () => {
if (counter == slides.length - 1) {
counter = 0;
slideShow();
} else {
counter++;
slideShow();
}
}
Thanx buddy
I did the same as shown in video but I am getting error.
When I checked in console it is showing slides.forEach is not a function.
Please help
Can anyone tell me how he hoisted arrow function (slideImage()) 🤔🤔🤔
use array from() method to fix this foEeach loop error@@Himanshua09
OKAY I HAVE BEEN TRYING TO RECREATE THIS WITH A DIFFERENT FUNCTION AND IT DID NOT WORK I AM LOSING MY MINF BUT THANKS FOR THIS CODE I AM SO DAMN GRATEFUL BECAUSE I HAVE A WEBSITE TO MAKE AND SUBMIT IN 5 DAYS FOR A PROJECT AND I HAVE BEEN STUCK AT MAKING THIS CARSOUEL FOR 2 DAYS BECAUSE MY JAVA SCRIPT IS BAD HOWEVER I KNOW THAT YOU DON'T CARE SO THANKS THANKS THANKS THANKS THANKS ALSO THANKS TO THE VIDEO MAKER GUY FOR THE OG CODE CUZ I DON'T KNOW JS THAT WELL AND UR EXPLAINATION WAS GREAT OKAY IM RUNNING OUTTA TIME BY THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS THANKS
function gonext() {
if(count == 3){
return
}
count++
slider()
}
function gopreview() {
if(count == 0){
return
}
count--
slider()
}
Aapka explain karnay ka tarika bahuth badiya. Thank you very much.
My favourite tutor on internet
my also
Inki GitHub I'd kya h
@@HassaanHaider313 inki GitHub I'd kya h
This is a very very helpful video
Thanks for sharing
const slides = document.querySelectorAll(".slide")
var counter = 0;
slides.forEach(
(slide, index) =>{
slide.style.left = `$(index * 100)%`
}
)
const goPrev = () =>
{
counter--
slideImage()
}
const goNext = () =>
{
counter++
slideImage()
}
const slideImage = () =>
{
slides.forEach(
(slide) => {
slide.style.transform = `translateX(-${counter * 100}%)`
}
)
}
Excellent Explanation Sir!!!
Thanks sir please keep making video and explaining everything very neatly step by step
Wa wa wa kya teaching mja aa gya ❤❤ 1 no sir 🎉
Sir please make a video on responsive nav bar
great job brother...its very helpful for me
best javascript playlist which have helped me in getting a grip on javascript.
Welcome and Thanks a Lot.
thanks a lot buddy,this video really saved my ass.
This is really very very very helpful for me using this concept I make better the my UI
This is a very helpful video.
Thanks sir
REALLY HELPFULL THANKU!❣
Awesome, very clear and easy
Thanks bro )
great video
Sir this video help me a lot but meko js bilkul nhi samajta😢
Js apko nhi smjhega apko js ko smjhna pdega😂
sir this is very helpful
very helpfull
this series was pretty helpful, now i am comfortable in javascript
I did the same as shown in video but I am getting error.
When I checked in console it is showing slides.forEach is not a function.
Please help
@@Himanshua09
const slides=document.querySelectorAll('.slide')
let counter=0
slides.forEach((slide,index)=>{
slide.style.left=`${index*100}%`
})
const slideImage=()=>{
slides.forEach((slide)=>{
slide.style.transform=`translateX(-${counter*100}%)`
})
}
const goNext=()=>{
counter++
if(counter>3)
counter=3
slideImage()
}
const goPrev=()=>{
counter--
if(counter
@@Himanshua09 console and check that have you selected all the slides in the slide variable ...
@@Himanshua09 check slides is array of images items or not.
Very nicely explained sir.
Nice explanation
Wow great explanation
I did the same as shown in video but I am getting error.
When I checked in console it is showing slides.forEach is not a function.
Please help
awesome...bohot sahi
nice
I did exactly what you did, and I even made sure that I did by checking my code. However, when I hit the next and previous buttons, you can tell they are being pressed however, the images don’t change at all
check again with zoom
Same issue, did you find any solution?
Yes even I got this issue, images doesn't change after clicking next and prev
slide.style.transform = `translateX(-${counter * 100}%)`; may be in this line you are using single quotes use tilde copy paste this code line
@@Vikrant_DubeyI ha have same issue 😔 Maine check Kiya to console me error hai goNext is not defined at HTMLbuttonElement.onclick aa raha hai please help 😢
Excellent, thank sir.
Would you please make autoplay list
easy to understand
Can anyone tell me how he hoisted arrow function (slideImage()) 🤔🤔🤔
Sir pls make video on ping pong game by javascript , pleaseee sir it will be very helpful
Aapko JavaScript aata hai
Loved it!! you made it super easy to understand
Dear sir, Thanks for this type of video but please provide it's source code
What level of project should we done for internship
Big fan
const prev = () => {
if (counter > 0) {
counter--;
slideimg();
}
}
const nxt = () => {
if (counter < slides.length - 1) {
counter++;
slideimg();
}
}
Please make a separate playlist for this
Sir me ne fiverr pe six months pehly account bnaya tha, kisi waja se kam start na kr ska, WordPress se related gigs bnai thi
Now i want to start freelancing again because im free now
Pochna just ye he k muje new account bnana chahye ya wohi purana account
Agr wohi account use kru to kya customer ko ye ni lge ga k is ne to six months se ak b order complete ni kya, customer negative ni ho jay ga? Pls guide me
Freelancing me kya karna hota hai
Kya programing language aana chahiye
Esme kya karna hota hai
Kya kya aana chahiye
Thank youuu
nice video
Sir can you please make it infinite.that after last image first image will run.
mere hisab se bright theme better hai
super
Superb
Could you please provide some php project????? Please....
please send us logic that empty box which is not found in the github link I really need that code ..
Error Index is not recognize
const slides = document.querySelectorAll(".slide")
var counter = 0;
console.log(slides)
slides.forEach(
(slide,index) => {
slide.style.bottom = '${index * 100}%'
}
)
index Error
Sir where this code is available, may you please provide the link?
Can use this for the first the slide after last slide
translateX(-${(counter%4)*100}%)
Yes bro...👍
bro but in my laptop this ${} does not work i dont know why
clean
my javascript code is not working plz share the code.
Jquery se slick skider kese lagaye
why do we need to write slide image function twice?
Coz first we have to arrange the images in a systematic way, in a line. Then we have to slide those images on that line of images.
In these case the first slide function arranges the images and the second one is the function for the slider
Hope these helps 🙂✊
I did the same as shown in video but I am getting error.
When I checked in console it is showing slides.forEach is not a function.
Please help
Can anyone tell me how he hoisted arrow function (slideImage()) 🤔🤔🤔
const slideImage = ( ) => {
//code for functions
}
Ye example to automatically chalta hai bro, however, good job
bhai kiska ye transition effect aa rah hai kya ?? mera pata nhi kyu sirf image change ho raha hai but transition me slide nhi ho rah!
I tried it as it is but not working
❤❤❤
Please avoid text display on screen at code editor page
Sir kon s theam use karte hoo in vs code
Not working
how to make this auto change😅
where is your github link
how can I make them switch automatically
Sir iska source code kha Mila ga
if you provide source code then it will easy bro
in script code why this is not working for me
slides.forEach(
(slide,index) =>{
slide.style.left=`$(index*100)%`
}
)
It's brackets should be changed to
${index*100}%
@@brijeshpoojary1791 kk thnks
After dollar sign use curly braces {}, not parenthesise (), while using template literal...
Slide end kaise hoga
source code?
where is the link for source code
I cannot use .style.left or .style.transform. There seems to be an error with the "slide" variable but I've followed every step.
same problem
Where is the github link?
Sir code not working
❤️❤️❤️❤️
Ye Jo aap bolte h to likh jata h isse kafi dikkat hoti h
Can you share code of this image slider
ye tatto hai nai kare ga
@@MUHAMMADUMAR-fe7ec yr img slider ki koi range hi ni h
Back krty rho hota rhy ga
Here you go,
const goNext = () => {
if (counter < slides.length - 1) {
counter++;
slideImage();
}
};
const goPrev = () => {
if (counter != 0) {
counter--;
slideImage();
}
};
" 0 * 100 " = zero "0" hota h sir ,"1*100"= 100 hota h sir
Sir g me ne like subscribe or share kr ke apni fee pay krdi hy
translate spelling mistake😅
sir pehle haddi to banalo fir style lagana!
What if we want the image slider to be like a wheel. So that when you click on the next button after the last image, the slider still slides forward but shows the first image instead of sliding backwards to the first image.
And vice versa
i was also looking solution for this case
Use modulo on counter
the code is not working 😕
it is working for me
Waste of time. Incomplete
Sir please give this projector source code or GitHub link
I did the same as shown in video but I am getting error.
When I checked in console it is showing slides.forEach is not a function.
Please help
check in console, u may not be assigning the images in slides variable.
alos check JS connection
here is the solution for this bug
function Prev() {
if (counter == 0) {
} else {
counter++
slideimage()
}
};
function Next() {
if (counter == (slides.length*-1)+1) {
} else {
counter--
slideimage()
}
}
What if we want the image slider to be like a wheel. So that when you click on the next button after the last image, the slider still slides forward but shows the first image instead of sliding backwards to the first image.
And vice versa
my javascript code is not working plz share the code
Sir can you please make it infinite.that after last image first image will run.