Прошу помочь найти ошибку в слайдере

125
13 августа 2019, 12:40

$('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>

  1. Не могу найти ошибку в слайдере (написал только next, а уже не работает), прошу помочь. Ошибок в консоли разработчика не выдает.
  2. Правилен ли здесь принцип написания простого слайдера? Может будут какие-либо советы новичку.
Answer 1

$('document').ready(function() { 
  $('.next').click(function(e) { 
    e.preventDefault(); // !!! 
     
    var currentImage = $('.image.first'); 
    var currentImageIndex = $('.image').index(currentImage); 
    var nextImageIndex = (currentImageIndex + 1) % $('.image').length; 
    var nextImage = $('.image').eq(nextImageIndex); 
     
    currentImage.fadeOut(1300); 
    currentImage.removeClass('first'); 
 
    nextImage.fadeIn(1300); 
    nextImage.addClass('first') 
  }); 
   
  $('.image').hide();       // !!! 
  $('.image.first').show(); // !!! 
});
.next { 
  display: block; 
  position: absolute; 
  right: 50px; 
  top: 390px; 
  font-size: 20px; 
  font-family: arial; 
} 
 
.prev { 
  display: block; 
  position: absolute; 
  left: 50px; 
  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; 
  width: 500px; 
} 
 
.image:first-child { 
  background-color: #661D21; 
} 
 
.image:nth-child(2) { 
  background-color: #83A15D; 
} 
 
.image:nth-child(3) { 
  background-color: #C13DA1; 
} 
 
.image:nth-child(4) { 
  background-color: #5344BA; 
} 
 
.image:nth-child(5) { 
  background-color: #40BEA3; 
} 
 
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>

READ ALSO
Создать массив обьектов
javascript

Создать массив обьектов

Имеется объект item который хранит в себе поля name, password и тдЕсть массивы: person_name, person_password в которых лежат имена и пароли

 109
Nuxt.js Failed to execute &#39;appendChild&#39; on &#39;Node&#39;
javascript

Nuxt.js Failed to execute 'appendChild' on 'Node'

Проблема заключается в том что проект надо перенести на Nuxt и часть кода не работаетА именно от размера экрана надо выполнить не большие манипуляции...

 141
Uncaught TypeError: socket.send is not a function
javascript

Uncaught TypeError: socket.send is not a function

Пожалуйста,нужна горячая помощь!

 126
vue-cli, npm и установка
javascript

vue-cli, npm и установка

Не так давно работаю с Vue js и тд, в каждый проект по фронт енду мне нужно прописать:

 94