Slider only becomes visible after resizing window

Hi @maxshepley,

Can you share with us the live page URL where the slider is embedded?
I need to check the wrapper functionality whether it is Tab or Div only.

Maybe some JS tweak can help in this. Like we need to re-initiate the plugin while clicking on picture div.

Thanks

Thank you for your quick reply! The site is still on a local server at the moment, so I don’t yet have a live URL, but perhaps this screenshot of the HTMl will help?

You can see the shortcodes for URIS are wrapper in div tags.

Does that help at all?

View post on imgur.com

Can you contact me on my site regarding this issue?

Coz it’s required to add some code tweaks to re-initiate the slider.

Thanks

Thank you, I have just sent an email through!

Got it. Thanks

The Tweak code we applied to the slider layout.php file works with tabs:

<script type="text/javascript">
	jQuery(document).ready(function() {
		var uris = jQuery('#slider-pro-3-<?php echo $post_id; ?>').sliderPro({
			//width
			<?php if ($WRIS_L3_Width == "100%") { ?>
				width: "100%",
			<?php } else if ($WRIS_L3_Width == "custom") { ?>
				width: <?php if ($WRIS_L3_Slider_Width != "") echo esc_js($WRIS_L3_Slider_Width);
						else echo esc_js("1000"); ?>,
			<?php } else if ($WRIS_L3_Width == "fullWidth") { ?>
				forceSize: 'fullWidth',
			<?php } ?>

			//height
			<?php if ($WRIS_L3_Height == "custom") { ?>
				height: <?php if ($WRIS_L3_Slider_Height != "") echo esc_js($WRIS_L3_Slider_Height);
						else echo esc_js("500"); ?>,
			<?php } else { ?>
				autoHeight: true,
			<?php } ?>

			//auto play
			<?php if ($WRIS_L3_Auto_Slideshow == 1) { ?>
				autoplay: true,
				autoplayOnHover: 'none',
			<?php } ?>
			<?php if ($WRIS_L3_Auto_Slideshow == 2) { ?>
				autoplay: true,
				autoplayOnHover: 'pause',
			<?php } ?>
			<?php if ($WRIS_L3_Auto_Slideshow == 3) { ?>
				autoplay: false,
			<?php } ?>
			autoplayDelay: <?php if ($WRIS_L3_Transition_Speed != "") echo esc_js($WRIS_L3_Transition_Speed);
							else echo esc_js("5000"); ?>,

			arrows: <?php if ($WRIS_L3_Sliding_Arrow == 1) echo esc_js("true");
					else echo esc_js("false"); ?>,
			buttons: <?php if ($WRIS_L3_Navigation_Button == 1) echo esc_js("true");
						else echo esc_js("false"); ?>,
			smallSize: 500,
			mediumSize: 1000,
			largeSize: 3000,
			fade: <?php if ($WRIS_L3_Transition == 1) echo esc_js("true");
					else echo esc_js("false"); ?>,

			//thumbnail
			thumbnailArrows: true,
			thumbnailWidth: <?php if ($WRIS_L3_Thumbnail_Width != "") echo esc_js($WRIS_L3_Thumbnail_Width);
							else echo esc_js("120"); ?>,
			thumbnailHeight: <?php if ($WRIS_L3_Thumbnail_Height != "") echo esc_js($WRIS_L3_Thumbnail_Height);
								else echo esc_js("100"); ?>,
			<?php if ($WRIS_L3_Navigation_Position == "top") { ?>
				thumbnailsPosition: 'top',
			<?php } ?>
			<?php if ($WRIS_L3_Navigation_Position == "bottom") { ?>
				thumbnailsPosition: 'bottom',
			<?php } ?>
			<?php if ($WRIS_L3_Thumbnail_Style == "pointer") { ?>
				thumbnailPointer: true,
			<?php } ?>
			centerImage: true,
			imageScaleMode: '<?php echo $WRIS_L3_Slider_Scale_Mode; ?>',
			allowScaleUp: <?php if ($WRIS_L3_Slider_Auto_Scale == 1) echo esc_js("true");
							else echo esc_js("false"); ?>,
			<?php if ($WRIS_L3_Slide_Order == "shuffle") { ?>
				shuffle: true,
			<?php } ?>
			startSlide: 0,
			loop: true,
			slideDistance: <?php if ($WRIS_L3_Slide_Distance) echo esc_js($WRIS_L3_Slide_Distance);
							else echo esc_js("5"); ?>,
			autoplayDirection: 'normal',
			touchSwipe: true,
			fullScreen: <?php if ($WRIS_L3_Fullscreeen == 1) echo esc_js("true");
						else echo esc_js("false"); ?>,
		});
		// tweak to resize when tab clicked
		jQuery('#pizza-item').click(function() {
			uris.sliderPro('resize');
		});
	});
</script>

Thanks to @maxshepley for all cooperation to resolve this issue.