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

Support from Acquia helps fund testing for Drupal Acquia logo

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.

pixelsweatshop’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;
            }
        });
        
    });
});
pixelsweatshop’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 :-)

Anonymous’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.

pixelsweatshop’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.

Anonymous’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.

nattyweb’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-1’s picture

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

ruthiehallarsis’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

HAKLO’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)

naczus’s picture

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

scott.browne’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;
}

yuseferi’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
FileSize
2.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

FileSize
2.1 KB

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

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

naomisl’s picture

I'm trying to get a views slideshow to span the page at 100% width.

I applied the patch (thank you for working on it!), but ran into this error:

patch unexpectedly ends in middle of line
patch: **** malformed patch at line 67:

Line 67 is almost at the end, so I thought perhaps it would still have applied what I needed, but it doesn't seem to have changed anything.

I've also tried messing with the css as people have described above (#3, etc). This changes the width on the image at the node level, but not in the slideshow block, which is ultimately the goal.

Another thing I've tried is the "width" option under advanced jquery options (a tactic suggested on the other thread discussing this issue), and it seems to set a pixel width for the frame, but does not do percentages or change the image size at all, even with "fit" set to true.

Still working on finding something that does work...any help would be much appreciated.

mcriecken’s picture

#31 worked great for me (CSS + JS). I added "height: inherit !important" to the .views-slideshow-cycle-main-frame-row so that it would stay the same size as the frame. Not sure this matters all that much (slideshow was rendering properly w/out it), just something I noticed.

.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
  width: 100% !important;
  height: inherit !important;
}
mandymeng’s picture

Hello everyone,

I am working on a video slideshow. The problem I have with the css and js above is that the video screen is but in half horizontally.
Have any one done the video slideshow? And how did you make the iframe window a full screen and be responsive?

Thank you all very much!

Solved -
I used the #3's css basically but made changes on the last two elelements (the css for the two elements are from css-tricks)

.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 .views-slideshow-cycle-main-frame-item {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .embedded-video {
  width: 100% !important;
  height: auto;
}
.views_slideshow_cycle_main .player {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.views_slideshow_cycle_main .player iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

And #13's javascript worked for me:

(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;
		});
	});
});

Hope it will help someone.

sjpagan’s picture

Hello everyone,

@John Franklin I applied your patch, but the console I get the following error : TypeError: cycleElements is undefined, it reference at this :
cycleElements.elements[i].cycleW = tmp_img_width;
i'm using the next cod to show value

cycleElements = cycle.data("cycle.opts");
console.log(cycleElements);

and the result is undefinied.
I also used hook_js_alter for change order of js

function hook_js_alter(&$javascript) {
	if(isset($javascript['sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js']) && ($javascript['sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js'] != '')) {
		$javascript['sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js']['group'] = -100;
		$javascript['sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js']['weight'] = -100;
	}
}

do you have any idea?

francescosciamanna’s picture

No patches needed, the module Adaptive image is enough to solve this issue.

TrevorBradley’s picture

I dunno if anyone is having a similar issue on Drupal 8, but here's the code I went with that seems to get everything just right. Feel free to adapt it as requried:

LESS:

		.views_slideshow_cycle_teaser_section {
			width: 100% !important;
		}
		.views_slideshow_cycle_slide {
				width: 100% !important;
		}
		.views-field-field-photos {
			img {
				width: 100% !important;
			}
		}

JS:

(function ($) {	
	$( window ).resize( function(){ 
		var div_width = $('.views_slideshow_cycle_teaser_section').width();
		$('.views_slideshow_cycle_teaser_section').height(div_width);
	});
})(jQuery);
Estefan’s picture

I was experiencing this problem in Drupal 8 - and could solve it partly with #58. Thanks!

The width of the slideshow now adapts neatly, still I'm having issues with the height of the slider: The height of the div only rezises correctly on reloading the page. The js works insofar as it assures that there is enough space between the box I placed the slider in and the next divs.

Estefan’s picture

#59 worked fine with me and Drupal 8. Thanks!

The height of the div does however only resize only on refreshing the page - not automatically. Would be great if someone could come up with a solution.

Estefan’s picture

Here is what seems to work for my Drupal 8 website. The code readjusts the height - without reloating. The padding-top element is important. The value 55% seems to work by coincidence. I am far from being professional and worked things out more or less by trial and error. Would be great if someone could confirm this.

.views_slideshow_cycle_teaser_section {
width: 100% !important;
height: 100% !important;
padding-top: 55%;
border: 9px solid white;
}

.views_slideshow_cycle_slide {
width: 100% !important;
height: auto !important;
}

.views-field-field-photos img {
width: 100% !important;
}

KrypticBit’s picture

HELP!
I've got the same problem the views slideshow won't stay within the "secondary" sidebar (it goes off to the right WAY to much) I've tried some of the code on here and a few of my own but it doesn't seem to want to work....
What am I doing wrong? How to i Adjust the width so it stays in the Sidebar?
FYI I'm using Drupal 8

xaxan’s picture

Need to change #58 solution
Update javascript with this new code and will fix height issue.

(function ($) {	
	$( window ).resize( function(){ 
		var div_height = $('.views_slideshow_cycle_slide').height();
		$('.views_slideshow_cycle_teaser_section').height(div_height);
	});
})(jQuery);
Bebop-n-Rocksteady’s picture

#52 Drupal 7: Makes the slideshow responsive, but the images will not cycle nor when you click next or previous.

ludovic.agathe’s picture

This worked for me:

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

section#block-views-promotional-banner-block.block.block-views {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 1px;
  padding-bottom: 9%;
}

Originally from this YouTube video

It's also the same way you make YouTube iframes responsive. Note that the padding-bottom: 9% is actually the ratio of the height to the width of images. Mine happened to be 9%, but you should change this.

drupalfriend123’s picture

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

I used this code. Did not fix the issue.

drupalfriend123’s picture

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

I used this code. Did not fix the issue.

chrisss’s picture

#63 worked perfectly for me in D8. Thanks!

renenee’s picture

CSS from #58 and JS from #63 worked famously in D8. Thank you!

NickDickinsonWilde’s picture

Status: Needs review » Fixed

7.x-3.5 is a lot better than earlier but still missing one line of css to be mostly functional. Adding that. However due to lack of automated tests I'm no doing those JS changes at this time.
7.x-3.6 will be released tonight is much better. There are some aspects of the jQuery.Cycle library that are not mobile friendly and those won't be changed in 7.x-3.x (probably) There is a sandbox module that may work, but I haven't tested it. 7.x-4.x if it ever happens would have that change as a primary to do.

NickDickinsonWilde’s picture

NickDickinsonWilde’s picture

  • NickWilde committed cd900f2 on 7.x-3.x
    Issue #1510526 by John Franklin, NickWilde: views Slideshow for...
drupalfriend123’s picture

Thank you.

-D -

Frogtown’s picture

Maybe it is the constraints I have in other CSS I've added, but if it's simply max-width: 100%; without the height: auto; I am getting images that only change their width.

Also, why is display: none; being applied to all of the controls? I suppose that can be overridden in local css, but it seems that it now ignores the configuration settings for Slideshow in the view, as far as which widgets are displayed.

TrevorBradley’s picture

Just hit this again on another new site. I agree my original JS was flawed. CSS from #58 and JS from #63 appears to be the correct, final answer. Let's consolidate this all in once place:

CSS:

		.views_slideshow_cycle_teaser_section {
			width: 100% !important;
		}
		.views_slideshow_cycle_slide {
				width: 100% !important;
		}
		.views-field-field-photos {
			img {
				width: 100% !important;
			}
		}

JS:

(function ($) {	
	$( window ).resize( function(){ 
		var div_height = $('.views_slideshow_cycle_slide').height();
		$('.views_slideshow_cycle_teaser_section').height(div_height);
	});
})(jQuery);

What's the best way to get this fixed for views_sideshow 8.x? Is it time to start another issue thread?

TrevorBradley’s picture

Ack, never say "final answer".

I found a flaw in my stylesheet. It appears that views-slideshow can glitch out when you take a window and start dragging it back and forth. The Slideshow JS appears to get confused about the slide height and put in false information. You need to really wail on it, dragging it back and forth to cause the problem.

I believe this SASS/LESS is superior to my original #58. It appears to make the problem go away:

.views_slideshow_cycle_teaser_section {
  width: 100% !important;
}

.views_slideshow_cycle_slide {
  width: 100% !important;
  height: auto !important;
}

.views-field-field-photos {
  img {
    width: 100% !important;
  }
}

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

JimBehr’s picture

I encountered a situation where the height of the items in the slideshow varied in height so I needed a way to obtain the maximum from the tallest of them. I also had two different slideshows on the main page. Here's the JS that worked for me (using ideas from here):

(function ($) {	
    var maxHeight = function(elems){
    return Math.max.apply(null, elems.map(function () {
        return $(this).height();
    }).get());
}
	$( window ).resize( function(){ 
        /* Slideshow 1 */
		var max_height = maxHeight($('view-testimonials .views_slideshow_cycle_slide')); 
        $('view-testimonials .views_slideshow_cycle_teaser_section').height(max_height);
        /* Slideshow 2 */
		max_height = maxHeight($('view-front-page-slideshow .views_slideshow_cycle_slide')); 
        $('view-front-page-slideshow .views_slideshow_cycle_teaser_section').height(max_height);
	});    
})(jQuery);
bcobin’s picture

Thank you so much for this - #76 with #77 is working like a charm! (#79 wasn't needed in that I'm resizing the slides first.)

I generally use Flexslider, but just discovered that you can't implement it more than once; if you create a second Flexslider, the first one breaks.

(I found this out the hard way. This is for a multisite where each site needed its own slideshow.)

Anyway, this is much more configurable, so with the mods, it's a much better solution overall, IMO.

Update: I had originally added the js in the theme .info file - but in that case, the js affects all uses of slideshow on the page. Better to create a new view and inject the js into the specific view using the "For Drupal 7" method described here:

https://www.drupal.org/forum/support/post-installation/2010-10-27/add-ja...

Thanks again!

maxplus’s picture

Hi thanks,

for me in the D8 version the pager was only in correct position after a page reload.

Now I have added some js like described above and my pager is now always on the correct position, even after window resize

! function($) {
  $( window ).resize( function(){
    var div_height = $('.views_slideshow_cycle_slide').height();
    $('.views_slideshow_cycle_teaser_section').height(div_height);
  });
}(jQuery);
auxiliaryjoel’s picture

I think there is way too many issues with this module for correctly dealing with responsive content,
certainly there are some workarounds that "fix"(to 90% staisfaction) what you're trying to achieve but I found it never works 100% without various tweaks to views and css and twigs. All through trial and error rather than guided documentation.
If more precise documentation can't be provided without having to scrawl through comment threads of issues then I think this module is unusable in the current responsive web age we're in.

rwilson0429’s picture

While I was able to get to an acceptable responsive results in D7 using this module, I've not been able to find an acceptable solution in D8. Ironically, 7 years later...#22 is still right on target. As a number of these post suggest, Flexslider takes all the headaches out of getting a responsive slideshow. Install it, enable it, whip up a View with a Flexslider display, done. No additional custom css or js needed to have a responsive slideshow. In this era of responsive design requirements, the Views Slideshow module better days may be a thing of the past without some needed attention.

shoebob’s picture

How do I get the JS to work when using "behaviours" and "context"?

#81 worked - I used this code outside of the jquery behaviour container

aiphes’s picture

JS patch need to be updated for D9 because classes have changed. Here a starting point, but I don't find the right classes to avoid the automatic size given to:

views_slideshow_cycle_teaser_section position: relative;
    width: 1600px;
    height: 487px;

Architecture look like:
views_slideshow_cycle_main >> views_slideshow_cycle_teaser_section >> views_slideshow_cycle_slide

     $(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_teaser_section');
                       cycleElements = cycle.data("cycle.opts");
                       cycle.css(clearCSS);
                       cycleMain.find('.views_slideshow_cycle_slide').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);
                   });
               });// Fin de $(window).resize(function)

Thanks for help