Utilizing the Unslider plugin for the image carousel on this specific webpage.
Whenever I press the > (right arrow key), the entire page, likely the body element, shifts 25 pixels to the right.
Pressing the < (left arrow key) returns the page to its original position.
You can witness the issue in action here:
This is a segment of the html.erb file featured on the page:
<div class="imagecarousel has-dots">
<ul>
<li style='background-image: url("/assets/solar-18694222104b6ced788b349cd63f53cc.jpg")'>
<div class="caption">
<h1>Renewable Energy.</h1>
<p>The future is in our hands.</p>
</div>
</li>
<li style='background-image: url("/assets/wind-eaac506eb1ae1d11c572e1bec4b04ca2.jpg");'>
<div class="caption">
<h1>Renewable Energy.</h1>
<p>Energy is beautiful.</p>
</div>
</li>
...
</div>
The script call in my application.js to set up the Unslider plugin looks like this:
$('.imagecarousel').unslider({
fluid: true,
dots: true,
keys: true,
speed: 500
});
Do you have any suggestions? The issue only manifests in Firefox; Chrome and Safari do not experience the problem.
Edit: This glitch seems isolated to Firefox. Other browsers are unaffected.
If additional code samples could aid in resolving the matter, please advise. Thank you.