Tiny-slider: Flickering effect on load

[snnsnn]

All slides are visible from the point when page loads until the slider becomes active, which causes a flickering effect. Owl slider hides all slides until slider becomes active and shows only active slide then on. It is a css issue and I tried to come up with a solution in tiny-slider.scss but alas, couldn't figured out the right place to hide all slides and show active one only.

[deronjohnson]

One way you could solve this problem is by setting the opacity of your slider to 0 and then use tiny-slider's onInit function to add a css class to the slider that sets the opacity back to 1 once the slider is fully loaded.

[BrianBrainRocks]

@snnsnn After implementing fadeIn/fadeOut for my gallery I realized the conflict is between the opacity transition and .tns-gallery > .tns-item under ./src/tiny-slider.scss#L60
I fixed overriding the rule, like:

  /* Opacity causes animation conflict with Animate.css */
.tns-gallery > .tns-item {
  -webkit-transition: transform 0s;
  -moz-transition: transform 0s;
  transition: transform 0s;
}

[pySilver]

This is what I'm using:

// Prevent flickering during initialization
.your-slider-class {
  opacity: 0;

  &.tns-slider {
    opacity: 1;
  }
}