I am trying to make views slideshow adaptive (or responsive), without success. Adaptive/responsive means that the main frame width should take 100% of its container (which is responsive) instead of fixed value.

First problem

I set the width to 100% in cycle advanced settings, but the "%" gets stripped by Drupal.viewsSlideshowCycle.advancedOptionCleanup when the page is viewed and the width becomes 100px.

Second problem

In order to avoid this limitation, I deleted the advanced width setting and added some css like this:

.views-slideshow-cycle-main-frame {
  width: 100% !important;
}
.views-slideshow-cycle-main-frame-row {
  position: relative !important;
}

And it works beautiful, is responsive and scales very well. But when you click on the pager to see another picture (and probably also if the picture changes automatically) , there is a momentary displacement, unfortunately it's visible, when the main frame is for a moment shown as if these rules didn't work (or worked partially). The pager is displayed on par with the main frame. This makes the whole solution useless.

Question

Is there some better method to make the views slideshow scalable/responsive/adaptive?

CommentFileSizeAuthor
#1 scroll-transition issue.png160.29 KBpatty.fresonke
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

patty.fresonke’s picture

FileSize
160.29 KB

I think I'm having your same issue, I have four articles up at a time and when I click to go to the next set of four they aren't lined up properly until the slide transition is complete. I've attached a screenshot to help. This problem only happens when there is a transition setup though... Unfortunately I have not found a solution...

chrisjlee’s picture

Is there currently any documentation on to make this work / become responsive?

mgifford’s picture

There's some work in making http://drupal.org/project/field_slideshow responsive that might be able to be ported over here.

TimelessDomain’s picture

mdroste’s picture

This works for me:

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

Example: http://mdwp.de/mdwp-auf-smartphones#content

drclaw’s picture

I ran into this problem recently. It's tricky to make jQuery Cycle responsive. The best solution I found online requires inserting a dummy image tag before the slides. This is the tutorial. There are links at the bottom to see it in action. Unfortunately I made it work with a custom implementation of jQuery Cycle, not views slideshow... To integrate it with views slideshow, we would need to add an option to the settings page in views and then add the appropriate cycle settings, css and dummy image tag when the slideshow is generated... Seems a bit hacky when you can just use the FlexSlider module which comes with a views slideshow plugin (FlexSlider is a slideshow library that is responsive out-of-the-box).

rooby’s picture

For people wanting a proper responsive solution follow this issue and try the sandbox #1801332: Support Malsup's Cycle2 Plugin

Exploratus’s picture

#5 seems to work for me.

GiorgosK’s picture

#5 works great thanks

EDIT: width was always good but the height was not working properly so after reading lots of support requests in the issue queue I came up with this

(function($){
  $(window).resize(function() {
    $('.views_slideshow_singleframe_teaser_section, .views-slideshow-cycle-main-frame, .views-slideshow-cycle-main-frame-row').each(function(){
		var ratio = 600 / 940 ; //put your own height / width of main image style 
		$(this).height($(this).width() * ratio);
    });
  }); 
})(jQuery); 

if you want to use it put your own height and width that correspond to the image style of the main image

a.ross’s picture

We're using this:

.views-slideshow-cycle-main-frame {
  width: auto !important;
}
.views-slideshow-cycle-main-frame  .views_slideshow_cycle_slide {
  max-width: 100% !important;
}

The only problem I've noticed with this is when you scale the browser window, the height of the slides at page load is retained. I don't think that's impossible to fix with CSS either, maybe someone else figures that out.

GiorgosK’s picture

@a.ross you can use my javascript solution above
responding on resizing the browser window mean that javascript is enabled anyway so you are not loosing functionality

a.ross’s picture

That would obviously be the best solution, but I'd rather not add extra javascript to the page for something I think is a minor issue. It only happens in practice when somebody switches from portrait to landscape or vice versa AFTER the slideshow started.

Also, the code could be improved. For example, it can dynamically get the height and width from the slides quite easily.

gmclelland’s picture

Haven't tried these solutions but I came across them and thought I would share.

See the following:
http://drupal.stackexchange.com/a/64608/396
http://groups.drupal.org/node/204813#comment-757148 and

rooby’s picture

In my experience (with all the fancy json2 advanced settings + some js tweaks similar to those mentioned here) I have never been able to get a 100% perfect solution including flawless transitions.

I'm quite certain you cannot with cycle v1.

I will +1 the fact that flex slider is the best/easiest current drupal 7 solution.

Because flex slider comes with a views slideshow plugin, I was able to use my existing cycle slideshow and with very minimal settings & css tweaks turn it into a flex slider view.

When drupal core ships with jQuery high enough to use cycle2 (or jquery_update becomes more stable) that might be a different story, although flex slider 2 is on the horizon too.

cjtriplett’s picture

5 worked for me as well.

In my case I've created an overlay and added a background image inline (by removing the filter from views mind you. And it's absolutely silly that there's no bypass for inline styles. )

So my background image gets cropped when the slide gets scaled down, but it works perfectly in my situation.

zapz1st’s picture

#9 Thank you so much . It work but not flexible for different ratio .

You can try this . It work all ratio for me.



(jQuery)

(function ($) {
         
    $(window).resize(function() {
        $('.views-slideshow-cycle-main-frame').each(function(){
            var heightImgNow = '';

            $(this).find('.views-slideshow-cycle-main-frame-row').each(function(){
                    var thisDisplay = $(this).prop("style").display;
                    var thisImgHeight = $(this).find('img').height();
                    if(thisDisplay == 'block') {
                        heightImgNow = thisImgHeight;
                    }    
            });             

            if(heightImgNow != '') {
                // set div height    = now image height.
                $(this).height(heightImgNow); 
            }            
        });
    });    

}) (jQuery);



CSS

.views-slideshow-cycle-main-frame,
.views-slideshow-cycle-main-frame-row {
    width: 100% !important;
    margin: auto;
}
Colton3310’s picture

Thanks very much

fiammetta’s picture

setting the margin worked for me. Thank you so much!

GDH’s picture

#5 worked except the height issue. I added auto for that and it cleans up nicely after the subsequent transition. But it will briefly overlap with content below when resizing up until the next transition. The outer div still retains the previous height before the resizing. Perhaps forcing a slideshow cycle on resize event with javascript would clear that up immediately, but I don't know the proper JQuery function.

    .views-slideshow-cycle-main-frame-row, .views-slideshow-cycle-main-frame {
      width: 100% !important;
      height: auto !important;
    }
kirtan-1’s picture

#5 works great! thanks

sandboxpl’s picture

#19 works perfectly too, thanks :)

eärendil’s picture

I did it this way:

.views-slideshow-cycle-main-frame-row, .views-slideshow-cycle-main-frame {
   width: 100% !important;
}
$(document).ready(function () {
     $(window).resize(function () {
          var newHeight = $('.view-slideshow img').height();
          $(".views-slideshow-cycle-main-frame, .views-slideshow-cycle-main-frame-row").show().height(newHeight);
      });
});
wrender’s picture

Just came across this thread. I am just curious what people's thoughts are on the flexslider library and module. Does views slideshow provide just as good of a solution for responsive? I switched a lot of sites to flexslider, but I am considering going back to views slideshow. I find it is a way better designed module, but had a lot of problems getting it to work responsively. Going to setup a dev site and check the solutions provide above.

eigentor’s picture

Issue summary: View changes

I like Views Slideshow better for better Drupal integration. Flexslider is better in responsive as in out of the box. It has some issues of its own, though (may not work in some browsers, e.g. even sometimes chrome). It is also touch enabled, don't know about Views Slideshow.

I hope Views Slideshow will one day be ported to use the cycle2 plugin. This is a modern-day library as I understand.
All those absolute positioned divs in version 1 and how to find out which one to set the width feels like a hack even if it finally works.

wrender’s picture

Thanks for your feedback eigentor. It seems the same for us. I find views slideshow is a better designed module, but seems to be behind in responsive. For this reason we have had to switch over to flexslider. Would be nice if the projects were combined.

OMD’s picture

The CSS section of #16 works in all browsers for me. Thank you!

sportel’s picture

The links in #13 gave me a simple and working solution.

Internet’s picture

CSS in #16 applied to (relevant view block ID's and) Classes in Drupal 8 works for me. Thanks!

NickDickinsonWilde’s picture

Status: Active » Closed (outdated)

As noted above, there is some css you can apply that will make it better. However the underlying issue is that the JavaScript library isn't very mobile friendly. This is discussed/planned to be fix in #1801332: Support Malsup's Cycle2 Plugin, there is a sandbox but I haven't tried it so no idea on stability.

tevans’s picture

For anyone still happening across this thread: #16 works great, but only if the row needs to be the same height as the image. For example, if you have any other content in that row (let's say a block of text), then the height of the frame is not going to be tall enough to include that text. The code below fixed that for my case:

      $(window).resize(function() {
        $('.views-slideshow-cycle-main-frame').each(function(){
          var heightNow = '';

          $(this).find('.views-slideshow-cycle-main-frame-row').each(function(){
            var thisDisplay = $(this).css('display');
            var thisHeight = $(this).height();
            if(thisDisplay == 'block') {
              heightNow = thisHeight;
            }
          });

          if(heightNow != '') {
            // set div height    = now image height.
            $(this).height(heightNow);
          }
        });
      }); 

Note: I also got the display using .css() instead of .prop() so that it will work with jQuery <1.6, like what ships with Drupal 7.

bcole1701’s picture

CSS in #19 worked for me.