매끄러운 회전목마 크기가 조정되지 않음

매끄러운 회전목마 크기가 조정되지 않음

개발 중인 워드프레스 사이트에서 Slik.js 회전목마를 사용하고 있습니다.브라우저 창의 크기를 조정하면 회전목마가 맞지 않아 가로 스크롤 막대가 나타납니다.Slik를 시작하지 않으면 이미지 크기가 그에 따라 조정됩니다(유체 레이아웃에서 예상대로).

Slick은 인라인 스타일을 동적으로 주입하는데, 그 중 하나가 폭입니다.회전목마비의 모든 자디브에 걸친 폭을 볼 수 있습니다.매끄러운 인라인 스타일

Slik의 일반적인 동작은 창의 크기를 조정할 때 이러한 너비를 업데이트하는 것이지만, 어떤 이유에서인지 이 사이트에서는 이 작업이 수행되지 않습니다.

다음은 웹사이트 링크입니다.http://smart.trippple.com.br/

홈페이지에는 다음 위치에 2개의 회전목마가 있습니다.

1. main #syslog-home.syslog.syslog.syslog.
2. main #seguradoras .seguradoras - seguradoras - segurausel .seguras - seguras -

스크립트를 시작하는 방법은 다음과 같습니다.

  $('#slider-home .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    arrows: false,
    fade: true,
    slidesToScroll: 1,
    slidesToShow: 1,
    speed: 1000
  });

  $('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    centerMode: true,
    mobileFirst: true,
    pauseOnHover: false,
    slidesToShow: 4
  });

그리고 지금까지 제가 시도한 모든 것은 다음과 같습니다.

• jQuery와 Slick을 제외한 모든 스크립트를 비활성화하여 경합이 발생하지 않았는지 확인.
• 다양한 버전의 jQuery를 테스트했다.
• jQuery Migrate를 포함하려고 했습니다.
• 사이트 헤더에 jQuery + Slick을 로드하려고 했습니다.
• 컨테이너에서 회전목마 제거 시도;
• 스타일시트의 회전목마차에 폭과 최대폭을 설정하려고 했다.

• Slik의 크기 조정 방법을 사용하려고 했습니다.

  $(표준)resize(function() { $('#syslog-home .syslog-home').slick(슬릭); };

• 모든 곳을 조사하고 플러그인의 Github 페이지에서 이슈를 엽니다.플러그인 작성자는 스크립트의 크기가 확실히 조정되고 문제가 내 환경에 있다고 답했습니다.그는 옳습니다.테스트할 정적 HTML 페이지를 만들었는데 회전목마가 100% 응답했습니다.이 웹 사이트에는 스크립트의 정상적인 동작을 방해하는 무언가가 있습니다.

덧붙여서, Slik의 스타일시트는 사이트의 메인 스타일시트에 삽입되어 있기 때문에 링크되어 있지 않습니다.

어떤 도움이라도 정말 감사합니다!적어도 2주 정도 이 문제를 해결하려고 하는데, 또 뭘 해야 할지 모르겠어요.어떤 아이디어라도 환영합니다.감사해요!

슬릭 응답 옵션을 사용해 본 적이 있습니까?이것이 당신이 찾고 있는 답인지는 모르겠지만 브라우저 크기를 기준으로 슬라이더를 작동시키기 위해 제가 하는 것입니다.

$('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    centerMode: true,
    mobileFirst: true,
    pauseOnHover: false,
    slidesToShow: 4,
    //start responsive option
    responsive: [
    {
      breakpoint: 600, //at 600px wide, only 2 slides will show
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480, //at 480px wide, only one slide will show
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    ]
});

새로 고침 대신 크기 조정 작업을 수행하도록 업데이트됨

크기 조정 기능과 슬릭 기능 두 가지 기능이 필요합니다.

jQuery(window).on('resize', function() {

  clearTimeout(resizeTimerInternal)

  resizeTimerInternal = setTimeout(function() {
    //add functions here to fire on resize
    slickSliderWithResize();
  }, 100)

});


function slickSliderWithResize() {
  if (jQuery(window).width() < 1150) {
    if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {

    }
    else {
      jQuery('.slick-slider-wrapper').slick({
        // slick options
      });
    }
  } else {
    if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {
      jQuery('.slick-slider-wrapper').slick("unslick");
    }
  }
}
slickSliderWithResize();

크기 조정은 가능하지만 슬라이더에 맞게 편집해야 합니다.슬라이더 컨테이너 이름(슬릭-슬릭-슬릭-슬릭) 옵션 및 분해할 크기(1150px 미만으로 설정)

$('#slick-slider').slick('setDimensions');

크기를 조정한 후 또는 숨겨진 슬라이더를 표시한 후에 작동합니다.

이 방법은 공식 문서에서 사용할 수 없습니다.

창 크기 조정 시 slick 크기를 강제로 조정하면 다음과 같이 됩니다.

$(window).resize(function() {
  $('#slider-home .slider-session').slick('resize');
  $('#seguradoras-carrousel .slider-session').slick('resize');
});

저 같은 경우에는 사실 이미지 스트레칭이 빠져있었어요.

.slick-slide img {width: 100%;}

저도 최근에 같은 문제를 겪었는데 이렇게 해결했어요.창의 크기 조정 또는 방향 변경 이벤트에서 슬릭을 삭제하고 다시 만듭니다.

var slickOptions = {
    arrows: false,
    dots: true,
    adaptiveHeight: true,
    mobileFirst: true
};

$('.slick-element').slick(slickOptions);

$(window).on('resize orientationchange', function() {
    $('.slick-element').slick('unslick');
    $('.slick-element').slick(slickOptions);
});

$('#syslog-syslog').slick("set Dimensions");

$('#syslog-syslog')로 지정합니다.slick("set Position");

효과가 있다

언급URL : https://stackoverflow.com/questions/38755238/slick-carousel-wont-resize