Carousel (Twitter Bootstrap) + retina.js doesn't work as expected

Question

I have recently released my home page in which I use carousel + Twitter Bootstrap + retina.js.

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

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

Retina.js seems to be working properly with my retina MacBook Pro, because the image in the following page is automatically changed to the high-reso version of my picture. Therefore, I think that the combination of 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 retina Mac.

Could anyone tell me how to make my home page work properly, please?

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

Answer 1

This is a known issue with retina.js and carousels. It has been 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 (image-x2.jpg for example), or use any selector. It works perfectly with ajax loading too.