Basic Slider: Place caption under image

Question

I need to show image slide show for news which can have one or more than one image displayed.

If it has just one image then Navigation bar should hide, This feature is built in.

But i am facing problem with moving the caption of the image exactly under the Image. I am able to change the bottom margin for css p.bjqs-caption to -30px. which moves the caption but hides under something and is not visible i tried all options like z-index and other stuff but nothing seem to work.

I would appreciate help in this regard.

Slider : http://www.basic-slider.com/

I tried to setup fiddle but demo on fiddle is not working link http://jsfiddle.net/rUXAt/1/

UPDATE : Working fiddle http://jsfiddle.net/rUXAt/2/

Answer 1

try this one, put height for ul and li height: 355px !important; and color to p.bjqs-caption

p.bjqs-caption {
    background: none repeat scroll 0 0 #CCCCCC;
}
p.bjqs-caption {
    bottom: 0;
    color: #000000;
    display: block;
    margin: 0;
    padding: 2%;
    position: absolute;
    width: 96%;
}

ul.bjqs {
    display: none;
    height: 355px !important;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

li.bjqs-slide {
    display: none;
    height: 355px !important;
    position: absolute;
}

Answer 2

Check working fiddle

p.bjqs-caption {
    bottom: 0;
    color: #000000;
    display: block;
    margin: 0;
    padding: 2%;
    position: absolute;
    width: 96%;
}

http://jsfiddle.net/rUXAt/2/