Responsive Sliders in Omega

http://groups.drupal.org/node/195343#comment-652213
Also see http://drupal.org/project/flexslider

Thanks jmolivas! I checked them out and CS Adaptive Images really covered my whole other concern about images load sizes, great share!

If you want to hide the slider for small devices try adding the following classes to your css files

since is mobile first you may set the hide on global and then assign to show when device is narrow or greater it means tablet, laptop or desktop

global.css

.flexslider {
display:none;
}

theme_name-alpha-default-narrow.css

.flexslider {
display:block;
}

The CSS on it's own won't prevent the large file downloads (or whatever size is linked in the html).
The other tools jmolivas mentioned should help with that issue.

No I wasn't thinking of css but rather the approach using cs_adaptive_image. Are optimized, small images only, downloaded for mobile?

Thanks just trying to install now

Hi Paul & jmolivas,

This seems like an interesting way to handle the images. Have either of you managed to figure out a decent way of setting the height on a responsive views slideshow? The only reliable way I've found is by setting height on

This works ok when you've got a few images cycling with a pager underneath. The height of course changes on the different stylesheets. The problem comes when you try and integrate other fields into the slideshow. If you have an image with a text field underneath and the pager below that, I can't get the pager to sit below the text field like so:

Image
Text field
Pager

Trying to float the pager underneath to the centre ends up with:

Image
Text field | Pager

I could increase the height on the row which wraps the image and the text field (.views-slideshow-cycle-main-frame-row) to include the height of the text but that means the text could not change size or else it would get cut off again! It would be much better for the text field wrapper to respond too. I can't find any decent examples anywhere where people have used more than just images and a pager, which is fairly straightforward to get responsive. Actually it has been pretty hard to find any responsive examples at all.

Thanks if anyone can shed some light. Height is always the issue in these slideshows. It either stays the same through all screen sizes meaning huge gap between image and pager on mobile, or you have to set exactly which means anything underneath can't respond properly!

Anyway, any input is as always, very much appreciated :)

Sam.

The mustardseedmedia video was just the part I was missing in order to get a caption working, needed to rewrite field and position absolute. My caption kept disappearing after slide 1. Thanks for the link Paul :)

Sam.

I'm about to dive in to implementing this recipe, so it will probably become apparent to me while I chef. However that question came to mind while installing the required modules, I see flexslider includes flexslider_views module. I try to keep the amount of modules to a minimum where possible. So the question... Why the need for views_slideshow? What are the added benefits?

I did it here: www.kentlester.com

The trick is to use json2.js to set the advanced settings for jquery cycle. It's a bit involved, but once you know how to do it, it works fine.

After setting up views slideshow, and setting format to slideshow, go to "format/settings" and scroll down. There, you will see the note about adding json2.js to your library for advanced options. Once you've set up the library as instructed, go to http://malsup.com/jquery/cycle/options.html. There you will find all the custom settings for jquery cycle.

I have the following values to make my views slideshow responsive:

One of these days, I'm going to write an article on how to set this all up, but I haven't had a chance to do so. In the meantime, the flexslider module has continued to improve, and may make this moot.

But I still like views slideshow because you can easily build more than one style on a page and you don't need to add yet another module (flexslider) to the mix.

thanks Zoom_unit, it's works if you remove the width anf height attribute on img tag. But how can i achieve this on the renderer image of the field ?
do i have to alter the theme_image ?
In your site you add a class 'adaptive-image' who define the width and the max-width of the image and you don't have any attributes width or height on it.

I just noticed article on Drupal Planet and was reminded of this discussion.

http://drupaleasy.com/blogs/ultimike/2012/09/anatomy-full-featured-respo...

I haven't tried this Feature myself but would be interested to read any opinions.

I mentioned earlier about using Views Slideshow as a Responsive slider. Since that time, much has changed and I've moved away from Views Slideshow to Flexslider for all responsive sliders. Why? Several reasons.

1) The latest iteration of Flexslider (2.0) greatly enhances the slider options and reduces or eliminates the need for Views Slideshow altogether. In fact, unless you need easy to use traditional pagers on your slider, you don't even need Views Slideshow at all. You can build Views based sliders with Flexslider by itself. This eliminates a module, complexity, and Drupal overhead.

2) Flexslider already handles resizing automatically, making theming easier.

3) It has swipe capability on mobile devices built in.

4) The 2.0 version of Flexslider can also create carousels out of the box, eliminating the need for yet another Drupal module.

5) Flexslider uses the concept of "presets," which store slider behavior like whether the slider is a carousel or single image slider, speed of animation, easing style, etc. You can have multiple presets and you apply the appropriate one to the slider from within Views.

6) Most importantly, presets allow you to define a "namespace" (under advanced options) which essentially adds a custom class to all the flexslider elements. Using that CSS class, you can custom style each preset in completely different ways. I admit, setting up the myriad types of sliders and styling them is a pain in the ass with any slider approach, but with Flexslider, I've only had to endure the pain once. :-) I've set up a CSS file specifically for my different sliders, and created the CSS for each "type" of slider I might use. (carousel, simple slider, thumbnail base slider, sliders with text, etc.) Now, to have full slider functionality, I just add that CSS file to my theme, activate flexslider, import the preset settings from another site, (yes, flexslider has import/export capability), attach the proper preset in Views, and I'm done! Much nicer.

Hope this helps.

nm

since flex 2.0 isn't done i implement it in the theme layer.
you can use all cool features that come with the library.