Прикрепил к шаблону слайдер, в коде слайды скрыты, и появляются тогда, когда к ним приписывается класс
showing-reviewsCSS#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;
}
JSvar 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 = '►'; // play character
playing = false;
clearInterval(reviewInterval);
}
function playReviewshow(){
pauseButton.innerHTML = '❚❚'; // 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();
};
Кусок 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>
При такой интеграции WP phh кода в html получается что все посты (слайдеры) получают в начале класс
showing-reviews и становятся видимыми, налипают друг на друга.
Потом при смене слайда все становится нормально.
Вопрос: Как сделать так чтобы в WP шаблоне класс
showing-reviews присваивался в начале только к одному посту, а не ко всем?