<style type="text/css">
/* http://dimpost.com */
#sliderFrame {
position: relative;
width: 700px;
margin: 0 auto 40px;
}
#slider {
width: 700px;
height: 306px;
/* Make it the same size as your images */
background: #fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
/*make the image slider center-aligned */
-webkit-box-shadow: 0px 1px 5px #999999;
-moz-box-shadow: 0px 1px 5px #999999;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
/* Caption styles */
div.mc-caption-bg,
div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 15px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}
div.mc-caption a {
color: #FB0;
}
div.mc-caption a:hover {
color: #DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top: 320px;
left: 280px;
/* Its position is relative to the #slider */
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}
/* each bullet */
div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
/* distance between each bullet*/
_position: relative;
/*IE6 hack*/
}
div.navBulletsWrapper div.active {
background-position: 0 -11px;
}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- Others ------- */
#slider {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizcVquFS6nWcNQmPtfg0aPMkFPCpn-zEKwCE-ZmxlZVd-b7f9_HxtEx4vR4YnGiLp49sbDIXmNfqsheNHq54NtS4qjSjjYT86MLkmGf_OyjQDpAtjyLacDZwVjLP1LPgz0kBYw-bpW0sRZ/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVal_P1bJWR_ybkuOfQ4jYjb-JXpJVoJw1BzrmD-t4qKHpu4e5z5jhc2sLta_orMP57YdAc_cYkVi1gb9MJxOvD-VZIpfMZ7urwSdcMfCtT3bsuo_yp5RG_L8DhFkkAKbGFnGdMkt1xq7V/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVpuGdIb9Jfrh8DzzwjUkb4YPic2dYxP3LwMZSR3R4sP-qCXDfhgbdl9B196MJAHdd3yT7UdYR6w9U3SZpMzlKeZtWfEZoNf7CAesx2-3WvP03kzg3Df153LZ-3EgE_QmqMFHnwv3HXjVd/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhECmRjb_uBPELHaPLyrKCzcGXFaEXdOB44-5zY-rr9qfeH55M2CTddIQuqqKIHDPhSd1rGDazSxr5Buw8VfD5AM1z-NqIQL1jsxGj07k5raBZEF9R4qyDgnpWWyjlBG8iMxitRGJsga7cl/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaE_FjLi-pqzZSdSNW7YenCJu4EOPt2u-vKOOK-1Z2NN8VpVN08DMHS_KLNk5lgRFMdeKIyGsmFkeEA3Ngk4zX9r102XTK4UdEpTP6tvPSFVvtVgmWqYB2ZjCpWyu6sum9sbGEnX095DZm/s1600/image-slider-5.jpg" alt="Stay Connected" /></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>
------------------------------------------------------------------
click here
No comments:
Post a Comment