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

Files: 

Comments

mrcorbtt’s picture

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.

nicoz’s picture

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

Kristen Pol’s picture

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.

scoflo’s picture

Helped me, thanks!

msti’s picture

This worked for me too.

sioux’s picture

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

BrendanP’s picture

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

Pere Orga’s picture

@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;
            }
        });
       
    });
});
nicoz’s picture

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

Pere Orga’s picture

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.

Pere Orga’s picture

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

Lukas von Blarer’s picture

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

danabel’s picture

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;
});
});
});
bodyblueprinter’s picture

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!

Kristen Pol’s picture

@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.

dadderley’s picture

@Kristen Pol
Thanks for the css

jorisx’s picture

Works nice !

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

markusa’s picture

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.

Katy J’s picture

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

Pol’s picture

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

Thanks you both :-)

broadway’s picture

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.

nicoz’s picture

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.

broadway’s picture

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.

maranjo’s picture

#3 worked perfectly for me - thanks @KristenPol!

Collins405’s picture

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?

sargismarkosyan’s picture

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);
  });
});
petrovichby’s picture

[#26] worked for me. Thanks sargismarkosyan!

kirtan’s picture

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

itsruthieomg’s picture

#3 Worked for me. thank you.

mohrizmus’s picture

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.

jorisx’s picture

hmm #13 would stop resizing after my slideshow changed images?! not sure why..
I've changed #8 in a minor... which works for me;

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

Edit:
This works perfect in combination with css of #3:

.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;
}
thushad’s picture

I tried this in so many ways. Views slide show is the best in category. But i think in terms of responsive design, BX Slider doing a pretty good job. You can add it manually to drupal and works very well.

i25’s picture

The code in #30 works great. The only issue I'm having is that when the browser window is shrunk (width), it squeezes the image horizontally, so it becomes dis-proportioned. What changes can be made to this CSS code to fix that one problem?

elkz’s picture

I'm working on a website with a (views) slideshow with multiple elements and the pager as filter (without transition delay, looks like it's not a slideshow). As default, each slide and the container take the size of the biggest slide.
This code below add the size of the active slide to the container when I resize my window or when I click on the pager/filter. (add some css transitions for effects)

// height calcul
function views_slide_resp_detailtech()
{
    if(element_check('.abris-details')) {
        var actif = $('.abris-details .views_slideshow_cycle_slide:visible .views-slideshow-cycle-main-frame-row-item');
        var h_actif = actif.height();
        $('#views_slideshow_cycle_teaser_section_abris_vue_d_tails-default').height(h_actif+'px');
    }
}

// click on pager
// delay of 100 (could depends of transition delay of your slideshow, I've not tested yet)
function views_slide_resp_detailtech_click()
{
    if(element_check('.abris-details')) {
        $('.abris-details #widget_pager_top_abris_vue_d_tails-default .views-slideshow-pager-field-item').click(function() {
            setTimeout(function(){views_slide_resp_detailtech();}, 100);
        });
    }
}

views_slide_resp_detailtech_click(); ==> DOCUMENT READY
views_slide_resp_detailtech(); ==> WINDOW LOAD & WINDOW RESIZE

CSS :

.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;}    
}

hope this help

CocoSkin’s picture

I tried all these but none of them working work the Frame Height. Am I missing something?

Internet’s picture

#3 worked for me, thanks.

cscott5288’s picture

I've tried all of these too - none of them worked. I'm supposing the people they worked for are using an older version of views slideshow.

I think this is just absurd that one of the most popular modules for slideshows on drupal doesn't have basic responsive support ... it's as simply as allowing an option to set the image with to 100% instead of a fixed pixel width.

maxplus’s picture

HI Thanks,

a combination of #3 for the width and #13 for the height works for me.
But in some cases after scaling down my window, I do need a page refresh to let the JS of #13 fix my height.

granularsound’s picture

I scooped up Kristen's, (Comment #3).
Worked out of the box.

Want to thank her for providing that.
I was porting my static site over and already did that legwork once of making it responsive!

FuXXz’s picture

No CSS will make this Slideshow responsive. You sill load the big images for mobile devices. This sites are ugly where i have to load a very big image on my phone which is only scale down with css.
One Solution is Flexslider with breakpoints and picture module until cycle 2 is implemented

timme77’s picture

#26 worked for me! Thanks

NIKS_Artreaktor’s picture

Here is another way to do image backstretch underground - without JS !!!

Download
https://www.drupal.org/project/image_url_formatter
(we can output image like href to image.)

In views image field display - change URL formatter and check "Full Url"

Change views field tpl of image like this

<div class="cssback" style="background-image: url('<?php print $output; ?>');"></div>

Add in css style add code

.cssback{
  background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

That all!

With background-position: ***; we can change align of background image.

You can use css in #3 for
.views_slideshow_cycle_main {}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {}
.views_slideshow_cycle_main .field-content {}

===========================
The example of main idea here
http://jsfiddle.net/gerritvanaaken/gFJs9/2/

NIKS_Artreaktor’s picture

There is SECOND way to make it with jquery.backstretch.js
http://srobbin.com/jquery-plugins/backstretch/

But there is problem with width. Script detect wrong width of slide.
I was trying to change width every time after "cycle slide" change, but didn't get result.

And only way I could beat it - make it slideshow cycled.

I added in views Content:NID field

then

In views image field tpl change output

$node_id_my = $row->nid;
<div class="mainslide<?php print $node_id_my; ?> top-slides-front">

</div>

<script>
(function ($) {

$(document).ready(function($) {
$(".mainslide<?php print $node_id_my; ?>").backstretch([
          "<?php print $output; ?>"
        , "<?php print $output; ?>"], {duration: 75, fade:0, centeredY: 0});

});
})(jQuery);
</script>

In that way I make backstretch slideshow cycled very fast, even you change window size.

Used css something like #3

If somebody can help to beat width of backstretched image after slide change- please write.
It could help to not use cycled backstretch slideshow... Only use simple backstretch effect.

jorisx’s picture

Anyone here know if the advanced settings help in creating a responsive views slideshow?
i've seen this article http://drupal.stackexchange.com/a/64608/18626 (which actually refers to here), but couldn't get it to work properly either ...

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

(you have to set these manually one by one)

globalpc’s picture

#3 worked also for me. Thanks for sharing your css!

scott@coverclubmedia.com’s picture

For horizontal, responsive and centered use this. It doesn't shrink your images, you could probably use adaptive images for that. But it tiles your pictures so they are responsive that way. Great for logo banners or small stuff.

#views_slideshow_cycle_main_product_line_card-block .views-row-even,
#views_slideshow_cycle_main_product_line_card-block .views-row-odd {
position: relative;

margin:auto;
display:inline-block;
text-align:center;
}
.views_slideshow_cycle_main {
text-align:center;
width: 100%;
display:inline-block;
}
.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;
border:1 white solid;
}

zhilevan’s picture

I had this problem,I try some of your solution but not worked :(, finally I use flexSlider, it is great :D

BeatnikDude’s picture

#3 worked for me

bienybarato’s picture

#3 and #13 worked for me. thank you for this great input!

nikitas’s picture

For dynamic responsive page resize solution #27 (https://www.drupal.org/node/1510526#comment-7865577) worked for me just fine.
thanx!

John Franklin’s picture

Version:7.x-3.0» 7.x-3.1
Status:Closed (duplicate)» Needs review
StatusFileSize
new2.08 KB

A combination of @Kristen Pol's CSS from #3 and @sargismarkosyan JS from #26 worked best. With only #3, Firefox wouldn't resize, but Chrome and Safari would; With only #26, other elements would not properly reflow around a resized slideshow, sometimes leaving large gaps with neighboring elements, sometimes slipping underneath a slideshow.

Patch combining #3 and #26 attached.

I'm reopening this because this issue has 48 more comments since it was closed as a duplicate (and the duplicate has 48 more comments since it was closed as "fixed", without a patch), it's clearly not fixed.

John Franklin’s picture

StatusFileSize
new2.1 KB

Ooops... bad patch file. Fixed one attached.

Please be sure to credit @Kristen Pol and @sargismarkosyan in the commit.