JQuery Slideshow Issue

Hello!

I’m having a little bug with some jquery slideshow code I’ve been using.
I’ve set it up to pull images from a given category and then fade them in and out within the slide show. All is working, however the first time you go to the page, it takes a long time to get started. I’ve noticed that it takes longer to get started with each additional image I put in the mix. But once started, it works fine.

I’ve used this code on two sites so far, and same problem with both:
https://cosantoir.com/blog/
https://www.maxbrokerage.com/new/

I’m using the everytime timers plugin. Here’s the Slideshow Code I developed:

<script type=”text/javascript” src=”https://jquery.offput.ca/js/jquery.timers.js”></script&gt;

<style> #slideShowContainer {
position:relative;
width:940px;
height:300px;
top:-50px;
left:0px;
}
</style>

<div id=”slideShowContainer”><! start slideShowContainer –>

<?php $thisArticle=0; ?>
<?php $featured = query_posts( array ( ‘category_name’ => ‘Feature in SlideShow’, ‘posts_per_page’ => -1 ) );?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<! Start this Slide –>
<div id=”thisSlide-<?php echo $thisArticle;?>” style=”left: 0px; position: absolute; top: 0px; “>

<img src=”<?php echo catch_that_image(); ?>” border=0 />

<div align=”right”>
<p style=”font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#FFF;margin:-20px 80px 0 0;”>
<?php the_title();?></p>
</div>
</div> <! end this Slide –>

<?php $thisArticle+=1; echo $thisArticle;?>

<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

</div> <!- end slideShowContainer->

<script type=”text/javascript”>
var lastSlide=0;
var currentSlide=0;
var whichFeature=1;
var maxFeatures=<?php echo $thisArticle ?>;

$(document).ready(function () {

$(document).everyTime(4000, function() {
//alert(“timer”);
$(document).nextSlide({whichItem:whichFeature});
whichFeature+=1;
if (whichFeature > maxFeatures-1) {whichFeature =0; }
});

jQuery.fn.nextSlide = function() {
var args = arguments[0] || {}; // It’s your object of argument
var whichItem = args.whichItem;

currentSlide=whichItem;

$(“#thisSlide-“+currentSlide).animate({opacity: 1});
$(“#thisSlide-“+lastSlide).animate({opacity: 0});

lastSlide=currentSlide;

}; // end function sectionSelected()

});
</script>

Thanks for any help.
rich