Question

我在Drupal 7上使用views_slideshow。我已经配置了它，因此设置为显示底部控件而不是顶部控件。

我试图用图像替换“下一个”和“上一个”文本，这在大多数情况下我已成功完成。问题是，图像不可点击。让我解释一下。我有这个css代码：

.views-slideshow-controls-bottom {
margin-left: 500px;
background-image: url(../images/links-bg.gif);
background-repeat: no-repeat;
width: 107px;
height: 57px;
}
.views-slideshow-controls-text-previous {
background-image: url(../images/prev-link-hover.gif);
display: inline-block;
width: 36px;
height: 35px;
margin-left: 15px;
margin-top: 10px;
}
.views-slideshow-controls-text-previous a {
display: none;
}
.views-slideshow-controls-text-next {
background-image: url(../images/next-link-hover.gif);
display: inline-block;
height: 35px;
width: 36px;
}
.views-slideshow-controls-text-next a {
display: none;
}

这使它看起来很棒，它向右移动（通过margin left 500px）应用整体背景，然后将相关图像应用于下一个和上一个。一切正常。但是，单击下一个和上一个图像时，实际上不会使幻灯片显示转到下一个和上一个幻灯片。所以我决定看看它是否可能是利润。我测试了一切，发现了一些有趣的东西。当我从margin-left: 500px;取出.views-slideshow-controls-bottom时，它会起作用，当我点击下一张和上一张图片后，在取出它之后就可以了。所以我尝试了不同的保证金。我申请margin-top:500px;并且有效。似乎是margin-left.

链接：http://www.completegroupuk.com（主页上的幻灯片显示）

为什么会这样？我该如何解决这个问题？

Answer 1

好的，这就是我如何让它发挥作用。添加相对于.view-slideshow div的位置，从.views-slideshow-controls-bottom中删除margin-left，并使用高z-index绝对定位nav元素。

.view-slideshow { position: relative; }

.views-slideshow-controls-bottom {
  background-image: url(../images/links-bg.gif);
  background-repeat: no-repeat;
  width: 107px;
  height: 57px;
  position: absolute;
  top: 230px;
  right: 355px;
  z-index: 500;
}

views_slideshow控制修改Drupal 7

1 个答案: