jQuery垂直轮播滚动问题

Question

我在垂直滚动传送带上遇到问题。我为此使用JQuery，HTML和CSS。想法是使它在垂直运动中无限滚动，我也尝试了一些JQuery插件，但到目前为止，当前的JQuery代码都可以滚动但没有过渡。

 var car_ul = $('#carousel');
    
    function scroll_down() {
        $('#carousel:not(:animated)').animate({
            'translate3d': parseInt(car_ul.css('translate3d')) - car_ul.find('.r-8').outerHeight() - 10
        }, 500, function() {
            var cars = car_ul.find('.r-8');
            cars.last().before(cars.first());
            car_ul.css({
                'translate3d': '0px, 0px, 0px'
            });
        });
    }
    var interval_id = setInterval(function() {
        scroll_down();
    }, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="recent-purchases">
    <div class="r-1">
        <div class="r-2">
            <div class="r-3"> </div>
        </div>
        <div class="r-4">
            <div class="r-5">
                <div class="r-6">
                    <div class="r-7" id="carousel">
                        
                        <!-- Scroll Content Start -->
                        <div class="r-8">
                            <a href="" class="r-9">
                                <div class="r-10"> <span class="r-11">Purchases</span> <span class="r-12">John purchased smart band</span> </div>
                                <div class="r-13"> <span class="r-14">Purchases</span> <span class="r-15">in florida for $15</span> </div>
                            </a>
                            <div class="r-16">
                                <div class="r-17"> </div>
                                <div class="r-18"> </div>
                            </div>
                        </div>
                        <!-- Scroll Content End -->
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我要达到的目标的示例在此处https://h5.m.taobao.com/