Challenge jquery (i) Achieve horizontal slide

Today on the blog to see this challenge topic, said ashamed, half a day to make the page, JS part is confused
Website: http://www.gbtags.com/gb/gbliblist/99.htm
If there is infringement please contact me
If you are interested, you can try it yourself.
The page is like this:

Click on the previous or next to slide horizontally to the next picture for a slideshow effect

The following code is posted:

HTML section:

<!--slideshow-related HTML//--><div class="Slider">  <ul>    <li><img src="http://www.gbtags.com/gb/networks/uploads/ Afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags1.jpg " alt=" image "></li>    <li><img src="http://www.gbtags.com/gb/networks/uploads/ Afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags2.jpg " alt=" image "></li>    <li><img src="http://www.gbtags.com/gb/networks/uploads/ Afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags3.jpg " alt=" image "></li>    <li><img src="http://www.gbtags.com/gb/networks/uploads/ Afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags4.jpg " alt=" image "></li>  </ul></div><div id="Slider-nav">  <button data-direction="prev">&laquo; Last</button>  <button data-direction="Next">Next &raquo;</button></div><script type=' text/javascript ' src= 'http://cdn.gbtags.com/jquery/ 2.1.1/jquery.min.js "></script>

CSS section:

/ * Slide-related css*/*{  margin:0;  padding:0; }Body {  width:550px;     margin:px Auto 0;     background:#f0eeee;  font-family: ' Microsoft Yahei ', Arial,sans-serif; }nav{  padding:  0px;} #slider-nav {  display:none;     margin-top:1em;  text-align:center; }#slider-nav Button {  padding:  approx. px;  font-family: ' Microsoft Yahei ', Arial,sans-serif; }. Slider { height:px ; Overflow:scroll ; -webkit-box-shadow:1px 1px 8px 0 rgba (,50 ,0.75)  ; -moz-box-shadow:1px 1px 8px 0 Rgba (50 ,0.75)  ; box-shadow:1px 1px 8px 0 rgba ( ,0.75)   ;}. Slider ul {  width:10000px;  list-style:none; }. Slider Li {  float:left;} 

JS section:

/ * javascript*/to create a slideshow effect function Slider(container, nav) {     This. container = container; This. Nav = Nav.show (); This. IMGs = This. Container.find (' img '); This. ImgWidth = This. imgs[0].width; This. Imgslen = This. imgs.length; This. Current =0;} Slider.prototype.transition = function() {     This. container.animate ({' Margin-left ': -( This. Current * This. ImgWidth)});}; Slider.prototype.setCurrent = function(dir) {    varpos = This. Current; pos + = (dir = = =' Next ') || -1); This. Current = (Pos <0) ? This. Imgslen-1: pos% This. Imgslen;returnPOS;}; $( function(){    varContainer = $ ('. Slider '). CSS (' overflow ',' Hidden '). Children (' ul '), slider =NewSlider (container, $ (' #slider-nav ') ); Slider.nav.find (' button '). On (' click ', function() {Slider.setcurrent ($ ( This). Data (' Direction ') );    Slider.transition ();     }); });

Challenge jquery (i) Achieve horizontal slide