How do i create views slide-show for responsive design. any help will be appreciated

Comments

I do it using CSS:

#home .home-slideshow {
width: 100%;
float: left;
}
#home .views-slideshow-cycle-main-frame {
width: 100% !important;
height: auto;
}
#home .views-slideshow-cycle-main-frame-row {
width: 100% !important;
height: auto;
}
#home .field-slideshow,
#home .field-slideshow-slide {
max-width: 100%;
width: 100%;
}
#home .field-slideshow img {
max-width: 100%;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

Unfortunately this doesn't help it resize vertically (the images do but the div doesn't) - but it works to a point.

Priority:Critical» Normal
Status:Active» Closed (duplicate)

Support requests are never critical. This is also a duplicate of #1146566: Can't remove the height/width of the slide container

Thanks for the starter CSS. I found I needed to tweak it slightly so I'm adding my version here:

.views_slideshow_cycle_main {
  width: 100%;
  float: left;
}
.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;
}

in case it helps someone else.

Helped me, thanks!

This worked for me too.

This works on my slideshow, but only when I reload the page. Is there a way to force it to resize automatically?

#3 worked a treat for me, thanks @Kristen Pol

@sioux although far from ideal, I've come up with a solution (in combination with @Kristen Pol's fix) using a jquery script:

jQuery(window).load(function () {
    jQuery(window).resize(function () {
        jQuery('#views_slideshow_cycle_main_front_page_slideshow-block_1 img').each(function () {
            var img_height = jQuery(this).height();
            if (img_height !== 0) {
                jQuery('#views_slideshow_cycle_main_front_page_slideshow-block_1').height(img_height);
                return false;
            }
        });
    });
});

There is no need to create your own solution or hack to get views slideshow to be responsive. As per my comment in #2, the solution is found at #1146566: Can't remove the height/width of the slide container

I had an issue with #3: Sometimes the horizontal scroll appeared when window was resized.

Using

.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
  width: 99% !important;
  height: auto;
}

instead of
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
  width: 100% !important;
  height: auto;
}

seems to fix it.

Ok, then I'm sorry for the second post :)

#3 and # 8 worked perfectly! Thanks for sharing!

I've just developed the javascript from #8 (thanks @netol). It now supports having more than 1 slide show on a page and doesn't depend on an image being the height of the slide. Hope it helps someone.

(function ($) {
$( window ).resize( function(){
$('.views_slideshow_cycle_main').each(function () {
var img_height;
$(this).find('.views-slideshow-cycle-main-frame-row').each(function () {
var tmp_img_height = $(this).height();
if (tmp_img_height !== 0 ) {
img_height = tmp_img_height;
}
return;
});
if (img_height !== 0) {
$(this).height(img_height).children('.views-slideshow-cycle-main-frame').height(img_height);
}
return;
});
});
});

Hi...I'm not a themer and tried inserting #3. Not getting the resize effect, but I think it is related to id? Sort of stuck, any help is appreciated.

here is a link to the page: http://dev.toadalfitness.com/home_show

Thanks!

@bodyblueprinter - I checked and it appears that the CSS is in there.

You might want to instead try the javascript from #13. You would need to put it in a .js file in your theme and make sure your theme loads it.

@Kristen Pol
Thanks for the css

Works nice !

The image is now fixed at the top left.
Any idea how I could scale the image from center?

Great css in #3 and jquery in #13....this is a good working solution.

Using with adaptivetheme

What about slideshow overlays?? The overlay appears fine for whatever configuration the page is loaded in....whether it be for tablet portrait, tablet landscape or desktop css versions from the media queries...

But if I am using a desktop browser the views overlay is not changing size or position relative to the slideshow as I make the browser window's width smaller. This is not a huge deal since the overlay will display fine when a tablet user loads the page...but it would be nice if my video slideshow solution w/overlay was tight all around. I suppose I need to do this in the jquery but I just don't know exactly what to do.

Thanks guys. #3 worked for me on it's own.

Comment from Kirsten Pol (#3) and script from Danabel are the best solution for me !

Thanks you both :-)

Thanks to all who offered solutions here. Making Views Slideshow responsive was a lifesaver for me.
I do have some questions however.

My application of the slideshow is this:
1) Each page of the slideshow consists of a a smallish left-floated graphic.
2) And a paragraph of text.

On wide screens, the graphic has a greater height than the text.
On the smallest mobile screens, the text has a greater vertical dimension than the graphic.

I implemented the css solution in #3. That works pretty well.
What it doesn't do is dynamically resize the slideshow area as you decrease and increase the size of the browser window.
In the case of decreasing from a larger to much smaller-sized window, the dimensions of the slideshow don't dynamically adjust. The text floods into the footer region of the page.
However, when you reload the page, everything gets re-adjusted nicely.

I am grateful that this slideshow is now responsive at all, but is there no fix for this?
--
I've also implemented the #13 javascript fix in addition to the css fix.
I don't find any performance difference.
Could the reasons for implementing the .js fix be explained in greater detail by someone?

Thanks.

For those that are still trying to hack away at making views slideshow responsive try using something like Flexslider http://drupal.org/project/flexslider or Views Slideshow Liquid Slider http://drupal.org/project/views_slideshow_liquid_slider instead. View slideshow, more specifically jquery cycle 1, was built well before responsive design was even a "thing". You are going to find that it takes hack upon hack just to get something that eventually is just sort of responsive. When views slideshow leverages jquery cycle 2 http://jquery.malsup.com/cycle2/, then we will be laughing. Until then, do yourself a favor and use a module and a library that was built from the ground up to support responsive designs. See #1801332: Support Malsup's Cycle2 Plugin for more info.

Thanks. I took your advice.

I'm new to Drupal (after running just static html sites), so everything I do seems encompassed within a fog of confusion.

I ended up using Liquid Slider. I failed with implementing FlexSlider both last week and again today. Liquid Slider installed in conjunction with Views SlideShow, so it implemented quite easily for me.

I was hesitant to use it because so few sites do (possibly it's new just this year, 2013?). I was also hesitant to use it because the demo showed it resizing each slide's height. Getting a static height (across all slides) turned out just to be a toggle.

#3 worked perfectly for me - thanks @KristenPol!

Using #3 and #13, the slider resizes, but it leaves a big gap on the page between the bottom of the slider, and any content in blocks below it. The opposite is also true, that when the browser window is full screen, the slider overlaps the text.

I added the js to a .js file, and referenced it from my .info file in my subtheme, and its loading. But I haven't noticed any difference since adding it.

Anyone else not managing to get the height to adjust properly?

I am using this script, it updating sliders width and height when resizing window

$(window).resize(function(){
  $('.views_slideshow_cycle_main').each(function(){
    var cycleMain = $(this);
    var img_width = 0,
        img_height = 0;
    var clearCSS = {width: "auto", height: "auto"};
    var cycle = cycleMain.children('.views-slideshow-cycle-main-frame');
    cycleElements = cycle.data("cycle.opts");
    cycle.css(clearCSS);
    cycleMain.find('.views-slideshow-cycle-main-frame-row').each(function(i){
      $(this).css(clearCSS);
      var tmp_img_width = $(this).width();
      var tmp_img_height = $(this).height();
      if(tmp_img_width > img_width)
        img_width = tmp_img_width;
      if(tmp_img_height > img_height)
        img_height = tmp_img_height;
      cycleElements.elements[i].cycleW = tmp_img_width;
      cycleElements.elements[i].cycleH = tmp_img_height;
      $(this).css({width: tmp_img_width, height: tmp_img_height});
    });
    cycleMain.height(img_height);
    cycle.css({width: img_width, height: img_height});
    cycle.data("cycle.opts.elements", cycleElements);
  });
});

[#26] worked for me. Thanks sargismarkosyan!

[#26] Where and how to add this script!

#3 Worked for me. thank you.

Issue summary:View changes

If we want to center the image, the code #3 sholud be modified as below.

.views_slideshow_cycle_main {
width: 100%;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
width: 100% !important;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
width: 100% !important;
}
.views_slideshow_cycle_main .field-content {
max-width: 100%;
width: 100%;
}
/* Center the image */
.views_slideshow_cycle_main .field-content img {
display:block;
margin:auto;   /*Center the image*/
max-width: 100%;
width: 100%;
border: 1px double #605D5A;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.views-slideshow-controls-bottom {
  text-align:center;
  width:90%;
  margin:auto;  /*Center the control bottom*/
}
.views-slideshow-controls-bottom .views-slideshow-pager-field-item {
  display: inline-block;
  margin: 0 10px;
  padding: 3px;
  background: #0B9727;
  width: 30px; /* The width of container block must 30px */
}
.views-slideshow-controls-bottom .views-slideshow-pager-field-item img {
  width: 30px; /* The width of container block must 30px */
  height:20px;
}
.views-slideshow-controls-bottom .views-slideshow-pager-field-item.active,
.views-slideshow-controls-bottom .views-slideshow-pager-field-item:hover {
  background: #D15D17;
}
 

The image styles should be resized to 1024px by 350px and scaled to 1024px by 350px. But the position of control bottom pager still maintain. I had tried using Omega 3 them, it worked for me.