html - 在以下 html 代码中需要帮助，使其成为一次滚动 4 个图像的 flexislider

Question

我需要帮助大家让下面的代码表现得像一个 flexislider，我有下面的代码连续显示 4 张图像。但我想添加动画 o 下一个和上一个箭头，所以它应该导航 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; }

Answer 1

你的意思是 cycle : http://jquery.malsup.com/cycle/或 carouFredSel http://caroufredsel.dev7studios.com/

循环有多种选择，但基本上你有一个包含对象的容器

<div class="container">
    <div class="object">Html for 4 things</div>
    <div class="object">Html for 4 things</div>
    etc...
</div>

然后你在容器上调用循环

$(function(){
    $('.continer').cycle();
});

这将在对象之间循环。

carouFredSel 以类似的方式工作，可以为您划分对象。我会看看主页上的一些例子。

两者都需要 jquery http://jquery.com/去工作。