Recipes for most compatible slideshows and/or carousels? I'm getting ready to implement a carousel for client in Drupal 7. I've been searching for information about how to implement carousels and slideshows for maximum compatibility. I've installed several modules in my search and I realize that there is not an out of the box complete solution.

Most of the modules I've tried will make a mess of the page when js is disabled, some of them are buggy on mobile devices etc. I've seen some CSS3 solutions but haven't tried them yet by reason of not knowing the classes employed by them and the level of support they have in browsers/devices. I'd like to ask the community for what solutions exist aside from not using carousels and slideshows to accomplish this. A reasonably compatible solution that looks and functions ok, even on non js enabled browsers.
The most common formula I implement can work for just about any JS library.

Assuming you are attaching slides to a content type, here is how I go about it.

First, you will need File Entity, for the ability to add fields to file types.

You can use the default Image type, or, create a special one like 'Slide', if you'd like to isolate field and behavior.


Add an image field to a content type. Set the widget to 'Media' embed.
Set cardinality
Hide field display from all view modes
Create a new view mode, called 'Slideshow' or 'Carousel' whatever you desire
In the new view mode, set the image reference field to render the image in a view mode from the file entity configuration.
In Image (or your new) file type, add some fields like Title, Text, and Link. Configure the chosen file display to set those fields however you like.
Create a template representing that file display with the markup you desire and placement of fields.
Create a View, add a Block display, and add a contextual filter of node nid, based on url value (when on node pages). 
Set the view to only output the Rendered Entity: Slideshow mode. No fields.
Put the block in your designated slideshow region.


When adding images on the content type(s), you should have a ctools window after uploading that presents the fields you added in step 6 - that is for setting headers, text, and 'read more' link on each image.

This will output the markup you provided in those templates on nodes who have one or more files attached. From here, you would want to tweak markup to match whatever slide JS library you select and some CSS tweaking as well. Then, you can hook up an initializer in a JS file in your theme, to call as you need.

This might take 30-60 minutes to setup, but it has been the most bulletproof way for me to allow someone to add a slideshow or hero (just 1 image) to a content page while being open and flexible to whatever slide/carousel library may be required.

My favorite plugins/libraries for slide functionality are Zurb Orbit and slick.js. I don't usually need or implement any modules to do these anymore, for the smallest possible implementation without a ton of overhead.

That said, if you are perhaps using a Foundation based theme, you might find it worthwhile to leverage Field Orbit. It is built a little like the steps above, but uses a field formatter to simplify the implementation part. Disclaimer, I built that many moons ago - but I have not made any changes to it lately. I believe it works with Foundation 5.x as well.