Question

我尝试用光滑的方式实现一个简单的轮播，但是旋转木马项目应该每隔几秒通过AJAX刷新一次。

问题是在刷新内容后光滑制动。另外在我的控制台中我没有收到任何错误。

所以我的HTML看起来像这样：

<div class="live-carousel" data-slick="off">
    <div class="score-container">
        <div class="item">
            <div class="score">
                <p>
                    <a href="#">Team A</a> <span>0</span>
                </p>
                <p>
                    <a href="#">Team B</a> <span>2</span>
                </p>
                <span class="has_info"></span>
            </div>
            <div class="info">
                <dl>
                    <dt><a href="#">Team A</a></dt>
                    <dd>Player name <span>12'</span></dd>
                </dl>
            </div>
        </div>
    </div>
</div>

通过AJAX请求，我在.score内创建了多个.score-container项，这就是为什么我使用浮油使它们显示为轮播。

我的javascript代码是这样的：

var getLive = function() {

var $score_flipping_cards = $( '#score_flipping_cards' );
var $live_carousel = $('.live-carousel');
var $slick = null;

if ( 0 < $score_flipping_cards.length ) {
    $.ajax(
        {
            url     : z.ajaxurl,
            type    : 'POST',
            data    : {
                action : 'get_live'
            },
            success : function ( data, textStatus, jqXHR ) {
                var $template = _.template( $score_flipping_cards.html() );
                var $counter  = 0;

                if ( null !== $slick ) {
                    $live_carousel.slick('unslick');
                }

                $live_carousel.empty();

                var a = $.map(data, function(value, index) {
                                        return [value];
                });

                _.each(
                    a,
                    function( $match ) {
                        _.each(
                            $match,
                            function( $game ) {
                                var $goals = [];
                                var $template_data = {};

                                ++$counter;

                                $template_data.livePage = $game.livePageURL;
                                $template_data.team_a = $game.TeamAName;
                                $template_data.team_a_score = $game.TeamAScore;

                                $live_carousel.append( $template( $template_data ) );

                                if( $match.length === $counter ) {
                                        $slick = true;
                                        make_slick($live_carousel);
                                    }
                                }
                            );
                        }
                    );
                }
            }
        );
    }
};

getLive();

setInterval(
    getLive,
    8000
);

我的光滑启动功能就是这样：

var make_slick = function ($live_carousel) {
        $live_carousel.slick (
            {
                accessibility : true,
                autoplay : true,
                cssEase : 'ease-in-out',
                easing : 'ease-in-out',
                lazyLoad : 'progressive',
                infinite       : true,
                slidesToShow   : 5,
                slidesToScroll : 5,
                dots           : true,
                speed          : 300,
                responsive     : [
                    {
                        breakpoint : 1024,
                        settings   : {
                            slidesToShow   : 5,
                            slidesToScroll : 5
                        }
                    },
                    {
                        breakpoint : 600,
                        settings   : {
                            slidesToShow   : 3,
                            slidesToScroll : 3
                        }
                    },
                    {
                        breakpoint : 480,
                        settings   : {
                        slidesToShow   : 1,
                        slidesToScroll : 1
                    }
                }
            ]
        }
    );
};

正如你所看到的，如果旋转木马已被启动，我取消了旋转木马，并在物品被附加到我的旋转木马容器后再次启动光滑的旋转木马。

页面第一次加载轮播时，它正常启动，但在第二次ajax调用轮播后刹车。

有人可以帮忙吗？

用ajax刷新内容后，它会刹车

0 个答案: