<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <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 have arrow on left side */ }</style> </head> <!-- Body of HTML document --> <body> <div class="slider"> <div class="banner"> <ul> <li><img src="pic/Desert.jpg" alt="pixel" width="100%" /></li> <li><img src="pic/Hydrangeas.jpg" alt="pixel" width="100%" /></li> <li><img src="pic/Jellyfish.jpg" alt="pixel" width="100%" /></li> <li><img src="pic/Koala.jpg" alt="pixel" width="100%" /></li> </ul> </div> <a href="#" class="unslider-arrow prev">←</a> <a href="#" class="unslider-arrow next">→</a> </div> </body> </html>