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');
Click to Copy