Slider disappears on mobile

  • I am attempting to optimize this site https://solutionsfortheworkplace.com/.
    Upon optimization the slider disappears or delays loading on desktop.
    On mobile it is hidden until the user interacts with the screen – clicking or scrolling then slider appears.
    I believe it to connected to the inline code generated 

    <script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#slider_2259').owlCarousel({
			items : 1,
			smartSpeed : 200,
			autoplay : true,
			autoplayTimeout : 5000,
			autoplayHoverPause : true,
			smartSpeed : 200,
			fluidSpeed : 200,
			autoplaySpeed : 200,
			navSpeed : 200,
			dotsSpeed : 200,
			loop : true,
			nav : true,
			navText : ['Previous','Next'],
			dots : true,
			responsiveRefreshRate : 200,
			slideBy : 1,
			mergeFit : true,
			autoHeight : false,
			mouseDrag : false,
			touchDrag : true
		});
		jQuery('#slider_2259').css('visibility', 'visible');
		sa_resize_slider_2259();
		window.addEventListener('resize', sa_resize_slider_2259);
		function sa_resize_slider_2259() {
			var min_height = '40';
			var win_width = jQuery(window).width();
			var slider_width = jQuery('#slider_2259').width();
			if (win_width < 480) {
				var slide_width = slider_width / 1;
			} else if (win_width < 768) {
				var slide_width = slider_width / 1;
			} else if (win_width < 980) {
				var slide_width = slider_width / 1;
			} else if (win_width < 1200) {
				var slide_width = slider_width / 1;
			} else if (win_width < 1500) {
				var slide_width = slider_width / 1;
			} else {
				var slide_width = slider_width / 1;
			}
			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_2259 .owl-item .sa_hover_container').css('min-height', slide_height+'px');
		}
		var owl_goto = jQuery('#slider_2259');
		jQuery('.slider_2259_goto1').click(function(event){
			owl_goto.trigger('to.owl.carousel', 0);
		});
		jQuery('.slider_2259_goto2').click(function(event){
			owl_goto.trigger('to.owl.carousel', 1);
		});
		jQuery('.slider_2259_goto3').click(function(event){
			owl_goto.trigger('to.owl.carousel', 2);
		});
		var resize_2259 = jQuery('.owl-carousel');
		resize_2259.on('initialized.owl.carousel', function(e) {
			if (typeof(Event) === 'function') {
				window.dispatchEvent(new Event('resize'));
			} else {
				var evt = window.document.createEvent('UIEvents');
				evt.initUIEvent('resize', true, false, window, 0);
				window.dispatchEvent(evt);
			}
		});
	});
</script>

    Since the slider needs to load normally I can either lose 10+ points on optimization or find another plugin.

    The page I need help with: [log in to see the link]

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

    (@simonpedge)

    Owl Carousel (the engine which Slide Anything uses) requires the jQuery library (bundled with WP) to have been loaded prior to Slider Initialisation.

    Some optimization plugins defer the loading of jQuery until later in the page in order to speed up ‘visible’ page load times – this will break SA and you will get a JavaScript error on the page ‘jQuery Not Available’ when the SA slider tries to initialise.

    Within your SA Settings, try ticking the ‘DOMContentLoaded event:‘ checkbox (under ‘Other Settings’).

    Thread Starter Ernie

    (@ernieh)

    mmm seems to me with all the emphasis on optimization and load times, plugin developers would spend a little more time on making sure their product didn’t break when a site is optimized.

    Thanks for the suggestion but it doesn’t seem to be helping

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Slider disappears on mobile’ is closed to new replies.