hi, i love your video and your code. i want to do the same thing but whith 4 columuns in the front page. in css i change the "grid-auto-column : calc " to 4 but in the JS dosnt work because is codificate for 3 colums. what can i change to work whith 4 colums
Caso alguém com problemas no redimensionamento esteja com problemas, vai umas diquinhas aqui: - crie uma função para definir os valores de **card width** e **card_per_view*** e então chame essa função quando a página carregar e sempre que a tela for redimensionada. - crie uma função própria para criar os clones dos cards no início da lista; remova clones já existentes e crie novos. Chame essa função dentro da anterior para os clones serem criados com os valores atualizados.
I want to copy the same slider while making a website but when I click left or right icons for the second one it moves the first image slider only ...how to fix it in js
Hey, nice tutorial. Just one probleme: If you are dragging and let go it just snaps right in to place with no transition. Anybody know how to fix that?
The infinite scroll logic does not work properly if you resize the screen and trigger the media selectors to change the number of cards in view. You need to keep track of the original carousel children before you slice the array and register window resize events and recalculate the firstCardWidth, cardPerView and re-slice the array with the next end cards. Other that that...excellent work!
The infite loop of the left button is not working. Any Idea why? Pls someone should answer. An Awesome video regardless. Kudos bro. Pls someone should provide an answer.
Hi, great job. Is it possible to rewrite this code on react? After I tried to rewrite the infinite loop process is not working smooth. Every turn at the last child I had a stuck until I try to swipe 2 more times. What can cause that problem? Any idea?
thank you for this amasing video! i am a total newbie with js, but it worked for me. But now i need to make the slider undraggable, so that only buttons would cause it move. I have commented everything connected to dragging, an yet it remains draggable! how can i fix it?
Hello. I have a request for you. Your work is awesome. Would you please make a video about tab in javascript. Like project tab, skill tab, education tab etc in portfolio website?
TypeError: Failed to execute 'insertAdjacentElement' on 'Element': parameter 2 is not of type 'Element' Chrome throwing this error when using card.outerHTML And when i am just using card it's just placinglast 3 items at start creating copies.. Can anyone help?
great Bro. It is perfect, but the left button is not working infinitively in my project despite I coded the same way as yours. thanks for the knowledge I have learned something new.
Great tutorial, but the problem is, It cant transition when clicking on the right arrow, the left one is no problem.However, I assume a need to set it up such that it reverses back after 6 clicks, but it only does so after 7 clicks. Not sure how to make it transition after 6 clicks on the right.
hello. Awesome work there I tried to download the files from your site, a) I have removed adblock, b) I have tried to use private mode, c) I have use four different browsers and the message about the adBlock keeps popping up.
This is a great lesson! Thank you! But a problem arises if you open such a slider directly on your smartphone. If you open this slider via a smartphone (both in Chrome and Safari), when you scroll using the arrows, the slides shift. That is, the second and subsequent slides are not fully displayed. For screens with a screen width less than 480px, I specified gap: 0px - it helped (but it’s a crutch) But for tablets with a screen smaller than 900px it does not help. There gap was left with the same value. I thought it was my conflicts and typos. But no. I opened your demo on a smartphone and tablet. A shift occurs. Has anyone encountered this? How to solve a problem?
"There are two problems: 1. When changing the screen ratio, autoPlay() function doesn't work. 2. After changing the screen ratio, the slider doesn't loop back to the beginning once it reaches the last card. So, the infinite slide isn't working."
I just had this problem but it was easy to solve, I just had to create two functions: the first sets the values of card_width and card_per_view and is called when the page loads or when the display is resized. The second removes the clones from the cards (if they exist) and creates new clones based on the updated values and is called within the first function.
all this examples is so good but We using nextjs to our prooject and when we trying implement some code from like that examples then it is throw always error.. lol
This is the video I've been looking over these years. Thank you so much.
The best slider tutorial in the world out there!
Really appreciate your videos bro ♥
Don't know others, but I have learned a lot from this video... Thank you very much for subtitles that explains the process and keeps focused.👍
Me : Watches a video of someone else programming instead of working on my own project that I keep putting off
Same 😢
Awesome work man! No words to say. Subscribed
Thank you so much!
At 2:50, how did you change the last img's number while also changing the rest?
Can i add only single div instead of three?
how can i use this multiple times in one page?
Help me. It is working absolutely fine on left arrow but not returning back on clicking right arrow.
Can you tell what may be the error?
hi, i love your video and your code. i want to do the same thing but whith 4 columuns in the front page. in css i change the "grid-auto-column : calc " to 4 but in the JS dosnt work because is codificate for 3 colums. what can i change to work whith 4 colums
i made it work with 5 columns.. it's quite simple, actually
Caso alguém com problemas no redimensionamento esteja com problemas, vai umas diquinhas aqui:
- crie uma função para definir os valores de **card width** e **card_per_view*** e então chame essa função quando a página carregar e sempre que a tela for redimensionada.
- crie uma função própria para criar os clones dos cards no início da lista; remova clones já existentes e crie novos. Chame essa função dentro da anterior para os clones serem criados com os valores atualizados.
is this possible if made with tailwind or bootstrap?
I just made an account just to subscribe to this genius. thanks @codingNepal!
is it possible for you to provide a live link for this, please?
I want to copy the same slider while making a website but when I click left or right icons for the second one it moves the first image slider only ...how to fix it in js
At 13:58, how did you select multiple lines like that?
Holding ALT in VS-Code let's you do that
Can you make this slider with navigation dots please? 🤔
Hey, nice tutorial. Just one probleme: If you are dragging and let go it just snaps right in to place with no transition. Anybody know how to fix that?
i have the same problem, did you found the solution yet?
@@amabsteve2594 same. any solution?
Hi, did you solve it? I have the same problem
Nice video, How do you remove the eventlisteners, cuz each time user clicks or does anything an eventlistener will start popping up and stack?
Thank you very much for video
The infinite scroll logic does not work properly if you resize the screen and trigger the media selectors to change the number of cards in view. You need to keep track of the original carousel children before you slice the array and register window resize events and recalculate the firstCardWidth, cardPerView and re-slice the array with the next end cards. Other that that...excellent work!
The infite loop of the left button is not working. Any Idea why? Pls someone should answer.
An Awesome video regardless. Kudos bro.
Pls someone should provide an answer.
Without seeing your code it will be difficult, but most likely could be an error in the HTML elements id (if you have used a different id)
I have learned a lot from this video but I still wonder, can you scroll 3 images at a time you clicked one
Hi, great job. Is it possible to rewrite this code on react? After I tried to rewrite the infinite loop process is not working smooth. Every turn at the last child I had a stuck until I try to swipe 2 more times. What can cause that problem? Any idea?
Amazing bro, thanks for the tutorial!
Bro great work it fits my project perfectly. However, what should i change exactly in the js code so that i can slide multiple menu not just one
Can i use this in my website with some changes in it !?
I have a question, do you prepare this video in advance? Or do you know all that and you don't need to think so much about what you will do?
Can you make a website with audio recorder and a writing pad with a video inbuilt guiding how to record and write.fully responsive.
Hi can you show how to create train running status using rapid API key
Okay, I'll think on it.
@@CodingNepal thanks,I must say you are making us how to do coding with your videos and website, your website is very informative...
Love ur channel , keep it up
How do you learn do that by yourself? How can i get this level in Javascript?
thank you for this amasing video! i am a total newbie with js, but it worked for me. But now i need to make the slider undraggable, so that only buttons would cause it move. I have commented everything connected to dragging, an yet it remains draggable! how can i fix it?
bro please same video with explanation why u used this that etc etc...
Thanks, This was so much helpful.
Salam sir
I want to move autoplay from left to right ? How can
carousel.scrollLeft -= firstCardWidth. This can lead to slide your images from LEFT to RIGHT
Hello. I have a request for you. Your work is awesome. Would you please make a video about tab in javascript. Like project tab, skill tab, education tab etc in portfolio website?
Are you talking about this tab? Video: ua-cam.com/video/QtwXQdlvyWA/v-deo.html
@@CodingNepal yeah. Got it. Thanks
TypeError: Failed to execute 'insertAdjacentElement' on 'Element': parameter 2 is not of type 'Element'
Chrome throwing this error when using card.outerHTML
And when i am just using card it's just placinglast 3 items at start creating copies..
Can anyone help?
Hi CodingNepal
Please, can you make video on custom context menu on specific element like or or any like this?
Thank you
great Bro. It is perfect, but the left button is not working infinitively in my project despite I coded the same way as yours. thanks for the knowledge I have learned something new.
Exactly... The infite loop of the left button is not working. Any Idea why? Pls someone should answer
I encountered the same problem@@mobileking3911
thank you so much for this , really improved my knowledge of stuff
Bro this is AWESOME 😎👍
Happy to hear that :)
Thanks for this... without speak your code speaks a lot.🙂👍 keep it up.. like this great work
Great. lean a lot from this.
this is very helpful ! thanx
Great tutorial, but the problem is, It cant transition when clicking on the right arrow, the left one is no problem.However, I assume a need to set it up such that it reverses back after 6 clicks, but it only does so after 7 clicks. Not sure how to make it transition after 6 clicks on the right.
I resolved the issue: it was due to not the same card size and therefore grid-auto-columns and gap calculation ratio.
Very good!!!! Very big thanks!!!)))🥰🥰🥰🥰
hello. Awesome work there I tried to download the files from your site, a) I have removed adblock, b) I have tried to use private mode, c) I have use four different browsers and the message about the adBlock keeps popping up.
does anyone else have the problem that when you add "overflow: hidden" it hides the bottom cuts off the images like half way
U might have given height to it , please check that
Thank you very much, this was really helpful and educative 👍
Good Job bro...amazing
This is a great lesson! Thank you!
But a problem arises if you open such a slider directly on your smartphone.
If you open this slider via a smartphone (both in Chrome and Safari), when you scroll using the arrows, the slides shift.
That is, the second and subsequent slides are not fully displayed.
For screens with a screen width less than 480px, I specified gap: 0px - it helped (but it’s a crutch)
But for tablets with a screen smaller than 900px it does not help. There gap was left with the same value.
I thought it was my conflicts and typos. But no. I opened your demo on a smartphone and tablet. A shift occurs.
Has anyone encountered this? How to solve a problem?
Hi bro, is itworking for blogspot?
Dude, thanks a lot 10/10
Very good. Thank you!
thank you your video vary use full for me
bro i love your projects please can make more videos on php
thank you so much for this amazing video I have learned many think from it 🌹
Thank you please make it's pagination buttons
Супер! Спасибо тебе огромное! 👍👍👍
Can't reach code?!
Bro Next Challange/Task IMG Background Changer And Png Maker 🙏🙏🙏🙏
Awesome ! Thanks.
Wow, u made it so simple. Thanks a lot
thanks u much for giving code
I like Ur CN logo
Can u give a hint on how to make something like that
🙏🙏🙏🙏🙏🙏🙏
Dai euta Q&A video chaiyo k hamlai
Hunxa brother, I'll think on it.
"There are two problems:
1. When changing the screen ratio, autoPlay() function doesn't work.
2. After changing the screen ratio, the slider doesn't loop back to the beginning once it reaches the last card. So, the infinite slide isn't working."
I just had this problem but it was easy to solve, I just had to create two functions: the first sets the values of card_width and card_per_view and is called when the page loads or when the display is resized. The second removes the clones from the cards (if they exist) and creates new clones based on the updated values and is called within the first function.
all this examples is so good but We using nextjs to our prooject and when we trying implement some code from like that examples then it is throw always error.. lol
Obrigado, ajudou no meu projeto.
Please provide the code files and the links in the description as soon as possible for free 🙏 thank you
Sure, the source code will be free, and a link will be provided soon in the description.
@@CodingNepal Yeah sure. Please do it for all the videos if it is possible. Thank You so much brother 🙏
Thank you!
Thanx Bro.
really helpful thx
First ❤
Great! Hope you enjoyed the video.
Aaaaaaaah men damn damn keep going
Brillant !
Wow awesome
Please make e full screen image slider 😅
I thought you were one of these someone
😕😕
Thank you
thank you very muc
You're welcome
scroll-behavior: smooth; don't work
great
Great video on image slider. Is anyone here working on program developer? please message me.
great great
Thank you
The CSS 💀
i love you
la madre para los mudos con voz
Asowme
dislike por no poner codigo
Nice bro