Nivo Slider

[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?

[Taufik Nurrohman]

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 :(

[Author]

Posts