使用 jquery ajax 调用加载光滑的滑块数据

Question

$(document).ready(function() {
    $.ajax({
        type : 'GET',
        url : '/delivery_places.json',
        dataType : 'json',
        success : function(data){
            console.log(data);
            for (var i = 0; i < data.restaurants.length; i++) {
                $('.slick_restaurant').append('<div><div class="ibox-content col-xs-12 col-sm-6 col-sm-offset-3"><h2>'+data.restaurants[i].name+'</h2><hr><div><div class="col-xs-12 poster"><img src="/image/reservation/HQ.jpg" class="img-responsive" title="'+data.restaurants[i].name+'" alt="'+data.restaurants[i].name+'"></div><div class="col-xs-12" style="margin-top:20px;"><div class="col-xs-12 col-sm-10 col-sm-offset-1"><i class="fa fa-map-marker fa-lg fa-lg"></i><address>'+data.restaurants[i].location+'</address></div></div><div class="col-xs-12" id="mealBtns'+i+'"></div></div></div></div>');
                    for (var j = 0; j < data.restaurants[i].vendors.length; j++) {
                        $('#mealBtns'+i).append('<h3><span class="label label-default">'+data.restaurants[i].vendors[j].name+'</span></h3><div class="btn-group btn-group-justified" id="btnNum'+i+j+'"></div>');
                        for (var z = 0; z < data.restaurants[i].vendors[j].meals.length; z++) {
                            $('#btnNum'+i+j).append('<a href="/delivery_places/'+data.restaurants[i].vendors[j].meals[z].delivery_place_id+'/reservations" class="btn btn-primary" id="dpid'+data.restaurants[i].vendors[j].meals[z].delivery_place_id+'">'+data.restaurants[i].vendors[j].meals[z].name+'</a>');
                        }
                    }
            }
            $('.slick_restaurant').slick({
              dots: true,
              infinite: true,
              slidesToShow: 1,
              slidesToScroll: 1
            });
        },
        error : function(err){
            console.log('Error');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reservation_slider">
    <div class="row restaurant_slider">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="ibox">
                <h1 class="text-center">
                   
                </h1>
                <div class="slick_restaurant">
                
                </div>
            </div>
        </div>
    </div>
</div>

我正在使用 ajax 调用加载我的光滑滑块数据，但是当我在 jquery ajax 成功中初始化光滑的滑块并重新加载页面时，数据没有显示，我应该只向后或向前单击以查看数据，而不是何时页面第一次加载。任何指导将不胜感激。

Answer 1

您需要在使用 ajax 调用之前“取消滑动”滑块，然后再次重新初始化它。

var $opts = {
    dots: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1
}

$('.slider').slick('unslick');

$.ajax({
    type: 'get',
    data: data,
    url: url,
    success: function( response ) {

        // reinitialize 
        $('.slider').slick($opts);

    }
});

更新

您可以使用.slick('slickRemove')删除所有要替换的幻灯片，然后.slick("slickAdd")添加新幻灯片。

$('.slider').slick('slickRemove');

$.ajax({
    type: 'get',
    data: data,
    url: url,
    success: function( response ) {

        $html = '<div>';
        $html = '<h3>Test</h3>';
        $html += '</div>';

        // Add new slide
        $('.slider').slick('slickAdd', $html);

    }
});