Question

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

enter image description here

我试过这个教程：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 is simple to use for devices

Answer 2

我见过的最好的＆amp;使用的是Royal Slider，

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

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

Image Slider Demo

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

它没有经过测试，但一定很好..

响应式图像滑块+滑动

3 个答案: