WordPress. How to fix slider bug?

Question

css

I attached a slider to the template, the slides are hidden in the code, and appear when the class showing-reviews is assigned to them

css

#slides-reviews{
    position: relative;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}
.slide-reviews{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing-reviews{
    opacity: 1;
    z-index: 2;
}

.controls-reviews{
    display: none;
}

.slide-reviews{
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background: #fff;
    color: #000;
  
  background-size: cover;
}


.controls-reviews{
  background: #333;
  color: #fff;
  border: none;
  padding: 20px 0px;
  font-size: 20px;
  cursor: pointer;
  border: 0px solid #000;
  margin: 10px 0px 0px 10px;
  width: 70px;
}

.controls-reviews:hover,
.controls-reviews:focus,
.controls-reviews:active
{
  background: #eee;
  color: #333;
    border: 0px solid #fff;
}

.container-reviews{
  position: relative;
}

.buttons-reviews{
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  font-size: 0px;
}

#pause-reviews{
    border: 0px solid #fff;
    width:0;
    height: 0;
}

JS

var controls = document.querySelectorAll('.controls-reviews');
for(var i=0; i<controls.length; i++){
    controls[i].style.display = 'inline-block';
}

var reviews = document.querySelectorAll('#slides-reviews .slide-reviews');
var currentReviews = 0;
var reviewInterval = setInterval(nextReview,10000);

function nextReview(){
    goToReview(currentReviews+1);
}

function previousReview(){
    goToReview(currentReviews-1);
}

function goToReview(n){
    reviews[currentReviews].className = 'slide-reviews';
    currentReviews = (n+reviews.length)%reviews.length;
    reviews[currentReviews].className = 'slide-reviews showing-reviews';
}


var playing = true;
var pauseButton = document.getElementById('pause-reviews');

function pauseReviewshow(){
    pauseButton.innerHTML = '&#9658;'; // play character
    playing = false;
    clearInterval(reviewInterval);
}

function playReviewshow(){
    pauseButton.innerHTML = '&#10074;&#10074;'; // pause character
    playing = true;
    reviewInterval = setInterval(nextReview,10000);
}

pauseButton.onclick = function(){
    if(playing){ pauseReviewshow(); }
    else{ playReviewshow(); }
};

var next = document.getElementById('next-reviews');
var previous = document.getElementById('previous-reviews');

next.onclick = function(){
    nextReview();
};
previous.onclick = function(){
    previousReview();
};

Piece of HTML

<div class="container-reviews">
                            <ul id="slides-reviews">
                                
                                <?php query_posts('cat=5&showposts=10'); ?>
                                <?php if (have_posts()) : while (have_posts()) : the_post();?>
                                
                                <li class="slide-reviews showing-reviews">
                                    <img src="<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); echo $image_url[0]; ?>">
                                    <h4><?php the_title(); ?></h4>
                                    <?php the_content(); ?>
                                </li>
                                
                                <?php endwhile; else: ?>
                                <?php endif; ?>
                                <?php>wp_reset_query();?>
                                
                            </ul>
                            <div class="buttons-reviews">
                            <a class="controls-reviews animArrPrevL animArrowsRevL" id="previous-reviews"></a>

                            <a class="controls-reviews" id="pause-reviews"></a>

                            <a class="controls-reviews animArrPrevR animArrowsRevR" id="next-reviews"></a>
                            </div>

With this integration of WP phh code into html, it turns out that all posts (sliders) receive the showing-reviews class at the beginning and become visible, stick to each other.

Screen

Then when you change the slide, everything becomes normal.
Question: How to make it so that in the WP template the class showing-reviews is assigned at the beginning to only one post, and not to all?

Answer 1

Add conditions, but I really don't know how it will work with the slider and js, will the switch be considered the first one

<?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
код для первого поста
<?php else : ?>
код для остальных постов
<?php endif; ?>

Answer 2

It was:

<?php if (have_posts()) : while (have_posts()) : the_post();?>
                                
                                <li class="slide-reviews showing-reviews">
                                    <img src="<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); echo $image_url[0]; ?>">
                                    <h4><?php the_title(); ?></h4>
                                    <?php the_content(); ?>
                                </li>
                                
                                <?php endwhile; else: ?>
                                <?php endif; ?>

It became:

<?php var i=0;?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>
                                <li class="slide-reviews <?php (i==0)?'showing-reviews':'';?>">
                                    <img src="<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); echo $image_url[0]; ?>">
                                    <h4><?php the_title(); ?></h4>
                                    <?php the_content(); ?>
                                </li>
                                <?php i++; ?>
                                
                                <?php endwhile; else: ?>
                                <?php endif; ?>

The principle is this.