Question

I am trying to recreate this JQuery Feature Content Slider:

http://demo.webdeveloperplus.com/featured-content-slider/

When I recreate this in JSFiddle there are 2 Style Elements that are not showing up.

http://jsfiddle.net/NinjaSk8ter/6WXkM/

The Image Title and Image Description have a transparent grey box which appears on top of the Main Image. Also the ListItem Tabs have a triangular pointer which is not showing up.

However in JSFiddle I dont know how to make that transparent grey box and pointer appear:

I noticed that the Demo Version is using jquery-ui.min 1.5.3 and I have added that for the JSFiddle Version as a managed resource:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js

Answer 1

You have to modify the css:

#featured .ui-tabs-panel .info {
    background: url("images/transparent-bg.png") repeat scroll 0 0 transparent;
    bottom: 0;
    height: 70px;
    left: 0;
    position: absolute;
}

#featured li.ui-tabs-selected{
    background:url('images/selected-item.gif') top left no-repeat;  
}

For example the pointer is in this address:
http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif

And the gray box background in this:
http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png

Check it out:
http://jsfiddle.net/6WXkM/2/

*You must replace this images with ones that you own