Ajax 호출 성공 후 Slik js 재초기화

Ajax 호출 성공 후 Slik js 재초기화

저는 회전목마 구현에 Slik을 사용하고 있으며, 페이지가 로드되면 모든 것이 정상적으로 작동합니다.제가 달성하려고 하는 것은 새로운 데이터를 취득하기 위해 Ajax에 전화를 걸었을 때, 저는 여전히 슬릭한 회전목마 구현을 원하지만, 지금은 그것을 잃어버리고 있다는 것입니다.

슬릭에 대한 요구를 함수에 넣었다.

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}

그리고 성공 콜백 내의 함수를 호출합니다.

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function() {
        slickCarousel();
      }
   });

하지만 함수가 호출되지 않습니다.이 js를 재초기화하려면 어떻게 해야 하나요?

언슬릭 방식을 사용해야 합니다.

function getSliderSettings(){
  return {
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  }
}

$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
  success: function() {
    $('.skills_section').slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
    $('.my-slide').remove(); /* Remove current slides elements, in case that you want to show new slides. */
    $('.skills_section').slick(getSliderSettings()); /* Initialize the slick again */
  }
});

가장 좋은 방법은 슬릭 슬라이더를 재초기화한 후 폐기하는 것입니다.

function slickCarousel() {
  $('.skills_section').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}
function destroyCarousel() {
  if ($('.skills_section').hasClass('slick-initialized')) {
    $('.skills_section').slick('destroy');
  }      
}

$.ajax({
  type: 'get',
  url: '/public/index',
  dataType: 'script',
  data: data_send,
  success: function() {
    destroyCarousel()
    slickCarousel();
  }
});

$('#slick-slider').slick('refresh'); //Working for slick 1.8.1

이거면 될 거야.

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').slick('reinit');
      }
});

주의: 이것이 맞는지 잘 모르겠습니다만, 한번 시도해 보시기 바랍니다.

이 있습니다.unslickcarousel을 초기화 해제하는 메서드이므로 다시 초기화하기 전에 이 방법을 사용해 보십시오.

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
    success: function() {
        $('.skills_section').unslick();  // destroy the previous instance
        slickCarousel();
      }
});

이게 도움이 됐으면 좋겠다.

이 코드를 써봐, 도움이 됐어!

$('.slider-selector').not('.slick-initialized').slick({
  dots: true,
  arrows: false,
  setPosition: true
});

에이잭스 콜이 시작되기 전에 회전목마에서 손을 떼야 했지만 이미 매끄러운 회전목마가 나오기 전에는 그렇게 할 수 없어요.그래서 변수를 0으로 설정하고 변경된 후에만 클릭하지 않고 실행합니다.

var slide = 0
if(slide>0)      
$('#ui-id-1').slick('unslick');

        $.ajax({
            //do stuff, here
        },
        success: function( data ) {

            $('#ui-id-1').slick();
            slide++;

        }

가장 좋은 방법은 다음 중 하나를 사용하는 것입니다.unslick설정 또는 기능(사용자의 slick 버전에 따라 다름)은 다른 답변에 나와 있지만 나에게는 효과가 없었습니다.이와 관련된 것으로 보이는 slick에서 오류가 발생하고 있습니다.

하지만 현재로선 효과가 있었던 것은slick-initialized그리고.slick-slider다음과 같이 slick을 다시 초기화하기 전에 컨테이너에서 클래스를 가져옵니다.

function slickCarousel() {
    $('.skills_section').removeClass("slick-initialized slick-slider");
    $('.skills_section').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
}

클래스를 삭제해도 삭제 이벤트가 시작되지 않지만(테스트되지 않았지만 의미가 있음) 나중에 발생합니다.slick()제대로 행동하라고 요구해 파괴의 계기가 없는 한, 당신은 착할 거야.

Slik carousel이 새로운 데이터를 새로 고치지 않고 이전 데이터에 새로운 슬라이드를 추가하는 문제에 직면했습니다. 문제를 해결할 수 있는 솔루션을 찾았습니다. 매우 간단합니다.

TL;DR
슬릭하지 않고 전달한 후 슬릭 회전목마 안에 렌더링되는 새 데이터를 할당하고 슬릭을 다시 초기화합니다.제겐 다음과 같은 단계가 있었습니다.

jQuery('.class-or-#id').slick('unslick');
myData = my-new-data;
jQuery('.class-or-#id').slick({slick-options});

주의:
만약을 위해 slick.js 웹사이트에서 구문을 확인합니다.또한 slick이 초기화되기 전에 unlick을 사용하지 마십시오.즉, 첫 번째 에이잭스 콜을 이렇게 간단하게 초기화합니다.
jquery('.my-class').slick({slick-options})
그리고 초기화되면 위의 단계를 수행합니다.if-else를 사용하는 것이 .

간다, 얘들아!그것은 나에게 도움이 되었다

$('.slick-slider').not('.slick-initialized').slick({
   infinite: false,
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   touchThreshold: 9
});

슬릭 버전: 1.8.0

 function getSliderSettings() {
                return {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    loop: true,
                    arrows: true,
                    dots: false,
                }
            }
    
    
    $.ajax({
            type: 'get',
            url: '/public/index',
            dataType: 'html',
            data: some_data,
            success: function(response) {
                    $('[data-role="slick-slider"]').slick('unslick');
                    $('[data-role="slick-slider"]').html($(response).html());
                    $('[data-role="slick-slider"]').slick(getSliderSettings());
              }
        });

요청을 호출한 후 슬릭 슬라이더를 초기화하도록 타임아웃을 설정합니다.

var options = {
    arrows: false,
    slidesToShow: 1,
    variableWidth: true,
    centerPadding: '10px'
}

$.ajax({
    type: "GET",
    url: review_url+"?page="+page,
    success: function(result){
        setTimeout(function () {
            $(".reviews-page-carousel").slick(options)
        }, 500);
    }
})

시작 시 슬릭 슬라이더를 초기화하지 마십시오.타임아웃이 있는 AJAX 후에 초기화합니다.그게 너한테 효과가 있을 거야.

언급URL : https://stackoverflow.com/questions/27795730/reinitialize-slick-js-after-successful-ajax-call