$('document').ready(function() {
$('.next').click(function() {
var currentImage = $('.image.first');
var currentImageIndex = $('.image.first').index();
var nextImageIndex = currentImageIndex + 1;
var nextImage = $('.image').eq(nextImageIndex);
currentImage.fadeOut(1300);
currentImage.removeClass('first');
if (nextImageIndex == ($('.image:last').index() + 1)) {
$('.image').eq(0).fadeIn(1300);
$('.image').eq(0).addClass('first');
} else {
nextImage.fadeIn(1300);
nextImage.addClass('first')
}
/*...prev...*/
});
});
.next {
display: block;
position: absolute;
left:1240px;
top:390px;
font-size: 20px;
font-family: arial;
}
.prev {
display: block;
position: absolute;
left:610px;
top:390px;
font-size: 20px;
font-family: arial;
}
.slider {
position: relative;
width:500px;
height:300px;
left:0px;
top:0px;
right:0px;
margin:300px auto;
}
.image {
text-align: center;
line-height: 200px;
position:absolute;
font-size:40px;
}
.image:first-child {
background-color: #661D21;
width:500px;
}
.image:nth-child(2) {
background-color:#83A15D;
width:500px;
}
.image:nth-child(3) {
background-color:#C13DA1;
width:500px;
}
.image:nth-child(4) {
background-color:#5344BA;
width:500px;
}
.image:nth-child(5) {
background-color:#40BEA3;
width:500px;
}
a{
color: black;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="next"><a href="#">next</a></div>
<div class="prev"><a href="#">previous</a></div>
<div class="slider">
<div class="image first">FIRST</div>
<div class="image">SECOND</div>
<div class="image">THIRD</div>
<div class="image">FOURTH</div>
<div class="image last">FIFTH</div>
</div>
- Не могу найти ошибку в слайдере (написал только
next
, а уже не работает), прошу помочь. Ошибок в консоли разработчика не выдает. - Правилен ли здесь принцип написания простого слайдера? Может будут какие-либо советы новичку.