javascript - allow multi carousel in same page

admin管理员组

文章数量:1122832

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

本文标签： javascriptallow multi carousel in same page