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

はい、次のような変更を加えることができます:

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

それはテストされていませんが、それは良いに違いありません..

Answer 3

私が見て使った最高のものはRoyal Sliderです。

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

お金はかかりますが、手頃な価格ですが、エレガントでレスポンシブなスライダーだと思います.

画像スライダーのデモ