Disable FOUC on Oxygen Slider Element

The Oxygen slider element shows all slides once in a flash on page load then go correct styling. This is called FOUC (Flash Of Unstyled Content).

If you are facing the same issue, here is the solution. Just follow steps.

  1. Copy your slider element ID in somewhere like notepad and add an extra class to the slider like “ar-hide”
  2. Set the Display Property to none for this, via Advanced Layout.
  3. Now create a code-block in your page or template, go to PHP/HTML section and comment the middle line by putting // (two obliques/slashes) before the text.
  4. Go to JS section and put the code : (Replace the #slider-2-22 to the ID of the slider you copied in step 1.
  5. The problem is solved.
jQuery('#slider-2-22').removeClass('ar-hide');

// newsletter

Three tested WordPress snippets a week

Blocks, security, performance, Tailwind, PHP and React. Copy, paste, ship. You’ll also get DPlugins product updates. No spam, and you can unsubscribe anytime.

// newsletter

Three tested WordPress snippets a week

Blocks, security, performance, Tailwind, PHP and React. Copy, paste, ship. You'll also get DPlugins product updates. No spam, and you can unsubscribe anytime.

Click to Copy