views_slideshow 控件修改 Drupal 7

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）应用整体背景，然后将相关图像应用到下一张和上一张。这一切都有效。但是，单击下一张和上一张图像时，实际上并没有使幻灯片转到下一张和上一张幻灯片。所以我决定看看这是否可能是利润。我测试了这一切，发现了一些有趣的东西。当我从.views-slideshow-controls-bottom 中取出margin-left: 500px; 时，它可以工作，当我单击下一张和上一张图片时，在取出后它就可以工作。所以我尝试了不同的边距。我申请了margin-top:500px;，它奏效了。好像是margin-left.

链接：http://www.completegroupuk.com（首页幻灯片）

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

Answer 1

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

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