I had a similar problem of Last slider image being displayed as gray block. This happens only for certain resolutions of a screen. Here is how I resolved it.
The theme uses “unslider.js” script for the slider and there is a bug how it calculates the width of a parent elements and its children (image holder divs) that contain images. The MATH rounding function it uses, creates these image container div widths that add up to just 1 pixel larger that the total width of a slider (100% * number of slides) set initially and hence last image does not fit and displays who knows where. That’s the reason it creates problem only for certain resolutions. (calculation rounds up for only certain values.)
Here is what I did:
1. Created a “js” folder under child theme directory and replicated the unslider.js file from parent theme (file hierarchy needs to be maintained in child theme too.)
2. Change the line of code below in unslider.js (approx. line 62 ) to adjust width of an element to fit into parent.
el.css({width: _.max[0], height: li.first().outerHeight(), overflow: 'hidden'});
TO
el.css({width: _.max[0]-1, height: li.first().outerHeight(), overflow: 'hidden'});
3. This slider image display problem persists every time you refresh the page without just closing it. Here is the fix. Change the below line of code in a same file above. Somewhere at line 121.
li.css({ width: width + 'px' });
TO
li.css({ width: (width-1) + 'px' });
that’s it. you fixed the slider.
4. Now we want our theme to point to unslider.js file from child theme. You can do this by adding something like below code to the function.php file of your child theme.
function unslider_script_fix()
{
//use same handle as parent theme to override the js.
wp_enqueue_script( 'unslider', dirname( get_bloginfo('stylesheet_url') ) . '/js/unslider.js', array( 'jquery' ),'', true);
}
add_action( 'wp_enqueue_scripts', 'unslider_script_fix' );
5. ensure using the same handle as parent theme to override the js. So once you hook child themes unslider.js to it, the parent theme does not initialize the same handle again and the theme ends up using your file.
Now regardless of which browser you open the website in and use no matter what resolution, it should display the last image of a slider.
