Basic Slider. React Swiper from scratch #1. No library (React Slick from scratch)
🚀 Learn React-Slick: A Complete Guide to Creating Sliders in React
In this video, we dive deep into react-slick, one of the most popular libraries for creating smooth, customizable sliders and carousels in React. Whether you’re building an image carousel, product showcase, or a custom slider, this tutorial will help you understand the DOM structure and the purpose of each key element in react-slick.
What You'll Learn in This Video:
✅ What is react-slick and why it’s useful.
✅ The DOM structure of react-slick, including the list, track, and slide elements.
✅ The purpose of each element and how they work together to create a functional slider.
✅ A step-by-step guide to setting up and using react-slick in your React projects.
Chapters:
00:00 Intro
02:28 Demo of React Slick
03:40 DOM structure of Slider
04:48 Start the project
09:08 Display slides horizontally
18:19 Implementation of rendering one slide per view
34:42 Implementation of moving between slides
46:42 Outro