Jquery Cycle – onmouseover problem with worpress loop

Using the Custom Fields in wordpress 3, I have made an adptation of a Jquery plugin (the cycle plugin : Cycle plugin).

It works, but, there is a problem : Every images on the page are moving at the same time on rollover.
I have tried to change $(‘.suivant’) by $(‘#suivant’) or to get a dynamic id with the wordpress property : <?php $postid = get_the_ID(); ?>
but it doesn’t work, there is 2 cases : Or there is only the first image that move, or all of the thumbnails are moving at the same time.

Here is the header :

<!-- include jQuery library -->
<script type="text/javascript" src="https://primitive-animation.com/site/images/js/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="https://primitive-animation.com/site/images/js/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="https://primitive-animation.com/site/images/js/jquery.easing.1.3.js"></script>

<style type="text/css">
.slideshow { height: 130px; width: 314px; background: url('https://primitive-animation.com/site/images/thumb2.png') }
</style>
<script type="text/javascript">

$(document).ready(function() {

$('.slideshow').cycle( {
    fx: 'scrollLeft',
    easing: 'easeOutExpo',
    speed:    400,
    timeout:  1500
});

$('.slideshow').cycle('pause'); 

$('.suivant').mouseover(function() {
    $('.slideshow').cycle('resume', true);
});
$('.suivant').mouseout(function() {
    $('.slideshow').cycle('pause');
});
});
</script>

and the index :

<!-- Génération de la miniature pour chaque article début -->
<?php $image2 = get_post_meta($post->ID, 'miniature2', true); ?>
<?php $image3 = get_post_meta($post->ID, 'miniature3', true); ?>
<?php $image4 = get_post_meta($post->ID, 'miniature4', true); ?>

<a href="<?php the_permalink() ?>" onclick="<?php the_permalink() ?>">
<div class="suivant" style="height:130px; width:314px; position:absolute; z-index:89; background:transparent;  filter:alpha(opacity=10);-moz-opacity:.10;opacity:.10; cursor:pointer" ></div>

<div class="slideshow" >
<img src="<?php echo p75GetThumbnail($post->ID, null, null); ?>" width="314" height="130" />
<img src="<?php echo $image2; ?>" width="314" height="130"/>
<img src="<?php echo $image3; ?>" width="314" height="130"/>
<img src="<?php echo $image4; ?>" width="314" height="130"/>
</div>
</a>
<!-- Génération de la miniature pour chaque article fin -->

Here you can view the website :
https://primitive-animation.com/site/films/
Thank you in advance.