Hi! The slider needs time to load, and until then it won’t show up, but you could go to the Edit Slider -> under Slider Settings -> under Slides, and turn on the Image Load: Lazy Loading. With this option you could make your slider to load only one slide, so it would be much faster, if you are using more. You can read about it in here: https://www.nextendweb.com/wiki/smart-slider-documentation/slider-settings/#image_load
As an alternative solution, you could put a css animation behind the slider, for example with this html code, where the shortcode is:
<div style=”position:relative;”>
[smartslider2 slider=”565″]
<div id=”sliderloader” style=”position:absolute;top:50%;left:50%;right:0;bottom:0;margin-top:-15px;margin-left:-15px;z-index:-1;”>
<div class=”spinner”></div>
</div>
</div>
And this css code:
<style>
.spinner {
width: 30px;
height: 30px;
background-color: #333;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
And make it hide it with javascript:
<script>
jQuery(window).load(function() {
jQuery(‘#sliderloader’).hide();
});
</script>
You can put the css code into your theme’s style.css file, the javascript code into the slider’s Edit Slider -> HTML Widget.
