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/

鼠标悬停产品库

1 个答案: