How to create carousel slider in Tailwind css and React js ?
29.4 هزار بار بازدید -
11 ماه پیش
-
🌟 Exclusive Hosting Deal from
🌟 Exclusive Hosting Deal from Hostinger 🌟
Ready to launch your own website? Use my affiliate link to get an exclusive discount on Hostinger's reliable and high-performance hosting plans: https://www.hostg.xyz/SHEyO
Hostinger offers:
- Easy-to-use control panel
- 24/7 customer support
- 30-day money-back guarantee
- And more!
Don't miss out on this amazing offer. Click the link above to get started today! 🚀
---
I demonstrated how to build a Carousel slider using Tailwind CSS and React.js, covering step-by-step instructions on setup, styling, navigation buttons, and clickable navigation circles.
Demo: https://ayyaztech.github.io/create-ca...
Article: Medium: faa5ad646199
You can get source code from this Github Repository:
https://github.com/AyyazTech/create-c...
=====================
Chapters:
=====================
00:00 - Introduction and project setup using Tailwind CSS and React.js
02:30 - Styling the Carousel and adding images
04:45 - Adding navigation icons with react-icons Library
07:00 - Implementing previous and next slide functions
09:25 - Making the Carousel navigable based on current slide state
11:16 - Adding clickable navigation circles for slide selection
13:05 - Making navigation circles reactive
14:10 - Finalizing the Carousel slider functionality
14:37 - Conclusion and wrapping up the tutorial
#TailwindCSS #ReactJS #CarouselSlider
=====================
Related Videos:
=====================
🎨 Crafting a Calculator with ChatGPT's Expertise | React js, Tailwind CSS | Raw Coding Journey: Crafting a Calculator with ChatGPT's ...
🔢 Countdown Timer Creation coded by ChatGPT 4 Insight | React js & Tailwind CSS | Raw Coding Journey: Countdown Timer Creation coded by Cha...
⏰ How to use Tailwind CSS in Flask using Docker?: How to use Tailwind CSS in Flask usin...
⛓ How to create a sidebar in Nextjs and Tailwind CSS?: How to create a sidebar in Nextjs and...
🔵 How to use Tailwind CSS in Svelte?: How to use Tailwind CSS in Svelte?
⚙ How to integrate Tailwind CSS with GrapesJS to make a Drag and Drop GUI?: How to integrate Tailwind CSS with Gr...
=====================
To read written versions of AyyazTech tutorials, please visit https://AyyazTech.com
=============
If you want more content like this then please subscribe to my channel and click on the bell icon to get all of the notifications.
@ayyaztech
Ready to launch your own website? Use my affiliate link to get an exclusive discount on Hostinger's reliable and high-performance hosting plans: https://www.hostg.xyz/SHEyO
Hostinger offers:
- Easy-to-use control panel
- 24/7 customer support
- 30-day money-back guarantee
- And more!
Don't miss out on this amazing offer. Click the link above to get started today! 🚀
---
I demonstrated how to build a Carousel slider using Tailwind CSS and React.js, covering step-by-step instructions on setup, styling, navigation buttons, and clickable navigation circles.
Demo: https://ayyaztech.github.io/create-ca...
Article: Medium: faa5ad646199
You can get source code from this Github Repository:
https://github.com/AyyazTech/create-c...
=====================
Chapters:
=====================
00:00 - Introduction and project setup using Tailwind CSS and React.js
02:30 - Styling the Carousel and adding images
04:45 - Adding navigation icons with react-icons Library
07:00 - Implementing previous and next slide functions
09:25 - Making the Carousel navigable based on current slide state
11:16 - Adding clickable navigation circles for slide selection
13:05 - Making navigation circles reactive
14:10 - Finalizing the Carousel slider functionality
14:37 - Conclusion and wrapping up the tutorial
#TailwindCSS #ReactJS #CarouselSlider
=====================
Related Videos:
=====================
🎨 Crafting a Calculator with ChatGPT's Expertise | React js, Tailwind CSS | Raw Coding Journey: Crafting a Calculator with ChatGPT's ...
🔢 Countdown Timer Creation coded by ChatGPT 4 Insight | React js & Tailwind CSS | Raw Coding Journey: Countdown Timer Creation coded by Cha...
⏰ How to use Tailwind CSS in Flask using Docker?: How to use Tailwind CSS in Flask usin...
⛓ How to create a sidebar in Nextjs and Tailwind CSS?: How to create a sidebar in Nextjs and...
🔵 How to use Tailwind CSS in Svelte?: How to use Tailwind CSS in Svelte?
⚙ How to integrate Tailwind CSS with GrapesJS to make a Drag and Drop GUI?: How to integrate Tailwind CSS with Gr...
=====================
To read written versions of AyyazTech tutorials, please visit https://AyyazTech.com
=============
If you want more content like this then please subscribe to my channel and click on the bell icon to get all of the notifications.
@ayyaztech
11 ماه پیش
در تاریخ 1402/05/28 منتشر شده
است.
29,487
بـار بازدید شده