CODEWITHSUNDEEP
htmlcssimagesliderslideshow
Kaleb Meeks
Kaleb Meeks

Reputation: 111

What is wrong with my code? (Trying to create a slider)

// Html

<div class="hero">
  <ul>
    <li><img src="images/wallpaper.jpg"/></li>
    <li><img src="images/wallpaperTwo.jpg"/></li>
    <li><img src="images/wallpaperThree.jpg"/></li>
    <li><img src="images/wallpaperFour.jpg"/></li>
  </ul>
</div>

// Css

.hero {
  position: relative;
  top:0;
  left:0;
 }

.hero ul {
 width:400%;
 display:block;
}

.hero ul li {
 float:left;
 }

 .hero ul li img {
  width:100%;
  display:block;
  height:94vh;
  }

The following picture show that the first image cuts off towards the end. How do I fix that problem? This is really frustrating so any help is greatly appreciated!

Click here for Image!

Upvotes: 0

Views: 47

Answers (1)

Mr Lister
Mr Lister

Reputation: 46589

The problem in your example code is that the li doesn't have a width. Normally, with block type elements, the width will be the width of the parent, but with floating elements, that won't work.

Solution: give the li a width of 25%.

Also, I suspect you may want to remove the margins everywhere, so I set those to 0 too.

html, body {
  margin: 0;
}
.hero ul {
  margin: 0; padding: 0;
  width: 400%;
}
.hero ul li {
  float: left;
  margin: 0; padding: 0;
  list-style: none;
  width: 25%;
}
.hero ul li img {
  width: 100%;
  display: block;
  height: 94vh;
}
<div class="hero">
  <ul>
    <li><img src="http://lorempixel.com/500/500" /></li>
    <li><img src="http://lorempixel.com/g/500/500" /></li>
    <li><img src="http://lorempixel.com/500/500" /></li>
    <li><img src="http://lorempixel.com/g/500/500" /></li>
  </ul>
</div>

Upvotes: 1

Related Questions