<!--the HTML--
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>unslider.com Arrow example</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type= "Text/javascript" src= "Jquery-1.10.2.min.js"></script>
<script type= "Text/javascript" src= "Slider.js"></script>
<!--JavaScript--
<script type= "Text/javascript" >
$ (function () {
$ ('. Banner '). Unslider ({
SPEED:500,//the speed-to-animate each slide (in milliseconds)
delay:3000,//The delay between slide animations (in milliseconds)
Complete:function () {},//A function that gets called after every slide animation
Keys:true,//Enable keyboard (left, right) arrow shortcuts
Dots:true,//Display dot Navigation
Fluid:false//Support responsive design. May break non-responsive Designs
});
var Unslider = $ ('. Banner '). Unslider ();
$ ('. Prev '). Click (function () {
Unslider.data (' Unslider '). Prev ();
});
$ ('. Next '). Click (function () {
Unslider.data (' Unslider '). Next ();
});
return false;
});
</script>
<!--CSS--
<style type= "Text/css" >
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
}
. Banner {
position:relative;
width:100%;
Overflow:auto;
top:50px;
/*z-index: -1;*/
font-size:18px;
line-height:24px;
Text-align:center;
Color: #FFFFFF;
text-shadow:0 0 1px rgba (0,0,0,.05), 0 1px 2px rgba (0,0,0,.3);
Background: #FFFFFF;
box-shadow:0 1px 2px Rgba (0,0,0,.25);
}
. Banner UL {
List-style:none;
width:300%;
}
. Banner ul Li {
Display:block;
Float:left;
min-height:500px;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
Box-shadow:inset 0-3px 6px Rgba (0,0,0,.1);
}
. Banner. Inner {
padding:360px 0 110px;
Float:left;
vertical-align:-100px;
}
. banner H1,. Banner H2 {
font-size:40px;
line-height:52px;
Color: #fff;
}
. banner. btn {
Display:inline-block;
margin:25px 0 0;
Padding:9px 22px 7px;
Clear:both;
Color: #fff;
font-size:12px;
Font-weight:bold;
Text-transform:uppercase;
Text-decoration:none;
Border:rgba (255, 255, 255, 0.4) solid 2px;
border-radius:5px;
}
. banner. btn:hover {
Background:rgba (255, 255, 255, 0.05);
}
. banner. btn:active {
-webkit-filter:drop-shadow (0-1px 2px rgba (0,0,0,.5));
-moz-filter:drop-shadow (0-1px 2px rgba (0,0,0,.5));
-ms-filter:drop-shadow (0-1px 2px rgba (0,0,0,.5));
-o-filter:drop-shadow (0-1px 2px rgba (0,0,0,.5));
Filter:drop-shadow (0-1px 2px rgba (0,0,0,.5));
}
. Banner. btn,. Banner. dot {
-webkit-filter:drop-shadow (0 1px 2px rgba (0,0,0,.3));
-moz-filter:drop-shadow (0 1px 2px rgba (0,0,0,.3));
-ms-filter:drop-shadow (0 1px 2px rgba (0,0,0,.3));
-o-filter:drop-shadow (0 1px 2px rgba (0,0,0,.3));
Filter:drop-shadow (0 1px 2px rgba (0,0,0,.3));
}
. Banner. Dots {
Position:absolute;
left:0;
right:0;
bottom:20px;
width:100%;
}
. Banner. Dots Li {
Display:inline-block;
width:10px;
height:10px;
line-height:10px;
Margin:0 4px;
Text-indent: -999em;
border:2px solid #fff;
border-radius:6px;
Cursor:pointer;
Opacity:. 4;
-webkit-transition:background. 5s, opacity. 5s;
-moz-transition:background. 5s, opacity. 5s;
Transition:background. 5s, opacity. 5s;
}
. Banner. Dots li.active {
Background: #fff;
Opacity:1;
}
. unslider-arrow {
Font-family:expressway;
font-size:50px;
Text-decoration:none;
Color: #3d3d3d;
Background:rgba (255,255,255,0.7);
padding:0 20px 5px 20px;
}
. Next {
Position:absolute;
top:65%;
right:0
}
. prev {
Position:absolute;
top:65%;
/* right:90 change to left:0; if u wanna has arrow on left side */
}
</style>
<!--Body of HTML document--
<body>
<div class= "Slider" >
<div class= "banner" >
<ul>
<li>pic/desert.jpg"alt=" pixel "width=" 100% "/></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href= "#" class= "Unslider-arrow prev" >←</a>
<a href= "#" class= "Unslider-arrow Next" >→</a>
</div>
</body>
Unslider.js Tiny Sample