Making Views Slideshow responsive

** UPDATE **

Usability issues aside, I’ve moved away from the previous technique to using a resize function as follows:

In your theme javascript file add the following lines:

(function($) { function resizeDiv() { var vpW = $(window).width(); var vpH = $(window).height(); var slideshowObjects = '.view-slideshow, .view-slideshow .views-slideshow-cycle-main-frame'; $(slideshowObjects).css({ 'width': vpW + 'px' 'height': vpH + 'px' }); } $(window).resize(function() { resizeDiv(); }); $(document).ready(function() { resizeDiv(); }); }) (jQuery);

In this example I’m setting the slideshow to fill the viewport. Replace the variables on lines 3 and 4 with the page element you want the slideshow to fill.

As before, I’ve named my view Slideshow. If required, replace '.view-slideshow' with your view slideshow class name.

** ENDS **

By default, the Views Slideshow module isn’t responsive.

I know there are several, mobile-ready Drupal slideshow alternatives out there these days but from time to time and even despite the lack of mobile support, I still find this module a very reliable tool for the job.

Here’s a quick step by step guide to make Views Slideshow responsive.

In your theme’s javascript file add the following lines:

(function($) { Drupal.theme.prototype.slideshowResizer = function(target) { var slideheight = 0; $(target + ' .views-slideshow-cycle-main-frame-row').each(function() { slideheight = $(this).find('.views-slideshow-cycle-main-frame-row-item').innerHeight(); if (slideheight != 0) { $(target + ' .views-slideshow-cycle-main-frame').css('height', slideheight + 'px'); $(target + ' .views-slideshow-cycle-main-frame-row').css('height', slideheight + 'px'); return false; } }); }; Drupal.behaviors.slideshowResize = { attach: function(context, settings) { $('.view-slideshow', context).once('processed', function() { Drupal.theme('slideshowResizer', '.view-slideshow'); }); $(window).load(function() { Drupal.theme('slideshowResizer', '.view-slideshow'); }); } }; }) (jQuery);

I’ve named my view Slideshow. If required, replace '.view-slideshow' with your view slideshow class name.

If you’ve got multiple slideshows, add each as a comma separated class e.g. '.view-slideshow, view-slideshow-other'.

Next add the following 3 lines to your theme CSS:

.views-slideshow-main-frame, .views-slideshow-main-frame-row, .views-slideshow-main-frame-row img { width:100% !important; }

If you have a question, please post it as a comment and I’ll do my best to answer.