How does one remove the inline hard coded styles of height and width from views slideshow? I'm trying to make views slideshow responsive.

I'm trying to make my slideshow responsive (no i'm not interested in flexslider or another slideshow module at the moment).

  • There's a very long winded thread in regard to that. drupal.org/node/1317510 Honestly, it's like fitting a square peg in a round hole. Flexslider is really the best solution and can do everything Views Slideshow can do. I actually did get a regular Views Slideshow to be responsive using suggestions in the thread above but it was a lot of work and CSS hacking. – Danny Englander Sep 27 '12 at 15:20
  • Plus one for flex slider. You do know that flex slider comes with a views slideshow plugin right? You just select flex slider instead of cycle. I went from using cycle v1 to cycle v2 and then to flex slider and only had to change a very small amount of css to make the switch. – rooby Mar 13 '13 at 20:56
up vote 9 down vote accepted

The flexslider module mentioned above seems great with it's mobile swipe support, but only images are supported and I needed videos slideshow, with overlays support. So I've added the following lines in my theme's CSS file and it worked:

.views_slideshow_cycle_main { width: 100%; }
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame { width: 100% !important; height: auto; }
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row { width: 100% !important; height: auto; }
.views_slideshow_cycle_main .field-content { max-width: 100%; width: 100%; }
.views_slideshow_cycle_main .field-content img { max-width: 100%; width: 100%; height: auto; margin: 0; padding: 0; }

With SCSS, it may be easily written as:

.views_slideshow_cycle_main {                                                      
  width: 100%;                                                                     
 .views-slideshow-cycle-main-frame {width: 100% !important; height: auto;}         
 .views-slideshow-cycle-main-frame-row {width: 100% !important; height: auto;}     
 .field-content { max-width: 100%; width: 100%;}                                   
 .field-content img { max-width: 100%; width: 100%; height: auto; margin: 0; padding:0;} 
}   

The overlays were added by views_slideshow_xtra_overlay.

Adapted from This discussion

  • I am using flex slider v1 drupal module and I have very complex content in my slideshow. It is definitely not limited to images. - Or do you mean swipe only supports images? – rooby Mar 13 '13 at 20:54
  • @Druvision the ".views_slideshow_cycle_main .views-slideshow-cycle-main-frame" height seem not responsive on my view slieshow when I resizing the browser. Is there a way to fix this? – CocoSkin Aug 15 '14 at 15:47

Better option is to use the 'Advanced Options' of the views slideshow module itself.

You need to do the following

  1. Create directory called json2 in sites/all/libraries and download https://raw.github.com/douglascrockford/JSON-js/master/json2.js and rename the folder json2.

  2. Under FORMAT slideshow settings in the view, scroll "jQuery Cycle Custom Options" and under advance options set,

    height: auto
    width: auto
    containerResize: 0
    slideResize: 0
    fit: 1
    
  3. Make the slide window height fit the largest slide: leave unchecked

  4. Update the view and voila! The slideshow will be responsive even while dragging the browser window.

Ref: here and here

  • You can still run into some issues depending on what you have inside the slideshow. In my experience I have not found a 100% reliable method with jquery cycle version 1. - I have even used these settings with the addition of some custom javascript and still didn't get a 100% perfect solution. – rooby Mar 13 '13 at 20:53
  • yeah, flexslider html is also short and sweet. +1 for flexslider. – Kevin Siji Mar 15 '13 at 7:01
  • You saved my day. Thank you very much! – AyeshK Apr 8 '14 at 1:23
  • Hello. I don't understand how can I do this step: Make the slide window height fit the largest slide: leave unchecked. Where? – cabita Nov 27 '14 at 11:15
  • @cabita There is a checkbox in the views slideshow settings with label Make the slide window height fit the largest slide. Leave it unchecked. – Kevin Siji Dec 5 '14 at 4:43

This thread has a very nice solution: https://drupal.org/node/1510526

The css recommmended gets you a very nice slideshow, and there is some javascript too get a little further along. The only problem I have is that if you slide the browser narrower and wider, the slideshow's height causes problems around it in a vertical direction. You can mitigate this with different max-height css values for your different media query css files.

There is also this sandbox project which gives you a jcycle2 views slideshow plugin...

https://drupal.org/sandbox/BenYoung/1832338

which uses the new and improved jcycle2 library -- fully responsive!! http://jquery.malsup.com/cycle2/

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.