Написал простой слайдер, который отображается картинки в зависимости от того на какой элемент списка мы наводим курсор.
Структура следующая:
<div class="wrapper">
<div class="display">
<div class="slide show"><img src="img1.png"></div>
<div class="slide"><img src="img2.png"></div>
<div class="slide"><img src="img3.png"></div>
</div>
<div class="switches">
<ul>
<li class="curr">Картинка 1</li>
<li>Картинка 2</li>
<li>Картинка 3</li>
</ul>
</div>
</div>
$("div.switches li").hover(function() {
$("div.switches li").removeClass("curr");
$(this).addClass("curr");
var index_switch = $(this).index();
$("div.display div.slide").removeClass("show").eq(index_switch).addClass("show");
});
Все работает, все класс. Только возникла необходимость добавить смену картинок с эффектом.
Слайдер подключать ради такой мелочи както не хочется. Тем более что с задачей почти справился. Тем не менее есть один косяк.
Придумал следующую логику.
1. Все контейнеры с картинками (div.slide) делаем видимыми + прописываем position: absolute чтобы в стопку лежали.
2. Обнуляем для всех их z-index: 0.
3. Первой и второй задаем z-index: 2 и 1 соответственно, чтобы сразу за отображаемой лежала следующая.
4. При наведении на следующую делаем у предыдущей fadeOut и обнуляем z-index для всех.
5. Затем для текущей ставим z-index: 2 а для следующей z-index: 1.
Вроде по логике все верно, но почемуто первая смена первой и второй картинки происходит без эффекта.
Подскажите верно ли я логику составил и может быть лучше и легче воспользоваться готовым слайдером?