Добрый день. Столкнулся с такой проблемой:
Делаю слайдер на jquery, в данном слайдере присутствует скрытый блок, который появляется при наведении мыши. Так вот при клике на кнопку вправо больше 7 раз данный блок перестает всплывать, влево же достаточно сделать один клик, чтобы появилась подобная проблема. Подскажите, пожалуйста, каким образом решить мою задачу? Предполагаю ,что не правильно осуществил смену контента по клику, но не знаю как исправить.
Вид слайдера:
Клик по кнопкам вправо-влево:
$('.carousel-button-right2').click(function(){
for(var i = 1; i <= 7; i++){
if(i%2 == 0){
$('.carousel-items2 > div').eq(i).removeClass('carousel-block2').addClass('carousel-block3');
}else{
$('.carousel-items2 > div').eq(i).removeClass('carousel-block3').addClass('carousel-block2');
}
}
})
$('.carousel-button-left2').click(function(){
var mass=[1,0,7,6,5,4,3];
for(var i = 0; i <= mass.length; i++){
if(mass[i]%2 == 0){
$('.carousel-items2 > div').eq(mass[i]).removeClass('carousel-block2').addClass('carousel-block3');
}else{
$('.carousel-items2 > div').eq(mass[i]).removeClass('carousel-block3').addClass('carousel-block2');
}
}
})
Эффект при наведении:
$('.carousel-block2-inside').hover(function(){
$('.carousel-block2-inside > a > div > span').css({"display": "block"}).slideDown(500);
},
function(){
$('.carousel-block2-inside > a > div > span').slideUp(500);
})
HTML:
<div class="carousel2">
<div class="carousel-wrapper2">
<div class="carousel-items2">
<div class="carousel-block2">
<div class="carousel-block2-inside">
<a href=""><img src="images/1.jpg" alt="" />
<div>
<h3>Команда "Никельщик" вновь порадовала уфалейских болельщиков</h3>
<span>Команда "Никельщик" вновь порадовала уфалейских болельщиков Команда "Никельщик" вновь</span>
</div>
</a>
</div>
</div>
<div class="carousel-block3">
<div class="carousel-block2-inside">
<a href=""><img src="images/2.jpg" alt="" />
<div>
<h3>Супруги Хасановы отметили 50-летие совместной жизни</h3>
<span>Супруги Хасановы отметили 50-летие совместной жизни Супруги Хасановы отметили 50-летие совместной жизни</span>
</div>
</a>
</div>
</div>
<div class="carousel-block2">
<div class="carousel-block2-inside">
<a href=""><img src="images/3.jpg" alt="" />
<div>
<h3>Благотворительный концерт "Мы помним! Мы гордимся!"</h3>
<span>Благотворительный концерт "Мы помним! Мы гордимся!" Благотворительный концерт "Мы помним! Мы гордимся!"</span>
</div>
</a>
</div>
</div>
<div class="carousel-block2">
<div class="carousel-block2-inside">
<a href=""><img src="images/4.jpg" alt="" />
<div>
<h3>«Ветер перемен»</h3>
<span>«Ветер перемен» «Ветер перемен» «Ветер перемен» «Ветер перемен»</span>
</div>
</a>
</div>
</div>
<div class="carousel-block2">
<div class="carousel-block2-inside">
<a href=""><img src="images/1.jpg" alt="" />
<div>
<h3>Команда "Никельщик" вновь порадовала уфалейских болельщиков</h3>
<span>Команда "Никельщик" вновь порадовала уфалейских болельщиков Команда "Никельщик" вновь</span>
</div>
</a>
</div>
</div>
<div class="carousel-block2">
<div class="carousel-block2-inside">
<a href=""><img src="images/2.jpg" alt="" />
<div>
<h3>Супруги Хасановы отметили 50-летие совместной жизни</h3>
<span>Супруги Хасановы отметили 50-летие совместной жизни Супруги Хасановы отметили 50-летие совместной жизни</span>
</div>
</a>
</div>
</div>
<div class="carousel-block2">
<div class="carousel-block2-inside">
<a href=""><img src="images/3.jpg" alt="" />
<div>
<h3>Благотворительный концерт "Мы помним! Мы гордимся!"</h3>
<span>Благотворительный концерт "Мы помним! Мы гордимся!" Благотворительный концерт "Мы помним! Мы гордимся!"</span>
</div>
</a>
</div>
</div>
<div class="carousel-block2">
<div class="carousel-block2-inside">
<a href=""><img src="images/4.jpg" alt="" />
<div>
<h3>«Ветер перемен»</h3>
<span>«Ветер перемен» «Ветер перемен» «Ветер перемен» «Ветер перемен»</span>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="btn-over1">
<div class="carousel-button-left2"><a href="#"></a></div>
</div>
<div class="btn-over2">
<div class="carousel-button-right2"><a href="#"></a></div>
</div>
</div>
