Change responsive height?

  • Resolved spaciousmind

    (@spaciousmind)


    5 years ago

    Hi, thanks for a great no-nonsense plugin. The slider plugins like Slider Revolution and SmartSlider are cool and you can make some really nice stuff with them, but the learning curve is more than I have time for right now and they are super-packed with features I don’t need to make simple sliders.

    There is a setting for min height in the slider settings which is great but I am having trouble figuring out where that is being set so I can change it for narrower screens. For example, the default 50% min height setting is good for desktop but would like to increase it for tablets and mobile.

    Is there an easy way to do this so it could be, for example, 50% height on desktop, 60% on tablet, and 70% on phones?

    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author simonpedge

    (@simonpedge)

    5 years ago

    Unfortunately no easy way.
    The container min-height is not set via predefined CSS code but is dynamically generated with JavaScript (jQuery) code when the page loads or whenever the window is resized. So if you have 75% min height set, this can change the actual pixels min-height calculated depending on the number of slides you are currently on screen, which in turn can change at different resolution.

    So here is the JavaScript code within the /plugins/slide-anything/php/slide-anything-frontend.php file:

    window.addEventListener('resize', sa_resize_slider_image_demo);
function sa_resize_slider_image_demo() {
	var min_height = 'aspect169';
	var win_width = jQuery(window).width();
	var slider_width = jQuery('#slider_image_demo').width();
	if (win_width < 480) {
		var slide_width = slider_width / 1;
	} else if (win_width < 768) {
		var slide_width = slider_width / 2;
	} else if (win_width < 980) {
		var slide_width = slider_width / 2;
	} else if (win_width < 1200) {
		var slide_width = slider_width / 3;
	} else if (win_width < 1500) {
		var slide_width = slider_width / 3;
	} else {
		var slide_width = slider_width / 4;
	}
	slide_width = Math.round(slide_width);
	var slide_height = '0';
	if (min_height == 'aspect43') {
		slide_height = (slide_width / 4) * 3;
		slide_height = Math.round(slide_height);
	} else if (min_height == 'aspect169') {
		slide_height = (slide_width / 16) * 9;
		slide_height = Math.round(slide_height);
	} else {
		slide_height = (slide_width / 100) * min_height;
		slide_height = Math.round(slide_height);
	}
	jQuery('#slider_image_demo .owl-item .sa_hover_container').css('min-height', slide_height+'px');
}
    Plugin Author simonpedge

    (@simonpedge)

    5 years ago

    A workaround I could suggest is to have 2 sliders, you hide one on desktop and hide the other on tablet/mobile.

    Plugin Author simonpedge

    (@simonpedge)

    4 years, 11 months ago

    I’m assuming my workaround suggestion helped you resolve this issue – am marking this thread as close.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Change responsive height?’ is closed to new replies.