1

I have this code for slider button, i want move 4 images every button click. and make the button not active when all images slides if right or left. (sorry if my English not good)

$(document).on('click', '.px-carousel-nav .px-next', function() {
        var sumando_ancho = width_total();
        // Si el ancho generado es menor al ancho del contenedor, no hacer nada
        if (sumando_ancho < $('.px-carousel-wrapper').width()) {
            return false;
        }
        $('.px-carousel-container').css({
            'min-width': ''
        }); // reset
        var position_items = posiciones();

        var rev = -1;
        if (is_rtl()) {
            rev = 1;
        }
        var translate = getTranslate3d(document.getElementsByClassName('px-carousel-container')[0]) * rev;

        var now_ = 0;
        $.each(position_items, function(index, value) {
            if (value.toFixed(2) > translate) {
                now_ = value * rev;

                return false;
            }
        });
        var diferencia = ($('.px-carousel-wrapper').outerWidth() - sumando_ancho);

        $('.px-carousel-container').animate({
            example: now_,
        }, {
            step: function(now, fx) {
                switch (fx.prop) {
                    case 'example':
                        $(this).css({
                            'transform': 'translate3d(' + now + 'px, 0px, 0px)',
                            'transition': 'all 0.25s ease 0s'
                        });
                        if (is_rtl()) {
                            if (now >= diferencia * -1) {

                                $('.px-carousel-container').stop();
                                $(this).css({
                                    'transform': 'translate3d(' + ((diferencia * -1)) + 'px, 0px, 0px)',
                                    'transition': 'all 0.25s ease 0s'
                                });
                                break;
                            }
                        } else {
                            if (now <= diferencia) {

                                $('.px-carousel-container').stop();
                                $(this).css({
                                    'transform': 'translate3d(' + (diferencia) + 'px, 0px, 0px)',
                                    'transition': 'all 0.25s ease 0s'
                                });
                                break;
                            }
                        }
                }
            },
            duration: 100,
        });
    });

    $(document).on('click', '.px-carousel-nav .px-prev', function() {
        $('.px-carousel-container').css({
            'min-width': ''
        }); // reset
        var sumando_ancho = width_total();
        var position_items = posiciones().reverse();

        var rev = -1;
        if (is_rtl()) {
            rev = 1;
        }
        var translate = getTranslate3d(document.getElementsByClassName('px-carousel-container')[0]) * rev;

        var now_ = 0;
        $.each(position_items, function(index, value) {
            if (value.toFixed(2) < translate) {
                now_ = value * rev;

                return false;
            }
        });

        var diferencia = ($('.px-carousel-wrapper').outerWidth() - sumando_ancho);

        $('.px-carousel-container').animate({
            example: now_,
        }, {
            step: function(now, fx) {
                switch (fx.prop) {
                    case 'example':
                        $(this).css({
                            'transform': 'translate3d(' + now + 'px, 0px, 0px)',
                            'transition': 'all 0.25s ease 0s'
                        });
                }
            },
            duration: 100,
        });
    });

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.