Mohamed Mohamed - 3 months ago 10
HTML Question

How can I make a slider with height of the webpage?

Hey guys I have created a slider that works at the moment. But it won't let me make it with a height of 100% can someone please help me? I am only using HTML and CSS. I have tried doing

body, html {height: 100%; }
which didn't work and also tried set it as a max-height/min-height and making it vh but nothing have worked so far.



#slider{
overflow:hidden;
width:50%;
float:left;
margin:0;
-webkit-box-flex: 0;
height:100%;
}

#slider figure img{
width:25%;
float:left;
}

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

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
100% { left: -400%; }
}

<div id="slider">
<figure>
<img src="pics\art1.jpg" />
<img src="pics\art2.jpg" />
<img src="pics\art3.jpg" />
<img src="pics\art4.jpg" />
</figure>
</div>




Answer
#slider {
  overflow: hidden;
  width: 50%;
  float: left;
  margin: 0;
  -webkit-box-flex: 0;
  background: silver;
  height: 100vh;
  display: block;
  position: absolute;
}

https://jsfiddle.net/MadalinaTn/vvse26ns/6/

Comments