Здравствуйте, возникла проблемка при написании слайдера на js, jquery.
Код:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<div class="contentContainer">
<div class="slider">
<div class="slide-1">1</div>
<div class="slide-2">2</div>
<div class="slide-3">3</div>
<div class="slide-4">4</div>
<div class="slide-5">5</div>
<div class="slide-6">6</div>
</div>
<div class="footer">
<div class="navigation">
<ul>
<li class="itemLinks link-1" data-num="1"></li>
<li class="itemLinks link-2" data-num="2"></li>
<li class="itemLinks link-3" data-num="3"></li>
<li class="itemLinks link-4" data-num="4"></li>
<li class="itemLinks link-5" data-num="5"></li>
<li class="itemLinks link-6" data-num="6"></li>
</ul>
</div>
<span class="leftB butt"><</span>
<span class="rightB butt">></span>
</div>
</div>
</body>
</html>
CSS
.contentContainer{
border: 10px;
position: relative;
}
.slider{
position: relative;
left: 0px;
transition: left .8s ease-in-out;
}
.slider > div{
float:left;
}
.slide-1{
background: red;
}
.slide-2{
background: yellow;
}
.slide-3{
background: blue;
}
.slide-4{
background: green;
}
.slide-5{
background: orange;
}
.slide-6{
background: grey;
}
.footer{
position: absolute;
}
.itemLinks{
width:10px;
height:10px;
border:5px black solid;
border-radius:50%;
margin:10px;
display:inline-block;
}
.butt{
font-size:3em;
}
JavaScript
$(document).ready(function(){
$('.contentContainer').css({'width':$(window).width(), 'overflow':'hidden'});
$('.slider>div , .contentContainer').css({'height':$(window).height()});
$('.slider>div , .contentContainer').css({'width':$(window).width()});
$('html').css({'overflow':'hidden'});
$('.slider').css({
'width':$(window).width() * 6
})
var wWidth = $(window).width();
$('.link-1').attr('data-pos',0);
$('.link-2').attr('data-pos',-(wWidth));
$('.link-3').attr('data-pos',-(wWidth*2));
$('.link-4').attr('data-pos',-(wWidth*3));
$('.link-5').attr('data-pos',-(wWidth*4));
$('.link-6').attr('data-pos',-(wWidth*5));
$('html').css({'overflow':'hidden'});
$('.link-1').addClass('active');
$('.itemLinks').on("click",function(){
var data_num = $(this).attr('data-num');
var asd = '.link-'+data_num;
var slideDiv = $(asd).attr('data-pos');
$('.slider').css({'left':slideDiv + 'px'});
$('.itemLinks').removeClass("active");
$(this).addClass("active");
});
$('.leftB').on("click",function(){
var data_number = $('.active').attr('data-num');
if(data_number == 1){
var lastChildPos = $('.navigation>ul li:last-child').attr('data-pos');
$('.slider').css({'left':lastChildPos + 'px'});
$('.itemLinks').removeClass("active");
$('.navigation>ul li:last-child').addClass('active')
}
else{
var data_num3 = $('.active').attr('data-num');
var needPos = $('[data-num=' + (data_num3-1) + ']').attr('data-pos');
$('.itemLinks').removeClass("active");
$('[data-num='+(data_num3-1)+']').addClass('active');
$('.slider').css({'left':needPos+'px'});
}
});
$('.rightB').on("click",function(){
var data_number = $('.active').attr('data-num');
if(data_number == 6){
var firstChildPos = $('.navigation>ul li:first-child').attr('data-pos');
$('.slider').css({'left':firstChildPos + 'px'});
$('.itemLinks').removeClass("active");
$('.navigation>ul li:first-child').addClass('active');
}
else{
var data_num = $('.active').attr('data-num');
var needPos = $('[data-num=' + (data_num+1) + ']').attr('data-pos');
alert(needPos);
// $('.itemLinks').removeClass("active");
// $('[data-num='+(data_num3+1)+']').addClass('active');
// $('.slider').css({'left':needPos+'px'});
}
});
});
И так : интересует последнии строки скрипта :
$('.leftB').on("click",function(){
var data_number = $('.active').attr('data-num');
if(data_number == 1){
var lastChildPos = $('.navigation>ul li:last-child').attr('data-pos');
$('.slider').css({'left':lastChildPos + 'px'});
$('.itemLinks').removeClass("active");
$('.navigation>ul li:last-child').addClass('active')
}
else{
var data_num3 = $('.active').attr('data-num');
var needPos = $('[data-num=' + (data_num3-1) + ']').attr('data-pos');
$('.itemLinks').removeClass("active");
$('[data-num='+(data_num3-1)+']').addClass('active');
$('.slider').css({'left':needPos+'px'});
}
});
$('.rightB').on("click",function(){
var data_number = $('.active').attr('data-num');
if(data_number == 6){
var firstChildPos = $('.navigation>ul li:first-child').attr('data-pos');
$('.slider').css({'left':firstChildPos + 'px'});
$('.itemLinks').removeClass("active");
$('.navigation>ul li:first-child').addClass('active');
}
else{
var data_num = $('.active').attr('data-num');
var needPos = $('[data-num=' + (data_num+1) + ']').attr('data-pos');
alert(needPos);
// $('.itemLinks').removeClass("active");
// $('[data-num='+(data_num3+1)+']').addClass('active');
// $('.slider').css({'left':needPos+'px'});
}
});
В части где настроил .leftB - всё работает отлично!
А вот в .rightB - почему то когда выводим через alert(needPos) выходит undifined , в то время как в .leftB всё работает на УРА!
Из за этого не получается доработать стрелки, в чём же проблема????
