Question

我正在尝试为我的客户自定义添加图库编写一个水平滑块。元素显示为无包装，多窗口宽度的块，用于在单击左侧或右侧滑块箭头时更改它margin-left。

它应该增加/减少margin-left的值必须是variable，因为无论当前响应的css文档是否加载，它都应该正常工作。

我创建了一个脚本，它将获得photo-container div宽度，将其保存为变量，然后将其用作animate()函数中的右侧参数，但它仍然不起作用我想要的方式。实际上，它实际上根本不起作用，或者在控制台中显示无效的补间错误。

我的剧本：

$(document).ready(function() {
           var imageWidthToSlice = $(".gallery-element-wrapper").css("width");
            imageWidth = imageWidthToSlice.slice(0, -2);
            defaultMargin = $(".gallery-element-wrapper:first").css("margin-left").slice(0, -2);
            numberOfElements = $(".gallery-element-wrapper").length;
            totalWidth = imageWidth * numberOfElements;

            $(".gallery-arrow").click(function() {
               if ( $(".gallery-element-wrapper:first").css("margin-left").slice(0, -2) != defaultMargin ) {
                   $(".gallery-element-wrapper:first").animate({
                       marginLeft: "+="imageWidth;
                   },500);
               } 
                else {
                    console.log("This is the first image, can't slide left more.");
                }
            });

        });

还有关于主题的视觉概述： https://stackoverflow.com/a/41744948/1786341

还有JSFiddle：

Answer 1

试试这个。

$(document).ready(function() {
        var imageWidthToSlice = $(".gallery-element-wrapper").css("width");
        imageWidth = imageWidthToSlice.slice(0, -2);
        defaultMargin = $(".gallery-element-wrapper:first").css("margin-left").slice(0, -2);
        numberOfElements = $(".gallery-element-wrapper").length;
        totalWidth = imageWidth * numberOfElements;

        $(document).on("click",".gallery-arrow-wrapper",function() {

           if ( $(".gallery-element-wrapper:first").css("margin-left").slice(0, -2) != defaultMargin ) {
               $(".gallery-element-wrapper:first").animate({
                   marginLeft: "+="+imageWidth
               },500);
           } 
            else {
          $(".gallery-element-wrapper:first").animate({
                   marginLeft: "+="+500
               },500);

                console.log("This is the first image, can't slide left more.");
            }
        });

    });

php的水平滑块生成图像库

1 个答案: