鼠標懸停產品圖庫

Question

我想創建產品列表頁和鼠標懸停畫廊像[此頁] [1]

我與垂直傳送帶一樣，Fiddle

嘗試，但它不工作像Zalando和的jCarousel是不工作1.9.1 + jQuery版本。我需要一個像Zalando一樣工作的結構。

Answer 1

在這裏，我們是！我封裝的整個產品（可以稱之爲.product-item）徘徊在主圖像（或其他選項時可見），所以當你可以切換選項的可見度在<div>：

做出選擇通過隱藏默認（CSS）：

#name-carousel { 
    float: left; 
    display: none; 
} 

封裝產品的容器（HTML）：

<div class="product-item"> <!-- This is the container --> 
    <div id="name-carousel" class="container"> 
    <ul id="mycarousel" class="jcarousel-skin-tango"> 
     <li id="carousel-selector-1"><img src="http://placehold.it/100x50&text=slide1" /></li> 
     <li id="carousel-selector-2"><img src="http://placehold.it/100x50&text=slide2" /></li> 
     <li id="carousel-selector-3"><img src="http://placehold.it/100x50&text=slide3" /></li> 
     <li id="carousel-selector-4"><img src="http://placehold.it/100x50&text=slide4" /></li> 
     <li id="carousel-selector-5"><img src="http://placehold.it/100x50&text=slide5" /></li> 
    </ul> 
    </div> 

    <div class="bigProductimage"> 
    <img data-img="http://placehold.it/400x200&text=slide0" src="http://placehold.it/400x200&text=slide0"> 
    </div> 
</div> 

切換的選項能見度徘徊（jQuery的）時：

productItem.hover(function() { 
    $("#name-carousel").fadeToggle(); 
}); 

這裏是更新搗鼓你：http://jsfiddle.net/CliffBurton/6svy9ocy/3/