I have nivo slider in my web page. I need to display images of various width and height.The larger image displays behind the smaller image. Please refer the following screenshot.

I have to remove displaying larger image behind the small image. Is there any possibility to do it with nivo slider?

I have nivo slider in my web page. I need to display images of various width and height.The larger image displays behind the smaller image. Please refer the following screenshot.

I have to remove displaying larger image behind the small image. Is there any possibility to do it with nivo slider?

• javascript
• html
• css
• nivo-slider

• As I know, nivo slider needs images to be same sized. The sizes are mentioned in the css file. – Vinay Commented May 29, 2012 at 9:56
• The images are coming from back end and i shouldn't mention the sizes. – designersvsoft Commented May 29, 2012 at 9:58

3 Answers 3

I used this and it's worked :)

.theme-default .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    width: 556px;
    height: 183px !important;
}

add this

<style>
    .slider-wrapper,.nivoSlider , img{
        width:500px;
        height:200px;
        margin-bottom:0px !important;
        border-radius:10px;
    }
</style>

.theme-navigation-inside .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    height: auto;
}

I fhound this took care of the problem