Question

I’m setting up a site using the Nivo image slider. You can see the site here.

I have the directional controls in place (i.e. back and next), along with the dots to show current position.

These should be allowing users to click on them to control the image slider, but I can’t for the life of me work out why they’re simply not responding to the mouse?

Here’s the image slider settings:

    <script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:500, //Slide transition speed
        pauseTime:10000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:false, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:1, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}, //Triggers after all slides have been shown
        lastSlide: function(){}, //Triggers when last slide is shown
        afterLoad: function(){} //Triggers when slider has loaded
    });
});
</script>

I’m sure it’s a simple thing, I hope someone can help.

All help appreciated,

Tom Perkins

Answer 1

Remove z-index:-1 from .image-wide css class (i’ts in your style.css line 486).
What is happening is that the image container is below the other elements, and the user can’t “reach it”.