Grow your CSS skills. Land your dream job.

Nivo slider problem when overflow: hidden; is removed from #nivoSlider

  • # May 21, 2013 at 10:28 am

    Hi, I have removed overflow:hidden; from the #nivoSlider css property so that I can display the prev and next arrows either side of my slider but when removing the overflow:hidden; property it messes up the way the slides are displaying.

    my site is http://www.eighttwo.net

    Have spent all day trying to figure this out for myself but no luck. Any help is greatly appreciated.

    # May 21, 2013 at 10:32 am

    .nivoSlider {
    position: relative;
    width: 694%;
    height: 391px;
    }
    .nivoSlider img {
    position: absolute;
    top: 0px;
    left: 0px;
    max-width: none;
    margin-top: 48px;
    }
    .nivo-main-image {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    }

    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
    background:white;
    filter:alpha(opacity=0);
    opacity:0;
    }
    /* The slices and boxes in the Slider */
    .nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
    }
    .nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
    }
    .nivo-box img {
    display: block;
    }

    /* Caption styles */
    .nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    width:100%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    }
    .nivo-caption p {
    padding:5px;
    margin:0;
    }
    .nivo-caption a {
    display:inline !important;
    }
    .nivo-html-caption {
    display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
    }
    .nivo-prevNav {
    left: -100px;
    background-image: url(../img/prev_nav.png);
    background-repeat: no-repeat;
    height: 76px;
    width: 42px;
    }
    .nivo-nextNav {
    right: -100px;
    background-image: url(../img/next_nav.png);
    background-repeat: no-repeat;
    height: 76px;
    width: 42px;
    }
    /* Control nav styles (e.g. 1,2,3…) */
    .nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    }
    .nivo-controlNav a {
    cursor:pointer;
    }
    .nivo-controlNav a.active {
    font-weight:bold;
    }

    # May 21, 2013 at 10:44 am

    > I have removed overflow:hidden; from the #nivoSlider css property so that I can display the prev and next arrows either side of my slider

    Is this a standard feature of the Nivo slider or something you are adding yourself?

    # May 21, 2013 at 10:47 am

    usually the arrows remain within the div of the nivo slider so i am displaying them outside of the div using positioning left: -100px; for the prev image and right: -100px; for the next image. If i add the overflow: hidden; property back to the #nivoSlider the images sit where they should but then i lose the prev and next arrows completely

    # May 21, 2013 at 10:50 am

    >Is this a standard feature of the Nivo slider?

    So the answer is No.

    How are you positioning them? Have you added `position:relative` to the parent element?

    # May 21, 2013 at 10:53 am

    Have just tried poisiton:relative to the parent element and again lose the arrows altogether. Normally I don’t ask for help on things like this but this one has me stumped.

    # May 21, 2013 at 10:56 am

    I can see the image slides in correctly but then seems to jump up off where it shouldn’t be.

    # May 21, 2013 at 11:01 am

    ok this can be closed I have found a work around, instead of moving the nivo slider I have simply moved the background image up.

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

You must be logged in to reply to this topic.

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