Summary Block Carousel: Swipe

pay me to use code. Send me an email via this form if you have any problems.

Description: Swipe scroll on Summary Block Carousel

How to

• Add code to Code Injection > Footer
• With Personal/Basic Plan, use Markdown Block instead

#1. Swipe on Mobile only

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.summary-block-wrapper').each(function() {
        var $wrapper = $(this);
        var touchStartX = 0;
        var touchEndX = 0;
        var minSwipeDistance = 50;
        
        var $carouselContainer = $wrapper.find('.summary-item-list-container');
        var $prevButton = $wrapper.find('.summary-carousel-pager-prev');
        var $nextButton = $wrapper.find('.summary-carousel-pager-next');
        
        $carouselContainer.on('touchstart', function(e) {
            touchStartX = e.changedTouches[0].screenX;
        });
        
        $carouselContainer.on('touchend', function(e) {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        });
        
        function handleSwipe() {
            var swipeDistance = touchEndX - touchStartX;
            
            if (Math.abs(swipeDistance) > minSwipeDistance) {
                if (swipeDistance > 0) {
                    $prevButton.trigger('click');
                } else {
                    $nextButton.trigger('click');
                }
            }
        }
    });
});
</script>

#2. Swipe on both Desktop + Mobile

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.summary-block-wrapper').each(function() {
        var $wrapper = $(this);
        var touchStartX = 0;
        var touchEndX = 0;
        var mouseStartX = 0;
        var mouseEndX = 0;
        var isDragging = false;
        var minSwipeDistance = 50;
        
        var $carouselContainer = $wrapper.find('.summary-item-list-container');
        var $prevButton = $wrapper.find('.summary-carousel-pager-prev');
        var $nextButton = $wrapper.find('.summary-carousel-pager-next');
        
        $carouselContainer.on('touchstart', function(e) {
            touchStartX = e.changedTouches[0].screenX;
        });
        
        $carouselContainer.on('touchend', function(e) {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe(touchEndX - touchStartX);
        });
        
        $carouselContainer.on('mousedown', function(e) {
            isDragging = true;
            mouseStartX = e.pageX;
            e.preventDefault();
        });
        
        $(document).on('mousemove', function(e) {
            if (isDragging) {
                e.preventDefault();
            }
        });
        
        $(document).on('mouseup', function(e) {
            if (isDragging) {
                mouseEndX = e.pageX;
                handleSwipe(mouseEndX - mouseStartX);
                isDragging = false;
            }
        });
        
        function handleSwipe(swipeDistance) {
            if (Math.abs(swipeDistance) > minSwipeDistance) {
                if (swipeDistance > 0) {
                    $prevButton.trigger('click');
                } else {
                    $nextButton.trigger('click');
                }
            }
        }
    });
});
</script>