* {margin:0;padding:0}
body {
background-color:#111;
padding:50px;
}
/* Slider */
#slider {
display:block;
border:4px solid #000;
width:400px; /* slider width */
height:300px;; /* slider height */
margin:0 auto;
background:white url('https://classicmanager.com/app/images/4b9182c15d746b98dc576ab5e15a4d5a.gif') no-repeat 50% 50%;
overflow:hidden;
position:relative;
}
/* For caption */
#slider figcaption {
display:block;
background-color:black;
font:normal normal 11px Arial,Sans-Serif;
color:white;
opacity:.8;
padding:10px 15px;
position:absolute;
right:0;
bottom:-100px; /* hide the caption with this way :) */
left:0;
z-index:44;
}
#slider img {
display:block;
margin:0 0;
width:400px; /* slide width */
height:300px; /* slide height */
position:absolute;
top:0;
left:0;
}
/* Navigation */
#slider-nav {
display:block;
position:absolute;
top:10px;
right:10px;
z-index:99;
}
#slider-nav a {
display:block;
float:left;
width:12px;
height:12px;
background-color: rgba(255, 255, 255, 0.4);
font-size:0;
color:transparent;
overflow:hidden;
text-indent:-99px;
margin:0 4px 0 0;
border-radius:100%;
}
#slider-nav .active {
background-color:rgba(0, 0, 0, 0.6);;
}
/* Hide all element inside the '#slider' until the page has been loaded! */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}
top of page
bottom of page
