我需要帮助人员使以下代码表现得像 flexislider，我有以下代码连续显示 4 个图像。但我想为它添加下一个和上一个箭头的动画，因此它应该一次导航 4 个，
我在这里有点迷路，请指导
以下是HTML
<section id="related" class="row">
<div class="container">
<h1 class="heading1"><span class="maintext">Related Products</span><span class="subtext"> See Our Most featured Products</span></h1>
<ul class="thumbnails">
<li class="span3">
<a class="prdocutname" href="product.html">Product Name Here</a>
<div class="thumbnail">
<span class="sale tooltip-test">Sale</span>
<a href="#"><img alt="" src="img/product1.jpg"></a>
<div class="shortlinks">
<a class="details" href="#">DETAILS</a>
<a class="wishlist" href="#">WISHLIST</a>
<a class="compare" href="#">COMPARE</a>
</div>
<div class="pricetag">
<span class="spiral"></span><a href="#" class="productcart">ADD TO CART</a>
<div class="price">
<div class="pricenew">$4459.00</div>
<div class="priceold">$5000.00</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="prdocutname" href="product.html">Product Name Here</a>
<div class="thumbnail">
<a href="#"><img alt="" src="img/product2.jpg"></a>
<div class="shortlinks">
<a class="details" href="#">DETAILS</a>
<a class="wishlist" href="#">WISHLIST</a>
<a class="compare" href="#">COMPARE</a>
</div>
<div class="pricetag">
<span class="spiral"></span><a href="#" class="productcart">ADD TO CART</a>
<div class="price">
<div class="pricenew">$4459.00</div>
<div class="priceold">$5000.00</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="prdocutname" href="product.html">Product Name Here</a>
<div class="thumbnail">
<span class="offer tooltip-test" >Offer</span>
<a href="#"><img alt="" src="img/product1.jpg"></a>
<div class="shortlinks">
<a class="details" href="#">DETAILS</a>
<a class="wishlist" href="#">WISHLIST</a>
<a class="compare" href="#">COMPARE</a>
</div>
<div class="pricetag">
<span class="spiral"></span><a href="#" class="productcart">ADD TO CART</a>
<div class="price">
<div class="pricenew">$4459.00</div>
<div class="priceold">$5000.00</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="prdocutname" href="product.html">Product Name Here</a>
<div class="thumbnail">
<a href="#"><img alt="" src="img/product2.jpg"></a>
<div class="shortlinks">
<a class="details" href="#">DETAILS</a>
<a class="wishlist" href="#">WISHLIST</a>
<a class="compare" href="#">COMPARE</a>
</div>
<div class="pricetag">
<span class="spiral"></span><a href="#" class="productcart">ADD TO CART</a>
<div class="price">
<div class="pricenew">$4459.00</div>
<div class="priceold">$5000.00</div>
</div>
</div>
</div>
</li>
</ul>
</div>
下面的 CSS
#related .thumbnails li:hover .thumbnail img, #category .thumbnails li:hover .thumbnail img, .thumbnails.list li:hover .thumbnail img { transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); /* IE 9 */ -webkit-transform: scale(1.2, 1.2); /* Safari and Chrome */ -o-transform: scale(1.2, 1.2); /* Opera */ -moz-transform: scale(1.2, 1.2); /* Firefox */ transition: all 0.8s; -ms-transition: all 0.8s; /* IE 9 */ -moz-transition: all 0.8s; /* Firefox 4 */ -webkit-transition: all 0.8s; /* Safari and Chrome */ -o-transition: all 0.8s; /* Opera */ }
.container:after {clear: both;
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;;}
.thumbnails .prdocutname { font-size:16px; color:#5e626b; text-transform:uppercase; text-align:center; margin:0 0 10px 0; display:block }
.thumbnails.list .thumbnail .prdocutname { font-size:16px; color:#5e626b; text-transform:uppercase; text-align:left; margin:0 0 10px 0; display:block }
.thumbnails.list > li { margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid #ccc }
.thumbnails.list .productdiscrption { margin:10px 0 25px 0 }
.thumbnails.list .thumbnail .shortlinks { display:block; width:auto; position:static; text-align:left; margin:10px 0 25px 0 }
.thumbnails.list .pricetag { margin-left:-15px }
.thumbnail .offer { position:absolute; top:10px; left:-2px; background:url(../img/offer.png) no-repeat 0 0; height:45px; width:68px; float:left; overflow:hidden; display:block; text-indent:9999px }
.thumbnail .sale { position:absolute; top:10px; left:-2px; background:url(../img/sale.png) no-repeat 0 0; height:45px; width:68px; float:left; overflow:visible; display:block; text-indent:9999px;z-index:9999; cursor:pointer; }
.thumbnail .new { position:absolute; top:10px; left:-2px; background:url(../img/new.png) no-repeat 0 0; height:45px; width:68px; float:left; overflow:hidden; display:block; text-indent:9999px }
.thumbnail .pricetag { width:221px; height:37px; background:url(../img/pricetag.png) no-repeat right 0; margin-top:8px; position:relative; padding:9px 9px 9px 40px; margin-bottom:20px }
.thumbnail .pricetag .spiral { position:absolute; top:-19px; left:10px; background:url(../img/spiral.png) no-repeat right 0; height:50px; width:35px }
.thumbnail a.productcart { background: #f25c27 url(../img/prodcutcart.png) right 7px no-repeat; color:#fff; float:right; padding:8px 27px 8px 8px; font-size:13px; }
.thumbnail a.productcart:hover { background: #db420e url(../img/prodcutcart.png) right 7px no-repeat; }
.thumbnail input.productcart_btn { border:none; background: #f25c27 url(../img/prodcutcart.png) right 7px no-repeat; color:#fff; float:right; padding:8px 27px 8px 8px; font-size:13px; }
.thumbnail input.productcart_btn:hover { border:none; background: #db420e url(../img/prodcutcart.png) right 7px no-repeat; }
.thumbnail .shortlinks { background:#fff; position:absolute; left:0; top:60%; width:100%; text-align:center; padding:5px 0; display:none }
.thumbnail .shortlinks a { font-size:12px; padding:5px 5px 0 25px; background:url(../img/sprite.png) 0 0 no-repeat; }
.thumbnail .shortlinks a.details { background-position:0 -384px }
.thumbnail .shortlinks a.wishlist { background-position:0 -423px }
.thumbnail .shortlinks a.compare { background-position:0 -462px }
.thumbnail .shortlinks a.csale { background-position:0 -462px }
.thumbnail .price { float:right; margin-right:19px; text-align:right }
.thumbnail .price .pricenew { font-size:16px; color:#5e626b; font-weight:bold }
.thumbnail .price .priceold { font-size:13px; color:#5e626b; text-decoration:line-through; color:#96979d; }