Carousel (Twitter Bootstrap) + retina.js not working properly

Question

I recently posted my homepage in which I use carousel + Twitter Bootstrap + retina.js.

http://www.stelab.nagoya-u.ac.jp/~okumura/index.html

When I access this page using my old MacBook Pro (no retina), it shows a carousel as expected. Three images are automatically displayed with a good transition. But when I open the same page with my MacBook Pro retina (Safari 6.0.3 + OS X 10.8.3), one or two images are not displayed.

Retina.js seems to work correctly with my MacBook Pro retina because the image on the next page automatically changes to the high resolution version of my image. Therefore, I believe that the combination of a carousel and retina.js does not work under certain conditions.

http://www.stelab.nagoya-u.ac.jp/~okumura/profile.html

I get the same result even if I use Google Chrome (26.0.1410.65) or Firefox (20.0) on my Mac retina.

Can someone tell me how to make my homepage work please?

• Carousel (Twitter Bootstrap) http://twitter.imtqy.com/bootstrap/javascript.html#carousel
• retina.js http://retinajs.com

Answer 1

This is a known issue with retina.js and carousels. It is reported here: https://github.com/imulus/retinajs/issues/84

Answer 2

This jquery plugin fixes the problem: https://github.com/tylercraft/jQuery-Retina

You can use suffixe (for example, image-x2.jpg) or use any selector. It works great with ajax loading.