Question

Hi There,

I try to create very simple slider using Jquery scrollLeft() method . I found some answers and i tried this one here .... but not working .... I'm still beginner in jquery and don't know why .

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);
    });

So Any help ?!

Thanks in advance

Fiddle here

Update: also i need it to return to scrollleft():0 at the end of scrolling

Answer 1

您要求的是简单但充满问题。这些问题使事情变得复杂。

我已将图像预览位置设为绝对值。它允许你通过控制左（css）滚动。无法获得scrollLeft 工作。不知道为什么。如果有人这样做，我很想知道。
需要计算图像预览中的img数量。允许您添加或删除图像。
添加了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/

JQuery For simple horizontal slider

1 个答案: