38865


①右方向には右ボタンを押すと移動、左方向には左ボタン押すと移動。  
②右端にいる状態で右ボタンを押すと最初の位置に戻り、
左端にいる状態で左ボタンを押すと最後の位置に移動するのをやりたいのですが、②ができません。prevの方はできるのですが、nextの方ができずに困っています。ご指導ください。

[code]

    <!doctype html>
    <html>
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <meta name="format-detection" content="telephone=no">
      <title>jQuery</title>
      <link rel="stylesheet" href="../../common/css/reset.css">
      <link rel="stylesheet" href="../../common/css/base.css">
      <link rel="stylesheet" href="./css/style.css">
      </head>
      <body>
        <div class="wrapper">
          <div class="slider-wrap">
            <div class="slider-area">
              <ul class="slider-list clearfix">
                <li><img src="./img/1.jpg"></li>
                <li><img src="./img/2.jpg"></li>
                <li><img src="./img/3.jpg"></li>
                <li><img src="./img/4.jpg"></li>
              </ul>
              <button type="button" class="slider-ctrl-btn is-prev" data-ctrl="prev"></button>
              <button type="button" class="slider-ctrl-btn is-next" data-ctrl="next"></button>
            </div>
          </div>
        </div>
        <script src="../../common/js/jquery.js"></script>
        <script>
          $(function() {
            var slideWidth = $('.slider-list').children('li').width();
            var slideNum = $('.slider-list').children('li').length;
            var now = 0;
            $('.slider-ctrl-btn').on('click',function() {
              var nextorprev = $(this).data('ctrl');
              if(now < 1) {
                now = 4;
              } else if(now > 3) {
                now = 0;
              };
              if('next' == nextorprev) {
                now++;
                $('.slider-list').stop().animate( {
                  left: -slideWidth * now
                });
              } else if('prev'== nextorprev) {
                now--;
                $('.slider-list').stop().animate( {
                  left: slideWidth * now * -1
                });
              } 
              console.log(now);
            });
          });
          // .animate({}) cssのプロパティを一定時間かけて変化させてます。
          // .data() 要素のdata属性を取得してます。
          // .width() 要素の幅を取得してます。
          // .length 要素の個数を取得してます。
        </script>
      </body>
    </html>
    
    .clearfix:after {
      display: block;
      clear: both;
      content: '';
    }
    .wrapper {
      padding: 20px;
    }
    .slider-wrap {
      padding: 10px;
      margin: 0 auto;
      width: 620px;
      border-radius: 0px;
      background-color: #fff;
      box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
    }
    .slider-area {
      position: relative;
      width: 600px;
      height: 300px;
      background-color: #FFF;
      overflow: hidden;
    }
    .slider-list {
      position: absolute;
      top: 0;
      left: 0;
      width: 2400px;
      height: 300px;
    }
    .slider-list > li { float: left; }
    .slider-ctrl-btn {
      position: absolute;
      top: 50%;
      margin-top: -15px;
      width: 30px;
      height: 30px;
      border-radius: 15px;
      background-color: rgba(255, 255, 255, .8);
      cursor: pointer;
    }
    .slider-ctrl-btn.is-prev { left: 20px; }
    .slider-ctrl-btn.is-next { right: 20px; }
    
[/code]


CC BY-SA 3.0
2017-10-18T05:50:44.183
38828
2017-10-19T08:58:35.500
2017-10-18T06:50:43.130
2383
25400
question
jquery
スライドショーを完成させたい。


こうですね。

[code]

    $(function() {
        var slideWidth = $('.slider-list').children('li').width();
        var slideNum = $('.slider-list').children('li').length;
        var now = 0;
        $('.slider-ctrl-btn').on('click',function() {
          var nextorprev = $(this).data('ctrl');
          if('next' == nextorprev) {
            now++;
          } else if('prev'== nextorprev) {
            now--;
          }
          //要素番号が要素数を超えていたら要素内のインデックスに収まるように剰余で計算
          now = (now + $(".slider-list>li").length) % $(".slider-list>li").length;
    
          $('.slider-list').stop().animate( {
            left: -slideWidth * now
          });
          console.log(now);
        });
      });
    
[/code]


CC BY-SA 3.0
2017-10-19T08:58:35.500
38865
2017-10-19T08:58:35.500
17014
38828
answer