Отзывчивый слайдер изображений + свайп

Я ищу адаптивный слайдер изображений, где вы можете переключаться между изображениями. Это то, что я хочу:

введите здесь описание изображения

Я пробовал это руководство: http://www.awwwards.com/demo/touchSwipe-gallery-demo.html
Но когда я устанавливаю для переменной maxImages значение более 3, оно не показывает более 3 изображений.

Кто-нибудь знает хорошую библиотеку js, которая работает на всех устройствах? (айфон, айпад, ...)


slider jquery responsive-design swap
person nielsv    schedule 29.05.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

да, вы можете внести некоторые изменения следующим образом:

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

Это не проверено, но это должно быть хорошо ..

person chakroun yesser    schedule 30.05.2013

arrow_upward
1
arrow_downward

Для более чем 3 изображений вам нужно просто добавить эту строку $("#imgs").css('width',maxImages*IMG_WIDTH+50); после imgs = $("#imgs");

jQuery Mobile прост в использовании для устройств

person chakroun yesser    schedule 29.05.2013
comment
Таким образом, я всегда получаю открытое пространство на моем последнем изображении. См.: cl.ly/image/2u1n431G3j24. - person nielsv; 29.05.2013
comment
Просто добавьте 30, а не 50 по ширине или меньше - person chakroun yesser; 29.05.2013
comment
Вот что у меня есть сейчас: nielsvroman.be/tapcrowd/slider/index.html Знаете, почему вы продолжаете прокручивать вправо? - person nielsv; 29.05.2013
comment
поскольку некоторые изображения имеют ширину 200 пикселей, а не 500 пикселей, все они должны иметь одинаковую ширину .. посмотрите на это => IMG_WIDTH = 500, - person chakroun yesser; 29.05.2013
comment
И нельзя ли это сделать для изображений с другой шириной? - person nielsv; 30.05.2013

arrow_upward
1
arrow_downward

Лучшее, что я видел и использовал, это Royal Slider,

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

Это стоит денег, но это разумная цена, но я считаю, что это элегантный отзывчивый слайдер.

Демонстрация слайдера изображений

person MackieeE    schedule 29.05.2013