Grow your CSS skills. Land your dream job.

Nivo Slider

  • # August 27, 2012 at 3:44 am

    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?

    # August 28, 2012 at 10:36 am

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".