All images appear during page load – then it looks fine

So Hi

Great plugin!

I am having one issue though. As I said in my title I am testing with 3 jpgs
and when I hit refresh on the page, all 3 show – for a moment then it reduces to 1 and works fine..

How can I stop this problem on load?

I can’t put the site public, as I am working with it hidden online.
I am including the code I have added to see if you can see if it is something I did. If you really need to see it in action – can I contact you to set you up with a private access code?

this is what I have in my custom css

.slidesjs-pagination {
    float: right;
    list-style: none outside none;
    margin: -60px 20px 0 !important;
    position: relative !important;
}
#slides .slidesjs-navigation {
    left: 10px !important;
    position: relative !important;
    top: -65px !important;
}
.slidesjs-container {
    height: 90px !important;
  	overflow:hidden;
}
.headerslider{
	overflow:hidden;
	float:left; width:900px;
	position:relative;
	z-index:0; }

#slides  a img{width:96%; height:auto; border:none;}
    #slides .slidesjs-navigation {
      margin-top:0px;
   border:none;
    }
.headerslider-desktop {  display: block;
    float: right;
  width:900px;
   padding-right: 20px;
    margin-top: 0px;
	overflow:hidden;}
.headerslider-tablet,
.headerslider-mobile { display: none; }

@media only screen and (min-width: 720px) and (max-width: 800px) {
.headerslider-tablet { display: none; }
.headerslider-desktop,
.headerslider-mobile { display: none; }
}

As you can see I even tried overflow hidden but no luck.

and here is the code in my header

<?php if ( ot_get_option('header-image') == '' ): ?>
<div span style="float: right; margin-right: 0px;" class="headerslider"> <?php echo do_shortcode('[sp_responsiveslider limit="-1"]'); ?></div>

Is there anything you can see here.
I am so close to having it work perfect!

Thanks!

https://wordpress.org/plugins/responsive-header-image-slider/