Responsive Carousel Problems with CSS only.
Responsive Carousel Problems with CSS only.
Codepen 💻 : https://codepen.io/Oskar_Olortegui/pe…
Watch the most recent videos
https://www.youtube.com/@AlephNeoDev/… 👀
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…
Codepen 💻 https://codepen.io/Oskar_Olortegui
#CSSCarousel #CSSSlider #CSSResponsive
Content
0.12 -> hello guys welcome back do you think there will be
any problem if we create a carousel using CSS only
8.04 -> let's find out this is NeoDev let's grow together
13.08 -> all right guys I just opened my favorite exterior
which is this vs-code so let's get started and
21.6 -> exclamation mark hit enter remove this meta tag
then title of Carousel now let's link our CSS
32.16 -> now let's give it a website icon for this because
I love to and remove the type attribute this one
41.46 -> and the shortcut keyword there go with live
server you should be able to see an empty browser
48.72 -> there we go now inside of the body main tag
with class of carousel then here we're going
54.84 -> to have inputs oh my God input colon radius
times 3 because I want three of them then for
62.82 -> the name attribute they all should have the same
value so I'm just going to call it controls and
70.32 -> a unique ID I want I2 and I three let's break
each input into a new line and finally for my
79.44 -> first input I will have the check attribute to be
checked at the beginning like this okay refresh
89.82 -> there you go now after that let's go with
dots div then label times three because I'm
97.14 -> going to have three of them this is going
to be a one I2 and Knight three four four
103.98 -> attribute now let's break each label into a
new line so I want I2 and I3 and finally
110.82 -> here we're going to have a div with a carousel
Hyphen Images class and inside of it three images
121.74 -> first our images are looking gigantic but don't
worry about it we can fix that by just saying
128.7 -> image and then width at 500 pixels remember the
default display property of for the image HTML
137.4 -> element is in line that's why they're located
next to each other if I expand this window you
144.24 -> see next to each other and the default display
property for the input radio is inline block
150.96 -> this is why they are positioning
next to each other each bullet
155.34 -> all right okay let's continue and Target our label
now we go with the label we can say with 24 pixels
166.92 -> Height 24 pixels to start with the dimension let's
go with cursor pointer then a position of relative
175.08 -> then display this is a block element and now let's
give it a background color in order for you to be
182.1 -> able to see which is going to be a dark rate and
a little bit of marching 5 pixels in order to see
189.84 -> there you go now please Pay atettion because
I'm going to just paste the following
199.32 -> okay and this is basically css pseudo-selector and this
is the CSS sibling combinator this is known as the
208.2 -> Tilda symbol this is this is just a generative
combinator this basically says I'm turning my
216.6 -> first input if it's checked if it's chat please
target the next available element which is dots
224.04 -> in the HTML structure you can see that
after any kind of input that I have it's
229.56 -> coming the dots and then inside of that
dot div I want to Target my first label
236.1 -> and I'm basically saying after that please just
change the background color now if I click on
243.48 -> this one and this one you're able to see these
changes as well as inside of my input itself how
250.68 -> is that possible well that's thanks for the for
an ID attribute that's wider link to each other
259.02 -> because they have they must and they have and they
must have the same value that's the reason I call
264.96 -> it I want for the foreign this is the reason that
I'm able to do these changes across the label tag
273.9 -> and also the input itself and you understood
it yes impression let's carry on with the CSS
280.26 -> now for this part I would like to start with my
Carousel images so if I go it's chooses my images
288.9 -> we'll say Carousel Hyphen Images let's give it a
background color of whatever it doesn't matter to
297.42 -> see the initial dimension of the active there you
go after that I would like to start with my body
302.7 -> and remove the default value sorry for margin
that the body has so margin 0 there you go no
310.74 -> margin after that right here for my carousel-images div I would like to say display this
316.74 -> is a flex element to have my Flex items next
to each other which it's actually the images
323.82 -> now next I'm going to introduce you the logic here
how to create a carousel by using your CSS only
332.28 -> and there you go basically we're we're following
the same ideas we did right here we are saying
338.4 -> okay if my first input is check please have or
grab the whole div Carousel and translate this
345.24 -> a little bit to the left okay those values are
just for testing purposes but now you will be
353.28 -> able to see the logic working this is the logic
of the CSS Carousel or by creating a carousel by
360.78 -> using just CSS the information in here is worth
millions okay we can pull things up now so if we
368.28 -> go at the very top of my CSS and would like to
Target the HTML again the body and finally the
374.94 -> colors of itself which is the main tag and give it
a high with 100 to start with now for my Carousel
383.7 -> image itself this diff let's go with a width of
300vw and a height a hundred percent like so
392.16 -> there you go now I would like to make my image
responsive but before I do that I would like
398.1 -> to Target my dots so right here say dots
and I would like to say position of absolute
405.96 -> which contains my labels there you go and then z
Index number nine because I want it to be above of
413.28 -> everything there you go right here and after that
I would like to go up above and Target each input
421.68 -> say display none to get rid of those bullets there
you go because I'm still able to apply the logic
428.94 -> thanks to the label test sorry thanks for yes
to the label tag and for the four attribute
434.1 -> okay having said that now let's make our images
responsive first of all let me just remove this
440.16 -> and grab this right here because this is my
container and I want to graph each image close
446.34 -> these curly braces and let's get this started
with Max width hundred percent now let's go
453 -> with a height of our should be so high order in
and finally object fit cover this should make
463.38 -> our images responsive but partially it is but
not entirely because if I expand this window
472.14 -> kind of responsive but not at all as you
can see it's missing some space right here
477.9 -> right let's shrink this window again now
in order to fix this issue we need to go
485.82 -> back inside of our HTML now first we ought-to remove
our a images HTML elements all of them so we're
493.5 -> just going to comment this and then create new
divs I'm going to call it BG times three and
501.3 -> this is going to be bg1 bg2 and bg3 okay just 3Bg
inside of my Carousel Hyphen Images like that now
508.86 -> if we go back inside of our CSS sorry CSS and
basically here if I just remove this one now
516.9 -> finger go right here again here and uses CSS
selector right here so each div actually oh my God
526.68 -> and grabbing each team closing the curly
braces and basically say so for each div we
533.16 -> should have a width of 100 view width to take
full dimensional full width of the viewport
540.36 -> right and it's actually view with Semicolon and in
the height naturally should be 100 to start with
549.3 -> now I need to Target each background color with
the image itself so I already have them here so
557.94 -> just going to paste it to save us some time and
I just used the shortcut shorthand background
563.76 -> property this is background image background
repeat background position and background size
572.76 -> now if I expand this window if I shrink it if I
use this slide you are able to see that is very
582.12 -> is already responsive my images there you go this
is how you make your images responsive thanks to
589.02 -> *creating a new div and apply the background
property there tell me in the comments if
594.12 -> you like what you've just seen and okay now let's
go along and move with our CSS just with the dots
601.5 -> now this is dots our label tag let's go with
sorry let's go with display Flex Flex element
609.6 -> now let's go with the background
color for testing purposes RGB a
615.78 -> again this is just for testing purposes
that's background color now if I apply width
622.2 -> height both of them 100 percent and finally I can
apply my next flex online items Flex properties
632.28 -> which is align-items Flex to the end per n there
we go and now justify corner at the server
640.44 -> because if I scroll there you go this is just
taking this Dimension this is my dots div taking
647.7 -> this dimension all right then now we can remove
this testing background color and then let's
654.3 -> carry on with the label tag we need basically
to apply the same logic I mean just the same
660.54 -> background color so let me just paste this one
here comment this and now we can give it a border
668.7 -> radius of 50 in order to make it circular shape
there you go and finally just let's just give it
676.8 -> a little bit of margin bottom so add this to my
margin bottom and this is going to have 1.8 rem
685.8 -> push it a little bit up there you go now for
this property here I'm going to change this
694.26 -> one instead of red I would like to be a little bit
wider if it's possible I mean if that word exists
702.9 -> it's a little bit whiter and the logic still
you know working however I would like to change
708.72 -> those values now how well since we applied 300
actually for each div 100 view width naturally
716.82 -> I want to translate this Into The View with
units so this is going to be minus yes 100
725.04 -> view with and this one is going to be just view
with but 200. now if we give a world [Music]
736.86 -> there you go we have a carousel
now and it's already responsive see
747.06 -> and gray you have a partial Carousel but what is
missing here of course as transition property so
753.3 -> if I shrink this window go first of all inside
of my label tag and apply a transition property
759.24 -> transition that three seconds this is
transition duration so if I click here
765.9 -> there you go we are looking at smoothly
transition and now if we go to the Carousel
771.9 -> image div itself this one right here let's remove
this background now we can apply the transition
781.02 -> now everything seems to look great because it's
being already responsive however if I expand this
790.14 -> and If Ishrink and expand
800.66 -> [Music]
801.66 -> there you go I was hours trying to solve this
and naturally that the villian here is this
809.04 -> transition property then I thought maybe I
should ask sorry I should add JavaScript to have
814.56 -> more control of my Carousel even I asked chat
GPT about it and I said I believe the carousel
820.14 -> have more control if we do it with JavaScript
don't you thing and chap GPT said Carousel created with
827.88 -> JavaScript often provide more control and
flexibility in terms of functionality and
832.02 -> transitions while CSS transitions can be used
for simple Carousel effects (as we did before )
839.28 -> more complex Carousel with smooth transitions, autoplay and user interaction are typically
844.32 -> achieved using JavaScript libraries or Frameworks
dedicated to building carousel which we are not
850.56 -> going to do because if I would have added JavaScript
here in this little project I will have missed
856.32 -> the point of creating Carousel using CSS only
fortunately I found another way by the way if
863.04 -> you could solve this Bug this problem please
let me know in the comments below alright guys
867.48 -> in order for you to be able to see my changes that
I'm going to make here we're going to take first
874.02 -> let me just create a style to that CSS a new file
for this and here insert my link I need to switch
882 -> that to number two like just like that and we are
not going to touch from here from the carousel
890.28 -> background one till this part that changes
the background color of of my label tag
897.3 -> so let me now remove my comments because
we are not going to need them anymore
904.8 -> great now in order to start now above everything
let's go with my input and say display none
912.24 -> to get rid of my bullets then
my HTML should have the high
919.56 -> a hundred percent now for the body I need
to remove the default margin so margin 0
926.94 -> now I need to Target my Carousel images itself
then say position of relative and finally say
933.06 -> Carousel images start each div each inner
div and let's get this started with position
940.08 -> of sorry absolute now let's
create a width 100 percent
945.84 -> but the high is going to be
100 view height for this part
950.7 -> there you go there's some images let's get
the start of the position top zero left zero
957.9 -> okay and now initially I will have I
will I would like to have to each image
965.82 -> the opacity Value City value of none and now of
course I'm not able to see anything but however
973.26 -> if I Target my first background image this one
and say initially to have the positive of one
980.76 -> now there you go now remember the logic uh that we
apply here with the translate property basically
988.62 -> we're going to do the same so let me just grab
this and paste it and let me just expand this
996.36 -> window in order for you to be able to see it now
instead of dragging the carousel the div itself to
1002.12 -> apply the translate property I'm going to Target
each background image this one so let me grab this
1010.22 -> and paste paste and paste this is going to be
for number two and number three remember if my
1018.14 -> input number one is check please select the
following element which is a carousel image
1024.74 -> but inside of that Carousel image I need to Target
my first background pg1 my first background image
1031.34 -> but here instead of the translate property
I'm going to change what the opacity to one
1038.36 -> so basically it's going to be pretty much
the same for everyone so it's going to paste
1043.16 -> and paste now if I go right
here inside of my bullets
1053.18 -> there you go and he's already responsive
if you can see it's very responsive
1061.64 -> however we are missing just a little Point
here just to give it a transition so I can
1067.94 -> say transition transition name which is
going to transition animation opacity
1074.54 -> that's going to change delay and the speed
of my animation is in and there you go
1087.26 -> however as you've seen we have a little box
right there because if I switch from here
1092.54 -> from here you are able to see just
for a little while the first image
1097.4 -> see the first image you're looking at so in order
to change that we just need to comment this out this
1103.4 -> opacity of one that's it why Now is working
you see now it's working how's that possible
1112.82 -> that's thanks to the checked boolean attribute
because initially our first input is being checked
1119.78 -> so this is working now so I'm basically saying
okay my first input is checked which is already is
1125.84 -> thanks to the checked attribute right here please
select my first BG ground and set this to opacity
1133.46 -> one so from where are you from zero to one and now
you have an infinite Carousel and is responsive
1147.62 -> okay guys so in a nutshell is it possible to
do it with CSS only yes but if you want to
1152.9 -> have more control use JavaScript and one
last important thing here so will it be
1167.02 -> [Music]
1168.02 -> okay uh number three Lord Farquaad you've chosen
Source: https://www.youtube.com/watch?v=5uQ4wHkNB_w