Flickity gallery：风格如此点击图像上的任何地方前进到下一个？

Question

我正在尝试在我的 Flickity 画廊中获得以下行为：

单击整个图像的任意位置，然后前进到下一张图像。

我发现调整（+隐藏）按钮的大小与预期不符。有人可以建议更好的方法吗？使用Semplice搭建的网站，我用的CSS是：

.flickity-prev-next-button.next {  
     width:100%; 
     height:100%;
     opacity:0; 
}

当我这样设置图像时，图像的角可以拖动但不能点击。对我来说更奇怪的是，可点击区域的形状像一个菱形。

我希望整个图像都可以点击以推进画廊。如果有任何帮助，我将不胜感激。谢谢。

Answer 1

您还有一些默认样式需要覆盖：

.flickity-prev-next-button.next {  
  width:100%; 
  height:100%;
  opacity:0; 
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  transform: none;
}

应该做

编辑：您的 header 也做到了，因此您无法点击它后面的图片。就个人而言，我会通过将 header 设为白色来解决这个问题。

Answer 2

通过为 Flickity 控制按钮定义边框半径和背景颜色解决。

外行人的想法是按钮中的默认背景透明度影响了它的形状。只有“箭头”部分有颜色，背景是透明的，因此形状被定义为菱形，这就是为什么我在图像中有一个可点击的“菱形”。

一旦添加了边框半径和背景颜色，按钮的尺寸就变成了完全矩形，而不是箭头控件的菱形。

.flickity-prev-next-button.next {  
   width:100%;
     height:100%;
     background: #333;
     border-radius:15px;
     opacity:0;
    }

Flickity gallery：风格如此点击图像上的任何地方前进到下一个？

Flickity gallery: Style so clicking anywhere on the image advances to next?

css

flickity