Forums

Dext3r

So i just noticed Css-tricks was behind the slider i was using, its amazing so first thanks for that.

Im trying to position numbers over my images in the slider. p id="text1" >1

But when i add it under ul id="slider"

They simply dont display, but when i add it outside <ul id="slider"> they display but not like i want them to. Example on my site: http://jakudesign.com/slider/simple.html

Need some help, really stuck on this.

Mottie

Hi Dext3r!

If you don't care about IE7 and older, you can use css counters to add the numbers above each image. I ended up modifying the html a bit (demo):

  <ul id="slider">

    <li>
      <div>
        <h1><div>WEEK 05</div></h1>
        <br><br><br>
        <span>
          <p><img src="a.jpg" alt="AudioJungle" class="fade" /></p> <!--DVD1-->
          <p><img src="b.jpg" alt="AudioJungle" class="fade" /></p> <!--DVD2-->
          <p><img src="c.jpg" alt="AudioJungle" class="fade" /></p> <!--DVD3-->
          <p><img src="d.jpg" alt="AudioJungle" class="fade" /></p> <!--DVD4-->
          <p><img src="e.jpg" alt="AudioJungle" class="fade" /></p> <!--DVD5-->
        </span>
        <br><br><br><br>
        <span>
          <p><img src="f.jpg" alt="AudioJungle" class="fade" /></p> <!--DVD1-->
          <p><img src="g.jpg" alt="AudioJungle" class="fade" /></p> <!--DVD2-->
          <p><img src="h.jpg" alt="AudioJungle" class="fade" /></p> <!--DVD3-->
          <p><img src="i.jpg" alt="AudioJungle" class="fade" /></p> <!--DVD4-->
          <p><img src="j.jpg" alt="AudioJungle" class="fade" /></p> <!--DVD5-->
        </span>
      </div>
    </li>

    <!-- more li's -->
  </ul>

and I used this css:

  #slider, #slider li {
      width: 1200px;
      height: 700px;
      list-style: none;
      /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
      overflow-y: auto;
      overflow-x: hidden;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      box-sizing:border-box;
  }
  img {
      box-shadow: 0.9px 0.9px 8px #000;
      width: 134px;
      height: 193px;
      margin: 20px;
  }
  .fade {
      opacity: 1;
      transition: opacity .5s ease-in-out;
      -moz-transition: opacity .35s ease-in-out;
      -webkit-transition: opacity .35s ease-in-out;
  }
  .fade:hover {
      opacity: 0.6;
  }
  #slider li {
      counter-reset: dvdcounter;
  }
  #slider li span {
      display: block;
      margin-left: 170px;
  }
  #slider li span:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
  }
  #slider li p {
      position: relative;
      float: left;
      counter-increment: dvdcounter;
      text-align: center;
  }
  #slider li p:before {
      content: counter(dvdcounter);
      z-index: 100;
      position: absolute;
      font-size: 34px;
      color: #979797;
      font-weight: bold;
      top: -35px;
      left: 40%;
      margin: 0;
      font-family:'BebasRegular';
      color: rgba(0, 0, 0, 0.6);
      text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
  }

treehouse : what would you like to learn today?

Forums

Anything Slider (Position Numbers Help)