Translucent - Responsive Banner Rotator / Slider

I have tested it in iPhone 3G (2nd gen) and it shows everything correctly. Can you try with the latest version of this banner as I made some optimization for performance.

Thanks – The update fixed the issue with captions on the iPhone, but now all the buttons are missing on the iPhone and the prev and next buttons are missing on all other browsers.

With latest update, make sure following 2 things:

1. Replace all the files inside the trans_banner with new files.
2. By default, the responsive option is enabled. To make the buttons to work correctly, set the following new parameter:

responsive_limit_navigation_type: 1

Additionally there are 6 documented settings available which may help further understanding or customisation:

responsive : true,        
responsive_limit_autoplay : '',
responsive_limit_caption : 480,
responsive_limit_navigation : 480,
responsive_limit_navigation_type : 2,
responsive_screen_based_limits : false

Yeah I had already copied all the new files over. I made the changes you mention in regards to responsive options, but still no luck. I notice that you don’t reference trans-banner.js in any of your new examples but you include it in the files. I’ve left it out because I have all of my parameters already set, but I did add it in as a test to see if it made a difference, it did not. Any other ideas?

Please try these 2 steps:

1. Wrap all the “slide” div tags inside another div having class “Slides” (Latest update needs this change for responsive behavior). (Or just use the html code from latest version and then edit it)
2. It seems the parameter responsive_limit_navigation_type: 1 still not added. Add it to the plugin parameters when it is initiated. For example:

$('.TB_Wrapper').TransBanner({
    slide_autoplay: true,
    responsive_limit_navigation_type: 1,

    [ Remaining parameters here ]

});

Sorry – added the responsive section in locally to test and didn’t bother to upload when it didn’t work. I’ve added in the Slides div and still no luck. Here’s an image to show you what is happening: http://www.bluecougar.com/gallery_test/slide.jpg – the second line of the caption falls out of the slide. I’ve looked at it on 3 different iPhones all with the same result. I do have the numbers back on the iPhone, the prev and next buttons I can do without. I just need to get the caption to work. When you look at it – be sure to scroll through the slides – the first one always loads correctly. Interestingly, I noticed while making changes yesterday, the caption’s text was perfect until the numbers showed back up. It seems like the numbers are throwing off the text?

In further testing, I can get the caption font size to scale correctly from slide to slide by either making the buttons huge (40) or floating the caption – neither of which is something I want to do but figured I would mention it if it helps.

It is the change in font size of caption which causes the issue. If I set the font-size to 16, it works correctly in the iPhone:

.TB_Wrapper .Slide div {
    z-index:4;
    position:absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:200;    
    font-size:10px;    
    color:#FFF;
}

I will look into this issue and update here once I find a fix for this.

Fantastic – I have a deadline to go live in a week, think it will be fixed by then? If not, I’ll need to find another slider. Thanks for all your help!

Then drop me an email through my profile page and so that I can send the updated version immediately after fixing.

Just sent you the details about fix. For others having issue with caption on iPhone:

Remove the overflow:hidden style from the class .TB_Wrapper .txtCont