Question

I am using views_slideshow on Drupal 7. I have it configured so It is set to display the bottom controls instead of the top controls.

I have attempted to replace the ‘next’ and ‘previous’ text with an image, which I have done succesfully, for the most part. The problem is, that the images are not clickable. Let me explain more. I have this css code:

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

This makes it look great, it moves it to the right (via margin left 500px) applies overall background and then applies the relevant image to next and previous. It all works. However, the next and previous images when clicked, dont actually make the slideshow go to the next and previous slide. So I decided to see if it was the margins maybe. And I tested it all and found something interesting. When I take out margin-left: 500px; from .views-slideshow-controls-bottom it works, when I click the next and previous images, after this has been taken out it works. So i tried a different margin. I applied margin-top:500px; and it worked. Just seems to be margin-left.

Link: http://www.completegroupuk.com (slideshow on the homepage)

Why is this happening?
How can I fix this?

Answer 1

Ok here’s how I got it to work. Add position relative to the .view-slideshow div, remove the margin-left from the .views-slideshow-controls-bottom and absolutely position the nav elements with a high 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;
}