Slider element skipping slides on mobile

[jasoncoburn]

Hi there, I have a slider element in the header section of my site. It contains 4 slides that all display normally on desktop. However in mobile view it only displays the last two slides. I tired adding a fifth slide to test and it still only played the last two (slides 4 and 5 in that instance).

[tristup]

Hi @jasoncoburn,

Thanks for reaching out.
I have checked the URL but unfortunately didn’t find the slider on that page and, the issue you described. Can you please check and share the exact URL where you are having the problem?

Thanks

[jasoncoburn]

Hi, thanks for your reply. Sorry, think there was some caching issue there, can you try again? The banner image at the top with the ’ Your Operating System For Digital Assets’ text over it is the slider.

[tristup]

Hi @jasoncoburn,

Now it is showing. I have checked it on the smaller screen and also on my Android mobile, and it shows all four slides as expected. I would suggest you check once by clearing all types of cache including the System Cache from Cornerstone > Settings > System > Clear System Cache and check in the incognito/private mode of the browser.

If that does not help, please provide any video that helps us to recognize the problem.

Thanks

[jasoncoburn]

I tired clearing the cache but the issue remains unfortunately. I’ll link to a video below. When testing on desktop, it only occurs if you load the page with the window already at a small width — if you shrink an already large window it’ll work as normal.

I’m testing the mobile view on iphone also and get this issue across all mobile browsers even in private windows.

I’ve included screenshots of the code also ,one from a mobile size window and one from a desktop size window. The mobile one shows the slide total as only 2.

[ruenel]

Hello @jasoncoburn,

On mobile devices, the Slides were on top of each other.

The issue could be in your Slider settings. We would love to investigate the issue further. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[jasoncoburn]

Thanks, details below

[ruenel]

Hello Jason,

I have inspected your page thoroughly and I found out that you added this custom JS code:

/* JS code for colour changing background

jQuery(document).ready(function($){
$(window).scroll(function() {
  
  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');
  
  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 5);
 
  $panel.each(function () {
    var $this = $(this);
    
    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
       
      // Add class of currently active div
      $body.addClass('color-' + $(this).data('color'));
    }
  });    
  
}).scroll();});


/*

Please remove this code because it is causing the issue.

Be advised that custom JS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[jasoncoburn]

Thanks for looking into this. I’ve removed that code, but the issue still seems to occur?

[marc_a]

Hey @jasoncoburn,

After removing the JS code, please make sure that your clear all your cache associated with your website because it might still using the code.

• https://theme.co/docs/common-issues#disabling-cache
• https://theme.co/docs/common-issues#disabling-cdn

Hope that helps.

[jasoncoburn]

Thanks for the reply. I’ve disabled/purged all caching and cdn services but I’m still encountering this issue.

[christian]

Hey @jasoncoburn,

It has something to do with your Page CSS. I removed all the Page CSS and the issue is fixed. I pasted it back when I logged out.

Before reporting an issue to us, kindly remove all custom codes in your site. It’s one of the Common Issues. Please perform all the troubleshooting steps before reporting an issue.

[jasoncoburn]

Ah, ok, that fixed it. Very dumb of me, thanks so much for your help!

[marc_a]

Hey @jasoncoburn,

You’re most welcome!