Flickity画廊:风格，所以点击图片上的任何地方都会进入下一个

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;
}

应该这样做

编辑：还有你的标题，这样你就不能点击它后面的图像。就我个人而言，我会通过将标题变成白色来解决这个问题。

Answer 2

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

我的外行认为按钮默认的背景透明度影响了它的形状。只有"；箭头"；部分有颜色，背景是透明的，所以形状被定义为菱形，这就是为什么我有一个"；钻石"；可点击的图像内部。

添加边界半径和背景颜色后，按钮的尺寸将完全为矩形，而不是箭头控件的菱形。

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