Forums

chrisburton

I am looking to implement a feature of the Nivo Slider. Essentially just wanting the transition effect only so I would leave out the slider UI and all that comes with it.

I have setup a Fiddle of a basic portion of my site. How can I go about just showing one image and then when you click the numbers it cycles through to the next (no autoplay - only by clicking) while just using the transition?

Hompimpa

http://jsfiddle.net/tovic/TJZMA/2/

Very difficult, as NivoSlider not use a real image as a slide, but only using the image URL as background image for each piece of the div element (.nivo-slice and .nivo-box)
Navigation will be automatically generated, and they are inside the .nivoSlider

You should use something like absolute positioning to re-position the navigation.

Other:

$(function() {
    $('.main').nivoSlider({
        directionNav: false, // Hide the next & prev navigation
        manualAdvance: true // Disable auto slide
    });
});

This is the minimum required CSS code:

.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0;
    left:0;
    display:none;
}
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}

PS: NivoSlider isn't responsive :(