Недавно решил создать слайдер .
Основывался на это уроке
https://www.youtube.com/watch?v=u4qJcO5hLdQ&t=294s
Вот код
HTML
.<!DOCTYPE html>
<html>
<head>
<title>пробник</title>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="prev n"><a href="#">Prev</a></div>
<div class="slider">
<div class="img curry">1</div>
<div class="img">2</div>
<div class="img">3</div>
<div class="img">4</div>
<div class="img">5</div>
</div>
<div class="next n"><a href="">Next</a></div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
jQuery
$(document).ready(function(){
$('.next').click(function(){
var currentImage = $('.img.curry');
var currentImageIndex = $('.img.curry').index();
var nextImageIndex = currentImageIndex +1;
var nextImage = $('.img').eq(nextImageIndex);
currentImage.fadeOut(1000);
currentImage.removeClass('curry');
if(nextImageIndex == ($('.img:last').index()+1)){
$('.img').eq(0).fadeIn(1000);
$('.img').eq(0).addClass('curry');
} else {
nextImage.fadeIn(1000);
nextImage.addClass('curry');
}
});
$('.prev').click(function(){
var currentImage = $('.img.curry');
var currentImageIndex = $('.img.curry').index();
var prevImageIndex = currentImageIndex - 1;
var prevImage = $('.img').eq(prevImageIndex);
currentImage.fadeOut(1000);
currentImage.removeClass('curry');
prevImage.fadeIn(1000);
prevImage.addClass('curry');
});
});
CSS
body{
background: #2f4f;
display: flex;
font-family: Arial;
}
.slider{
width: 500px;
height: 300px;
margin: 100px auto;
position: relative;
top: 0;
left: 0;
right: 0;
}
.img{
text-align: center;
line-height: 300px;
position: absolute;
font-size: 50px;
color: #f5f5;
display: none;
}
.img.curry{
display:block;
}
.img:first-child{
width:500px;
background: #c40a;
}
.img:nth-child(2){
width:500px;
background: #c80a;
}
.img:nth-child(3){
width:500px;
background: #4f9a;
}
.img:nth-child(4){
width:500px;
background: #0ba;
}
.img:nth-child(5){
width:500px;
background: #c0ba;
}
.n{color: #f5cf;}
a{
text-decoration: none;
color: #b7af;
font-size: 20px;
}
a:hover{color:#1ac ;}
.prev{
position: relative;
top: 240px;
left: 400px;
}
.next{
position: relative;
top: 240px;
right: 400px;
}
Переписал точь в точь , но ничего не происходит !! При клике на prev ничего не происходит, next - тоже самое . Окно js файл не видит .
