Multi Item Slide Show / Carousel using Tailwind CSS and JavaScript | தமிழ்

[@Userkazt]

Your are such great developer

[@shweta_sharma]

I don't really comment on videos but you are a life saver !! Literally thank you so much🤩

[@JAFSCodeSchoolTamil]

Thank you 😊

[@CaunaRoblesyuriCristian]

Excelente video, ayer empezé con Tailwind y me gusta muchísimo por que sé mucho de css puro y creo q me quedaré con tailwind por defecto para muchos proyectos de mis clientes. Tienes un ritmo rápido y claro en tu explicación, me agrada muchísimo, muchas gracias hermano! Saludos desde Perú.

[@JAFSCodeSchoolTamil]

Thank you so much 😊😊😊😍

[@epicefacile6340]

Fantastic video ! Great quality and great content. I'm gonna try to implement it on my website... thanks Aṇṇaṉ from FRANCE !

[@JAFSCodeSchoolTamil]

Thank you 😊😊

[@SrushtiGosai]

i don't understand tamil still this video helped me Thankss!!

[@JAFSCodeSchoolTamil]

Thank you 😍😍

[@vignesh1307]

Very usefull. ❤

[@JAFSCodeSchoolTamil]

😊😊

[@kucinghitam7350]

thank you, nice tutorial! keep it up

[@JAFSCodeSchoolTamil]

Thank you 👍👍

[@tabithakimani7499]

Bro thank you. I love you for this.

[@JAFSCodeSchoolTamil]

Thank you 😊😊😊

[@manikandang7091]

It's very helpful for me.

[@JAFSCodeSchoolTamil]

Awesome 😎

[@prashantsingh5142]

Detailed video on slideshow ..videos like this helps alot My next button is not working .how can i fix it?

[@JAFSCodeSchoolTamil]

Can you post your code. Will be able to help you if i see your code.

[@prashantsingh5142]

let sliderContainer = document.getElementById('sliderContainer'); let slider = document.getElementById('slider'); let cards = slider.getElementsByTagName('li'); let elementsToShow = 3; if(document.body.clientWidth1000){ elementsToShow = 2; }else { elementsToShow =3; } let sliderContainerWidth = sliderContainer.clientWidth; let cardWidth = sliderContainerWidth/elementsToShow; slider.style.width = cards.length*cardWidth+'px'; // slider.style.transition='margin'; slider.style.transitionDuration ='1s' for (let index = 0; index < cards.length; index++) { const element = cards[index]; element.style.width = cardWidth+'px'; } function next(){ if(+slider.style.marginLeft.slice(0,-2)!= -cardWidth*(cards.length-elementsToShow)) slider.style.marginLeft = ((+slider.style.marginLeft.slice(0,-2))-cardWidth)+'px'; } function prev(){ if(+slider.style.marginLeft.slice(0,-2)!= 0) slider.style.marginLeft = ((+slider.style.marginLeft.slice(0,-2)) + cardWidth) + 'px'; }

[@prashantsingh5142]

My prev and next buttons are not working properly.plz help me out

[@SebastianPerezG]

Excellent Tutorial , i do not understand your language , but programming is only just one common language for all !! Question, i think both buttons are in reverse order or is just me ?

[@JAFSCodeSchoolTamil]

Wow. Thanks for you feedback. Yes that's my mistake. It's in reverse order. Happy that you got it. ☺️☺️

[@SebastianPerezG]

@@JAFSCodeSchoolTamil Yes , i adapted for only one slide , i tried many others sliders, but none worked , slick , swipe js , anyone broke at some point , also i tried flowbite , just the carousel , and also didn't worked but just from the start , the example didn't work. I'm glad that i found your channel and i clicked the subscribe button, maybe you can add some english subtitles ( also english is not my first language ) , so i can understand your explanations. Keep going !!

[@JAFSCodeSchoolTamil]

Thank you sebastian. Felt so happy reading your comment. Not getting time to add subtitle but i really like to add. Soon after getting monetization in youtube i will start adding subtitles.

[@duraimurugan8047]

keep going .... Nice video

[@yayaismailousmaneyaya4885]

you are best!

[@JAFSCodeSchoolTamil]

Thank you ☺️☺️

[@dhineshdhinesh6276]

Romba romba romba thanks bro

[@JAFSCodeSchoolTamil]

My pleasure bro. 😊😊

[@homekraftt]

super

[@JAFSCodeSchoolTamil]

Thank you 😊

[@danishsiluvai3370]

Grt job Brother

[@JAFSCodeSchoolTamil]

👍👍

[@poojajoshi332]

Excellent video, But I want to loop in the slider, so please share the video or code in the same

[@JAFSCodeSchoolTamil]

I have not posted any videos related to this. Will try to post a video soon.

[@poojajoshi332]

@@JAFSCodeSchoolTamil can we use jQuery cdn in tailwind? Is this the correct method to way or not

[@Madhanprasanna]

Bro combination for development sollunga bro Like front end ku( html ,tailwind, js For this 3 combo ku oru suitable database, suitable backend ) sollunga bro

[@JJ-ot3ps]

THANKs!!!! Just a quick question why is the slidercontainer width is w-10/12, i thought if the other two divs are 2/12 each, then sildercontainer width should be 8/12? no?

[@JAFSCodeSchoolTamil]

Yes you are right. Thanks for letting me know. I may have put 10 by mistake.

[@kiranraveendran7524]

do more videos brother

[@JAFSCodeSchoolTamil]

Sure kiran.

[@estiloquio]

Excelente !!!!

[@JAFSCodeSchoolTamil]

Thank you 😊

[@AbiRamABII]

slider.style.marginLeft = ((+slider.style.marginLeft.slice(0,-2))+cardsWidth)+'px' // sir why we have to use the + before slider (+slider)...plz explain

[@JAFSCodeSchoolTamil]

marginLeft will return a string. Example - '100px'. We use slice(0,-2) to remove the last two characters. So in this example '100px' will become '100'. and slice will return the value as a string. generally if we add some value to a string it will not get added. It will get concatenated. So to make that value to a number, we use +. if a value is a number but its type is string. we can convert its type from string to number by just adding a + behind that variable. Hope my answer is clear.

[@AbiRamABII]

@@JAFSCodeSchoolTamil well & clear!, Thankyou got the thing..sir,currently i'm learning REACT will you post any videos related to REACT.?

[@JAFSCodeSchoolTamil]

@@AbiRamABII I know only the basics of React bro. I Will post videos on that after i get comfortable. Now am posting videos on angular.

[@SebastianPerezG]

How can i adapt this with dots a the bottom ? do you have any clue how to do it ?

[@JAFSCodeSchoolTamil]

Just create a ul with flex and add all dots into li. hope you know about nth child. so based on the current slide number access the nth clild of the dots in javascript and give it a different color. So that it will look the current slides dot is active.

[@SebastianPerezG]

@@JAFSCodeSchoolTamil Will be nice if you can make a small short about this and adapt the JS so when you click on one dot , shows the correct slide or page.

[@kazizamil9238]

how can i add horizontal scroll of this item slide?

[@JAFSCodeSchoolTamil]

Will post a video for that soon

[@JAFSCodeSchoolTamil]

You will have to do what we did in to bottom size. Like instead of giving that big width you have to give big height. instead of adjusting LEFT you have to adjust BOTTOM to scroll.

[@logeshwarsb4614]

Bro one help can you show me how to make automatic sliding without button

[@JAFSCodeSchoolTamil]

Will post a video for that soon bro. Thanks for asking.

[@arjunnayak9088]

Better if you leave a source code link here in the description.

[@JAFSCodeSchoolTamil]

I usually post source code for many of my videos but unfortunately for this video I deleted the source code from my machine by mistake. Sorry

[@cholasimmons]

@@JAFSCodeSchoolTamil whaaaaat 😭 the slider is perfect

[@zanaouattara8974]

Bonjour professeur, vraiment merci et c'est été un très bon projet. Mais je voulais savoir, la partie Js, comment la réalisé en react et tailwind. Merci infiniment pour la demo

[@JAFSCodeSchoolTamil]

Merci pour ton compliment. Cela signifie beaucoup. Je n'ai posté aucune vidéo dans React. Mais j'ai une vidéo avec Angular et tailwindCSS. Voici le lien. kzbin.info/www/bejne/pZ-znnurbpiMf8U Je ne suis pas sûr, mais après avoir vu cela, vous pourrez peut-être recréer la même chose dans React.

[@zanaouattara8974]

Bonjour Professeur, c'est vous le grande Merci. Vous nous aidé avec votre savoir et cela est énorme pour nous.Encors une fois de plus merci infiniment@@JAFSCodeSchoolTamil

[@JAFSCodeSchoolTamil]

😍😍@@zanaouattara8974

[@surajkumarsingh8592]

only working on click funtion

[@kevyyar]

You have the source code bro? A repo

[@JAFSCodeSchoolTamil]

I forgot to save the code. Sorry.

[@kevyyar]

@@JAFSCodeSchoolTamil vales verga. Thank you bro

[@noorulameen7688]

👌

[@jishnuvs2698]

Can u provide the code

[@JAFSCodeSchoolTamil]

Sorry bro, i forgot to backup the code.

[@WaqarQayyum]

i dont understand your lenguage please make your video in english or hindi

[@JAFSCodeSchoolTamil]

This is a tamil channel bro. Am planning to create another channel to post videos in English.