Responsive Carousel Problems with CSS only.

Save
2 years ago
10
pure css carousel responsive carousel css only how to make a carousel with css carousel html css css carousel with dots css image carousel html css carousel css image carousel tutorial carousel with dots

Codepen 💻 : https://codepen.io/Oskar_Olortegui/pen/JjmLRNj
Watch the most recent videos
https://www.youtube.com/@AlephNeoDev/videos 👀

Welcome back 😀
Today we're going to see what problems we encounter while creating a CSS carousel.
And we will see one way (because there are many ways to create a carousel)
to solve a few bugs until we get our final result.

Please, have fun, follow along the video and discover the intricacies of creating a responsive carousel that seamlessly adapts to different screen sizes. Learn about CSS techniques, flexbox, and media queries to overcome the obstacles you might encounter during the development process. 🌐💻

🕛🕛 Timestamps 🕛🕛
0:50 Creating our HTML content
2:06 CSS part 1
3:19 CSS Pseudo-selecto and CSS sibling combinator
5:27 The main logic of creating a carousel using CSS only
6:07 completing the CSS part1
7:20 Responsive Images?
13:19 The problem, The bug.
14:28 Creating a new CSS file
16:24 Giving a solution?
19:09 Conclusion.

The villian was that transition property applied to the .carousel-images div

Who am I? 🔍
I am just a new developer trying to learn and grow and I would like you to join
me in this journey
GitHub 😸 https://github.com/AlephOlortegui?tab=repositories
Codepen 💻 https://codepen.io/Oskar_Olortegui

#CSSCarousel #CSSSlider #CSSResponsive

Loading comments...