[解決済み] JQuery シンプルな水平スライダー

質問

こんにちは。

を使って非常にシンプルなスライダーを作ろうとしています。 Jquery scrollLeft() メソッド . 私はいくつかの答えを見つけ、私はこれを試してみました。 ここで .... しかし、動作しない .... 私はまだjqueryの初心者で、なぜかわからない。

HTML

   <div class="gallery-slider ">
       <div class="images-preview">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
       </div>
       <div class="controls">
           <div class="right-arrow"><i class="fa fa-angle-left fa-3x"></i></div>
           <div class="left-arrow"><i class="fa fa-angle-right fa-3x"></i></div>
       </div>
   </div>

CSS

    .gallery-slider {
    position: relative;
}

.gallery-slider .images-preview {
    margin: auto;
    height: 230px;
    overflow: hidden;
}

.gallery-slider .images-preview img {
    display: inline-block;
    overflow: visible;
    width: 410px;
    margin: 10px 17px;
}
.gallery-slider .images-preview img, .controls {
        height: 200px;
    width: 26%;
}
/* Controls */
.controls {
    position: absolute;
    top: 10px;
    width: 100%;
}


.right-arrow, .left-arrow {
    display: inline-block;

    padding: 62px;
    background-color: rgba(255, 255, 255, 0.76);
    position: absolute;
    height: 100%;
    cursor: pointer;
}
.right-arrow i, .left-arrow i{
        margin: 23px 20px;
}
.left-arrow {
    right: 0px;
}

.right-arrow {
    left: 0px;
    text-align: right;
}

jQuery

  $(".left-arrow").click(function () { 
      var leftPos = $('.images-preview img').scrollLeft();
      $(".images-preview img").animate({scrollLeft: leftPos - 100}, 1000);
    });

    $(".right-arrow").click(function () { 
      var leftPos = $('.images-preview img').scrollLeft();
      $(".images-preview img").animate({scrollLeft: leftPos + 100}, 1000);
    });

だから 何かお手伝いできることはありますか？

ありがとうございました。

フィドルはこちら

更新しました。 に戻す必要があります。 scrollleft():0 スクロール終了時

解決方法は？

今回ご相談の内容は、シンプルですが、問題点がたくさんあります。これらの問題は、物事を複雑にしています。

1. images-previewのpositionをabsoluteにしました。これによって 左を制御してスクロールする(css)。scrollLeftを取得できませんでした。 が働きます。なぜかわからない。もし知っている人がいれば、ぜひ教えてください。
2. images-previewの中にあるimgの数を計算する必要がある。画像の追加や削除ができるようにする。
3. var active を追加し、高速クリックを防止する。

javascriptを使用しています。

var target = $('.images-preview');

//get the total number of images
var total = $('.images-preview img').length;
//calculate the width of the image-preview
var width = total * 300 + total * 40;
var c = 1;
// 80 is to center the image-preview 
var originalLeft = 80;
// 300 is the image size, 40 is the total margin (this is how many px image-preview
// would have to move left for one image
var totalImg = 300 + 40;
// startToEnd is the total width when you click left(arrow-right) on first image
var startToEnd = width -originalLeft -340;
var a = '';
//need this to prevent multiple clicks
var active = false;

//put in the width at page rendering
$(document)function(){
    target.css('width', width);
});

 $(".left-arrow").click(function () { 
    if (active === false){
        if (c === total){
            a = originalLeft;
            c = 1;
        }else{
            a = '-='+totalImg;
            c++;
        }
        //turn the active to true to prevent another animation from activating
        active = true;
        target.animate(
            {left: a},
            {duration:500,
            //turn the active off after animation is complete
            complete: function(){
                active = false;
            }
        });
    }
 });
 $(".right-arrow").click(function () { 
    if (active === false){
        if (c === 1){
            a = '-'+startToEnd;
            c = total;
        }else{
            a = '+='+totalImg;

            c--;
        }
        active = true;
        target.animate(
            {left: a},
            {duration:500,
            complete: function(){
                active = false;
            }
        });
    }
 });

cssを使用します。

.gallery-slider{
    width:500px;
    height:300px;
    position:relative;
    overflow:hidden;
}
.images-preview{
    width:300px;
    height:300px;
    position:absolute;
    left:80px;
}
.images-preview img{
    width:300px;
    height:300px;
    position:relative;
    float:left;
    margin:0 20px;
}
.control{
    width:100%;
    height:100%;
    position:relative;
}
.right-arrow, .left-arrow{
    position:absolute;
    padding:0 26px;
}
.right-arrow i, .left-arrow i{
    line-height:300px;
}
.right-arrow{
    left:0;   
}
.left-arrow{
    right:0;
}

以下はデモです。 https://jsfiddle.net/ood26n7b/1/