Я пытаюсь создать слайдер изображения с разметкой HTML
и script
ниже:
<div id="button-previous">prev</div> <div id="button-next">next</div>
<figure>
<a href="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg" />
</a>
<a href="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg">
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
</a>
<a href="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg">
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
</a>
<a href="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg" >
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
</a>
<figcaption>no need class "active" or "oldActive" or on figcation sematic</figcaption>
</figure>
$(document).ready(function () {
$('figure a').first().addClass('active');
$('figure a').hide();
$('figure a.active').show();
$('#button-next').click(function () {
$('figure a.active').removeClass('active').addClass('oldActive');
if ($('figure a.oldActive').is('figure a.oldActive:last-child')) {
$('figure a').first().addClass('active');
} else {
$('figure a.oldActive').next().addClass('active');
}
$('figure a.oldActive').removeClass('oldActive');
$('figure a').fadeOut();
$('figure a.active').fadeIn();
});
$('#button-previous').click(function () {
$('figure a.active').removeClass('active').addClass('oldActive');
if ($('figure .oldActive').is(':first-child')) {
$('figure a').last().addClass('active');
} else {
$('figure a.oldActive').prev().addClass('active');
}
$('figure a.oldActive').removeClass('oldActive');
$('figure a').fadeOut();
$('figure a.active').fadeIn();
});
});
#button-previous
.class="active"
в <figcaption>
после последнего ребенка figure a
когда нажимает #button-next
у last-child of figure a
.ЗАРАНЕЕ СПАСИБО.
Проблема заключается в том, что внутри figure
тега, figcaption
последний ребенок, не последний тег! a
Таким образом, вторая строка $('#button-next').click
должен быть изменен:
if ($('figure a.oldActive').is('figure a.oldActive:last-child')) {
...к этому:
if ($('figure a.oldActive').is('figure a.oldActive:nth-last-child(2)')) {