0

I have this code for slider, i need help to edit it to allow multiple slider in same page.

var all_divs = $('.px-carousel-container .px-carousel-item').length;

    var i = 0,
        n = 0;
    let scrollleft_before = 0;

    let margin = 0;
    if (is_rtl()) {
        margin = parseInt($('.px-carousel-item').css('margin-left'));
    } else {
        margin = parseInt($('.px-carousel-item').css('margin-right'));
    }
    var position_items = [0];

    function width_total() {
        var sumando_ancho = 0;
        for (var pi = 0; pi < all_divs; pi++) {
            if (pi + 1 == all_divs) {
                sumando_ancho += parseFloat($('.px-carousel-container .px-carousel-item')[pi].getBoundingClientRect().width.toFixed(2));
            } else {
                sumando_ancho += parseFloat($('.px-carousel-container .px-carousel-item')[pi].getBoundingClientRect().width.toFixed(2)) + margin;
            }
        }
        var carousel_wrapper_width = $('.px-carousel-wrapper').outerWidth();
        $('.px-carousel-container').css({
            'width': sumando_ancho + "px"
        });


        return sumando_ancho;
    }
    $('.px-carousel-container').css({
        'min-width': +$('.px-carousel-wrapper').outerWidth() + 'px'
    });

    function posiciones() {
        var position_items = [0];
        var sumando_posicion = 0;
        for (var pi = 0; pi < all_divs; pi++) {
            if (pi > 0) {
                if (is_rtl()) {
                    sumando_posicion += parseFloat($('.px-carousel-container .px-carousel-item')[pi - 1].getBoundingClientRect().width.toFixed(2)) + margin;
                } else {
                    sumando_posicion += parseFloat($('.px-carousel-container .px-carousel-item')[pi - 1].getBoundingClientRect().width.toFixed(2)) + margin;
                }
                position_items.push(sumando_posicion);
            }
        }
        return position_items;
    }

    function getTranslate3d(el) {
        var values = el.style.transform.split(/\w+\(|\);?/);
        if (!values[1] || !values[1].length) {
            return [];
        }
        return parseFloat(values[1].split(/px,\s?/g)[0]);
    }


    if ($('.px-carousel-container').length) {

        document.getElementsByClassName('px-carousel-container')[0].addEventListener("touchstart", startTouch, {
            passive: true
        });
        document.getElementsByClassName('px-carousel-container')[0].addEventListener("touchmove", moveTouch, {
            passive: true
        });

        var initialX = null;
        var initialY = null;

        var rev = -1;

        function startTouch(e) {
            initialX = e.touches[0].clientX;
            initialY = e.touches[0].clientY;
            blu_ = 0;
        };

        var iniciado = 0;
        var trnas = 0;
        var blu_ = 0;

        function moveTouch(e) {
            var sumando_ancho = width_total();
            blu_++;

            if (blu_ == 1) {
                iniciado = e.touches[0].pageX;
                trnas = getTranslate3d(document.getElementsByClassName('px-carousel-container')[0]);
            }
            var currentX = e.touches[0].clientX;
            var currentY = e.touches[0].clientY;

            var diffX = initialX - currentX;
            var diffY = initialY - currentY;

            var translate_new = diffX * rev + trnas;

            if (is_rtl()) {
                if (translate_new > 0 && translate_new < sumando_ancho - $('.px-carousel-wrapper').outerWidth()) {
                    $('.px-carousel-container').css({
                        'transform': 'translate3d(' + translate_new + 'px, 0px, 0px)',
                        'transition': 'none'
                    });
                }
            } else {
                if ((translate_new * rev) > 0 && (translate_new * rev) < (sumando_ancho - $('.px-carousel-wrapper').outerWidth())) {
                    $('.px-carousel-container').css({
                        'transform': 'translate3d(' + translate_new + 'px, 0px, 0px)',
                        'transition': 'none'
                    });
                }
            }
            e.preventDefault();
        };
    }

    
    $(document).on('click', '.px-carousel-nav .px-next', function() {
    var sumando_ancho = width_total();
    var widthToMove = 4 * $('.px-carousel-item').outerWidth(true);
    var translate = getTranslate3d(document.getElementsByClassName('px-carousel-container')[0]);
    var newTranslate = translate - widthToMove;
    if (newTranslate <= -(sumando_ancho - $('.px-carousel-wrapper').outerWidth())) {
        newTranslate = -(sumando_ancho - $('.px-carousel-wrapper').outerWidth());
        $('.px-next').addClass('disabled');
    } else {
        $('.px-next').removeClass('disabled');
        $('.px-prev').removeClass('disabled');
    }
    $('.px-carousel-container').css({
        'transform': 'translate3d(' + newTranslate + 'px, 0px, 0px)',
        'transition': 'all 0.25s ease 0s'
    });
    });

    $(document).on('click', '.px-carousel-nav .px-prev', function() {
    var widthToMove = 4 * $('.px-carousel-item').outerWidth(true);
    var translate = getTranslate3d(document.getElementsByClassName('px-carousel-container')[0]);
    var newTranslate = translate + widthToMove;
    if (newTranslate > 0) {
        newTranslate = 0;
        $('.px-prev').addClass('disabled');
    } else {
        $('.px-prev').removeClass('disabled');
        $('.px-next').removeClass('disabled');
    }
    $('.px-carousel-container').css({
        'transform': 'translate3d(' + newTranslate + 'px, 0px, 0px)',
        'transition': 'all 0.25s ease 0s'
    });
    });
    function is_rtl() {
        if ($('html[dir=rtl]').length) {
            return true;
        }
    }

    function carousel_px(citem) {
        if (!$('.px-carousel').length) return false;

        let margin;
        if (is_rtl()) {
            margin = parseInt($('.px-carousel-item').css('margin-left'));
        } else {
            margin = parseInt($('.px-carousel-item').css('margin-right'));
        }


        let cd = (($('.px-carousel-wrapper').width()) / citem) - margin + (margin / citem);
        $('.home .px-carousel .px-carousel-item').width(cd.toFixed(2));
        

        let width_slide = $('.px-carousel-container');
        let scrollleft_slide = Math.round($('.px-carousel-container').scrollLeft());

        $('.px-carousel-container').scrollLeft(scrollleft_slide);
    }
    let detectViewPort = function() {
        width_total();
        let viewPortWidth = $(window).width();
        if (viewPortWidth <= 470) {
            carousel_px(3);
            } else if (viewPortWidth <= 540) {
            carousel_px(4);
            } else if (viewPortWidth <= 640) {
            carousel_px(4);
        } else if (viewPortWidth <= 740) {
            carousel_px(6);
            } else if (viewPortWidth <= 940) {
            carousel_px(8);
            
        } else {
            if( $(document).find('body').hasClass('sidg') ) {
                if( $(document).find('body').hasClass('full-width') ) {
                    carousel_px(3);
                } else {
                    carousel_px(2);
                }
            }
            else {
                if( $(document).find('body').hasClass('full-width') && viewPortWidth >= 1100 ) {
                    carousel_px(7);
                } else {
                    carousel_px(10);
                }
            }
        }

    };
    detectViewPort();
    $(window).resize(function() {
        detectViewPort();
    });
    
2
  • There's nothing here that's specific to WordPress. You might have better luck on Stack Overflow or Webmaster SE.
    – Pat J
    Mar 30 at 1:24
  • What does it tell you? Is there a console.log error? Any sort of message? Apr 1 at 1:04

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.