There was a problem when writing a slider, what's the problem?

U

Umid2015-10-18 17:22:36

JavaScript

Umid, 2015-10-18 17:22:36

Hello, there was a problem when writing a slider in js, jquery.

Code:
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'});
    }
  });
});

And so: the last lines of the script are of interest:

$('.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'});
    }
  });

In the part where I set up .leftB - everything works fine!
But in .rightB - for some reason, when we output through alert(needPos) it comes out undefined , while in .leftB everything works with a bang!

Because of this, it is not possible to modify the arrows, what is the problem ????

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

Sergey Nikolaev, 2015-10-18
@DarCKoder

Hold: codepen.io/mccrush/pen/KdyRRv
In short, the string type was substituted for the numeric type when the data-num was pulled out.
Add pluses as in the example for data type conversion.
And: 1. Use the console instead of the alert.
2. Pick colors right away.

B

Bowen, 2015-10-18
@Bowen

jsfiddle.net/jo9o7j91