私はjqueryのAjaxの成功で滑らかなスライダを初期化し、ページをリロードしたときに、私は、データをAJAX呼び出しを使用して、私の滑らかなスライダのデータをロードしますがよ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>

で滑らかなスライダデータをロードします表示されず、ページを最初に読み込んだときにデータを表示するために前後にクリックする必要があります。 ガイダンスをいただければ幸いです。

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

    } 
}); 

UPDATE

あなたは新しいものを追加して交換したいすべてのスライドを削除し、.slick("slickAdd")する.slick('slickRemove')を使用することができます。

$('.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); 

    } 
});