Anything Slider (Position Numbers Help)

[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 `

` 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](http://jsfiddle.net/Mottie/ycUB6/4074/)):

• WEEK 05

  

  

  

  

  

  
  

  

  

  

  

  

  
  

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);
}

[Author]

Posts