javascript - 用于 php 生成的图像库的水平 slider

Question

我正在尝试为我的客户自定义添加的画廊编写一个水平 slider 。元素显示为无换行、多窗口宽度的 block ，一旦单击向左或向右的 slider 箭头，它就会更改 margin-left。

它应该增加/减少 margin-left 的值必须是一个变量，因为无论当前加载的响应式 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.");
                }
            });

        });

还有主题的视觉概览:

还有 JSFiddle:

https://jsfiddle.net/akpwb5b9/

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

    });