Featured Post Slider Order Messed Up

I just started a website https://www.gameplayonstream.com and have been learning a lot. I have finally gotten stumped, The Featured Poste slide on the front page is working, but I cant figure out why the order is out of sink. I tried changing the slider.php on the ftp, but cant figure anything out. I would imagine it would have something to do with here.

<div class=”featured-nav”>

<div id=”movers-row” class=”group”>

<?php /* the $i variable is vital for making the slider work, do not remove */

$i = 1; while ($query->have_posts()) : $query->the_post(); ?>

<?php $thumb = get_the_post_thumbnail($post->ID, array(42,42), array(‘class’ => ‘nav-thumb ‘)); ?>

<div>” class=”cross-link active-thumb” title=”<?php the_title(); ?>”><img src=”<?php echo get_post_meta($post->ID, ‘featured’, true);?>” class =”nav-thumb” width=”125″ height=”75″ />
</div>

<?php $i++; endwhile; $i = 1; /* the $i variable is vital for making the slider work, do not remove */ ?>

</div><!– /movers-row –>

<?php wp_reset_query(); ?>

</div><!– .featured-nav–>

I usually take to the inspect element window to learn an idea how it works, I did manage to fix it in there, but as we all know that really means nothing, but it may help with whats going on. the script I changed was

<img src=”https://www.gameplayonstream.com/wp-content/uploads/2012/09/NFSpost.jpg&#8221; class=”nav-thumb” width=”125″ height=”75″>

there are 4 of these, one for each featured post. I could locate this script for each one, and change the number after “a href=#”. eg. instread of

<img src=”https://www.gameplayonstream.com/wp-content/uploads/2012/09/NFSpost.jpg&#8221; class=”nav-thumb” width=”125″ height=”75″>

to this

<img src=”https://www.gameplayonstream.com/wp-content/uploads/2012/09/NFSpost.jpg&#8221; class=”nav-thumb” width=”125″ height=”75″>

that would change the information to the right slider. I may just be rambling, but hopefully you can give some sort of direction. Thanks in advance.