Takari Takari - 7 months ago 17
HTML Question

Html - Changing Width and Height of a slider

I'm creating a dynamic website with PHP and HTML for educational purposes .

I've been trying to create a 'slideshow' like the one in this video.
https://www.youtube.com/watch?v=L-vBR3vzOe8

However I've been having difficulties to set the desired amount of width and height ( it is way too small). I've been playing around with the code for the last hour and I can't figure it out.

Is anyone kind enough to point me in the right direction ?

My code is looking something like this:

CSS code:

@keyframes slider {

0% {
left: 0;
}

20% {
left: 0;
}

25% {
left: -100%;
}

45% {
left: -100%;

}

50% {
left: -200%;

}

70% {
left: -200%;
}

75% {
left: -300%;
}

95% {
left: -300%;
}

100% {
left: -400%;

}

}

#slider {
overflow: hidden;

}

#slider figure img {
width:20%;
float: left;

}

#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;

}


This is my HTML code:

<div id ="slider" >
<figure>
<img src ="Images/img1.jpg">
<img src ="Images/img2.jpg">
<img src ="Images/img3.jpg">
<img src ="Images/img4.jpg">

</figure>
</div>


Thanks in advance.

AFM AFM
Answer

Working sample: JSFiddle

Total width is 100% and height is auto

You can change width of #slider

#slider {
  overflow: hidden;
  width: 50%;
}