jquery - 响应式图像滑块 + 滑动

Question

我正在寻找一个响应式图像滑块，您可以在其中交换图像。这就是我要的：

我已经尝试过本教程：http
: //www.awwwards.com/demo/touchSwipe-gallery-demo.html 但是当我将变量“maxImages”设置为超过 3 个时，它不会显示超过 3 个图像。

有谁知道适用于所有设备的优秀 js 库？（iphone、ipad、...）

Answer 1

对于超过 3 张图片，您只需$("#imgs").css('width',maxImages*IMG_WIDTH+50);在之后添加此行imgs = $("#imgs");

jQuery Mobile 易于用于设备

Answer 2

我见过和使用过的最好的是Royal Slider，

http://dimsemenov.com/plugins/royal-slider/

它确实要花钱，但价格合理，但我相信它是一个优雅的响应式滑块。

图像滑块演示

Answer 3

是的，您可以进行如下更改：

$(function() {
            var IMG_WIDTH = new Array(0,500,200,500),
            currentImg = 0,
            maxImages = 6;
            speed = 500,
            imgs = $("#imgs");
            var countIMG = 0;
            $.each(IMG_WIDTH, function(index, value) {
                countIMG += value;
            });
           $("#imgs").css('width',countIMG+50);
            //Init touch swipe
            imgs.swipe({
                triggerOnTouchEnd: true,
                swipeStatus: swipeStatus,
                allowPageScroll: "vertical"
            });

            function swipeStatus(event, phase, direction, distance, fingers)
            {
                if (phase == "move" && (direction == "left" || direction == "right"))
                {
                    var duration = 0;

                    if (direction == "left")
                        scrollImages((IMG_WIDTH[currentImg] * currentImg) + distance, duration);

                    else if (direction == "right")
                        scrollImages((IMG_WIDTH[currentImg] * currentImg) - distance, duration);
                }

                else if (phase == "cancel")
                {
                    scrollImages(IMG_WIDTH[currentImg] * currentImg, speed);
                }

                else if (phase == "end")
                {
                    if (direction == "right")
                        previousImage()
                    else if (direction == "left")
                        nextImage()
                }
            }

            function previousImage()
            {
                currentImg = Math.max(currentImg - 1, 0);
                scrollImages(IMG_WIDTH[currentImg] * currentImg, speed);
            }

            function nextImage()
            {
                currentImg = Math.min(currentImg + 1, maxImages - 1);
                scrollImages(IMG_WIDTH[currentImg] * currentImg, speed);
            }

            function scrollImages(distance, duration)
            {
                imgs.css("-webkit-transition-duration", (duration / 1000).toFixed(1) + "s");

                var value = (distance < 0 ? "" : "-") + Math.abs(distance).toString();

                imgs.css("-webkit-transform", "translate3d(" + value + "px,0px,0px)");
            }
        });

它没有经过测试，但它必须是好的..