THIS IS ABSOLUTELY AMAZING. I may not use RUclips, and I am in a country where I cannot give online donations, but I did subscribe in hopes that my subscription makes up for your kindness and making the code opensource. TRULY APRICIATE YOU BRU.
You can Watch this video: ruclips.net/video/gLK3Svsxx-Q/видео.html In this project I made it responsive and added a top menu. Though, this was not responsive menu. Another Project I will create a complete carousel slider
Thank you very much GENIUS!!! It turned out GREAT!!! EXCELLENT effect for the Slider!!! Greetings from Buenos Aires!!! I already subscribed to your channel!!!
Good. Why is it not working in a react project? everything becomes null but if you disable js file on first load then enable it, this work untill the page loads and an error occurs
you can display for the whole screen. So, I will suggest you to maintain 1920px (width) and 1080px (height). And If you use Landscape photo before displaying, the animation will not be proper. And I think it's unnecessary.
my arrow buttons dont work, there isnt no error in the js code, but i dont know where its wrong, cause it wont let me go back and forth between slides. Please help me
ok. You can do it easily. First of all, In the same method, add 30 images in the HTML code and run the code. It will work. There is no need to modify the JavaScript code. And let me know. Thanks.
Very cool. I would like to place the image covering the entire container, I tried to modify it but I got confused with the code. Can you tell me where to modify?
may I ask ? why the javascript syntax does not work then when I ask chatgpt to insert the javascript code into the new html it succeeds and can press slide next and prev . hope you can explain
Hello bro! I have a big problem, and I wonder if it's okay to tell you. The tutorial image slider is my ideal first page, but the issue arises when I create my second page-it seems to be hidden behind the first one. I'm not sure how to fix it; perhaps the style of the first page is affecting the second. 🤔
@@strobriyel1812 Actually, if I start from the first image then there is a problem that when I click the next button then there is show a black page, that's why I start from the second image. So, you can use the second image as your front page.
It works great. Thanks! Just a question. I need this slider on the fourth page of a website, but it appears on my first page(( Although I created a separate section.
How do I make it responsive? And my pictures one of it is still sticking at the left side and I follow everything you did, I even went through your code here but still the same
You need to create a responsive navbar. Another video is coming. In that video, I will show how to set responsive navbar in this slider for all devices.
THIS IS ABSOLUTELY AMAZING. I may not use RUclips, and I am in a country where I cannot give online donations, but I did subscribe in hopes that my subscription makes up for your kindness and making the code opensource. TRULY APRICIATE YOU BRU.
Simple and Smooth love it bro
este tiene que ser uno de los mejores tutoriales que he visto en mi vida, excelente
que belleza de sitio hiciste--- esta increíble!!
Big thanks you. It's amazing and I've really appreciate your teaching method ✅
if you add top menu and responsive menu it will be more helpfull for everyone and great job
You can Watch this video: ruclips.net/video/gLK3Svsxx-Q/видео.html
In this project I made it responsive and added a top menu. Though, this was not responsive menu. Another Project I will create a complete carousel slider
thanks for your video, really help me with my confuse in college
masta kaam kiya apne hamara toh kaam hogaya ...dhanyawadam
Thank you very much GENIUS!!! It turned out GREAT!!! EXCELLENT effect for the Slider!!! Greetings from Buenos Aires!!! I already subscribed to your channel!!!
Thank you for the tutorial.Its awesome :)
awesome bro. you are doing great for us. thanks a lot bro... thanks a lot . we are learning from you
10 of 10!!!!
Абалденно! Очень красиво!! Вы большой молодец!! Подписка + like
thank you man!! it saved me
Good. Why is it not working in a react project? everything becomes null but if you disable js file on first load then enable it, this work untill the page loads and an error occurs
Hi your tutorial is vrey impressive i'm your new subscriber from philippines i'm beginner for self study in HTML & CSS
Good luck
Amazing tutorial thx so much I made it :)
perfection 🤝
Kudus 👉 ur video was super helpful
Thanks alot
thank you bro
what is your vsc theme, love it so much
Thankyou so much . This is amazing.
I love it man. thank you!
amazing work thank you
Wooow bro I love this effect your channel subscribed
Thanks 🔥
how to make this in react js ?
Use your logic bro 😊
Amazing! Congrats bro
Clicking on my project does not switch to the other slide.
Why is that, there is no problem in my js codes also😪
Same
i want to ask you. Approximately, what the size is each photo and can i use landscape photo before displaying them?
you can display for the whole screen. So, I will suggest you to maintain 1920px (width) and 1080px (height). And If you use Landscape photo before displaying, the animation will not be proper. And I think it's unnecessary.
nice
Great video...❤
my arrow buttons dont work, there isnt no error in the js code, but i dont know where its wrong, cause it wont let me go back and forth between slides. Please help me
I provide the source code. you can get help from the source code. maybe you did something wrong.
can you tell me what to do if i had to make this with at least 30 images
great work by the way
ok. You can do it easily. First of all, In the same method, add 30 images in the HTML code and run the code. It will work. There is no need to modify the JavaScript code. And let me know. Thanks.
@@creativejscoder it worked !! thanks man. really appreciate it .💗
me encanto y aprendí mucho :-)
can you provide the imgs
BTW great Video
😀🥰😍
Very cool. I would like to place the image covering the entire container, I tried to modify it but I got confused with the code. Can you tell me where to modify?
You need to modify the main container size.
Okay, I got it. I thank
may I ask ? why the javascript syntax does not work then when I ask chatgpt to insert the javascript code into the new html it succeeds and can press slide next and prev . hope you can explain
Buen dia me gusto te sigo en YT
pases buen dia
it works great but i can't see the arrow icons
btw good job teaching us new ideas and stuff🔥🔥🔥
Check the code attentively. Maybe there was something wrong of you code.
Is there a name for the image slider you made?
may i ask how to full screen the pictures displayed landscape? anyways.. i really appreciate your website.. it really helped me in my project 🎉
A tutorial is coming...
Hello bro! I have a big problem, and I wonder if it's okay to tell you. The tutorial image slider is my ideal first page, but the issue arises when I create my second page-it seems to be hidden behind the first one. I'm not sure how to fix it; perhaps the style of the first page is affecting the second. 🤔
@@strobriyel1812 Actually, if I start from the first image then there is a problem that when I click the next button then there is show a black page, that's why I start from the second image. So, you can use the second image as your front page.
hi, what to do if i want the image slider to appear in my second/third section?
Is there a way to make the movement automatic? I think it would look great as a hero baner
You can see this tutorial: ruclips.net/video/gLK3Svsxx-Q/видео.html
Thank a lot
Nice Video Brother!
It works great. Thanks! Just a question. I need this slider on the fourth page of a website, but it appears on my first page(( Although I created a separate section.
I will try to make a solution to do this.
Did you put the code in a Layout file?
Hi from
@@JJoce21, yes, I did.
amazing stuff mate
well done bro keep it up
hey any one can tell me, which extension they use in Highlight DIV Section
Thank you so much !!but navbar is not appering infront of images why it is happening can u tell?
use Z-index. And you can see this: ruclips.net/video/gLK3Svsxx-Q/видео.html
Thank you
is it fine to have this in React version
Does it work for Unbounce Pages?
Can you update this for mobile and tablet responsive plz 👀
I made it responsive
@@JJoce21 do u have the code uploaded?
New subscriber
How do I make it responsive?
And my pictures one of it is still sticking at the left side and I follow everything you did, I even went through your code here but still the same
Watch This tutorial for responsive design: ruclips.net/video/gLK3Svsxx-Q/видео.html
Do you know why one picture is still sticking at my left side?
Style.css m output nau aarah h guyd...help me plsss..pictures center n nai aarhi h
how can i make it work on mobile... the nav bars are not setting up well with small screen's
You need to create a responsive navbar. Another video is coming. In that video, I will show how to set responsive navbar in this slider for all devices.
does this works when i use notepad?
yes
How to make this slide show automictic too
May i ask if you have the css code for mobile responsive? Appreciate it. Thank you!
watch this tutorial:- ruclips.net/video/gLK3Svsxx-Q/видео.html
Where did you get your images?
Unsplash
This is responsive ?
See this:- ruclips.net/video/gLK3Svsxx-Q/видео.html
Hii bro I used this source code and changes images......and upload on pen.new but images hi nhi dikh rhe....kya koe solution bta sakte ho....
In Codepen, You have to use image link. Maybe you used local Image Source. That's why it is not working.
I try to convert the JavaScript code into react, it ddn't work. can you please help me.?
It's not about converting man. I hope you found a way.
How to use it with WordPress
The sliders starts with picture 2 in fullscreen. Is there a way to make it start with picture 1?
Yes. You can see another tutorial of this channel same on this topic. I'm giving the video link in the description box.
How I add footer in this website
can do same
by touching image
and move scrole multi image
and click image
to zoom and and and
Yes. Nothing Impossible. Just have to think.
@@creativejscoder where is the lesson please
what to change if i want to add more images?
try this:- ruclips.net/video/gLK3Svsxx-Q/видео.html
thank you for this lesson, but how can I make this big image's background: no-repeat; ??? I can't responsive this
for making it responsive, another tutorial is coming very soon.
@@creativejscoder oh thanks
if we want to do this slider for three images then what to do?
Then, this three images will come one after another as a loop.
do you have any github repo for this project ?
No. For this project I used codepen to share source code.
Does anybody can help how to make this in react js ???
bro i want this all pic set in right corner beacuse hide faec how to solve plz
teel me
right corner means?? right top or right bottom?
Plzzz help me my text is not showing or it is showing on the right side not on the image
use the background-img property. not img tag.
Bro sara code check kia bar bar but next arrow button is not working plz help me
did you check the source code that I provided?
can make an update and make it responsive?
ruclips.net/video/gLK3Svsxx-Q/видео.html In this tutorial, I made this fully responsive.
arrows not working even when i downloaded source code
how do i fix
ok, let me see
I checked the code, I don't find anything wrong. Can you send me the error message?
why are the arrow buttons not showing in mine
May be there is something wrong. Check the code again very attentively..
My js isn't reacting , what am I to do ?
did you link your JS file with your HTML file?? or is there showing any error in the console?
whats the size of the picture youve used?
you can use 1920 x 1080px
@@creativejscoder thanks mate
@@creativejscoder is there a way to use higher res? i tried using higher res pic and the web is laggy
@@ImJazquonte Download the high resolution pic. Then decrease the file size without destroying the resolution. Then you can use..
@@creativejscoder aight, thanks
Mere to image slider Next na prev ho rhe hai
Why js isnt working 😾
My next and previous button not working
Is there showing any error?
call the script for linking the javascript file
add thison your HTML
where i can get the image sir ?
copy the image link from the codepen then search in the google.
How to use this in my website
I'm giving another tutorial all about this.
Please provide the link of those videos. I completely searched your channel but I can't found that videos
why it doesnt work i copied the code after endlless attempts and stilll it doesnt
Okk. Let me see
I can see that it's all perfect. Why it is not working for you, I can't understand. First of all, check the code in the Codepen.
@@creativejscoderI somehow managed to make it work but thanks
is not responsive can you do one responsif another day ?
Already, another responsive design available in this channel.
why mine doesn't work?
try this:- ruclips.net/video/gLK3Svsxx-Q/видео.html
why does it not show on the browser
Is there displaying any error???
@@creativejscoder I can see the transition happening but the content isn't coming along
@@omkarchavan2852 Content means image?? Maybe you used the wrong path of the image.
I followed every code yet it's still not working?
which section is not working?
Bro isss code mujha send kara sakta ho ❤
Source code link is available in the description box.
nice job but i don't think its responsive on all devices
I made it responsive on all devices
@@JJoce21how to make it responsive my media quary is not working properly please help me ❤
@@tushardodke498 Sure!. How can we contact us?
@@tushardodke498 sure! How can we contact us?
auto slide move ksa kr skta hain
very simple. You can do it using very few lines of JavaScript. I will provide a tutorial based on it.
the buttons are not working
Is there any error showing in the console?? You can take help from the source code.
Why don't you explain the code's?!
the button does not work
You can take help form the source code.
Where code bro
Check the description box. Here I provided source code link.
Pls mine is not working
Which portion is not working? Let me know.
Bro next arrow button not working what to do
It is not about not working ! May be you did something wrong. You can check the source code.
Same mera b next arrow button work ni kar raha apka problem solved hogya plz help me
@@soniamunawar1621 document.addEventListener('DOMContentLoaded', function() {
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');
next.addEventListener('click', function(){
let items = document.querySelectorAll('.item');
let firstItem = items[0].cloneNode(true);
document.querySelector('.slide').appendChild(firstItem);
document.querySelector('.slide').removeChild(items[0]);
});
prev.addEventListener('click', function(){
let items = document.querySelectorAll('.item');
let lastItem = items[items.length - 1].cloneNode(true);
document.querySelector('.slide').prepend(lastItem);
document.querySelector('.slide').removeChild(items[items.length - 1]);
});
});
Try this code..
Image link
I provided the github link in the description box. Here, you can find the image link.