7월27일49일차 - 웹코딩2(게임) 반응형

반응형으로 변환하기 위해 slick 슬라이드의 설정을 변경해주는 것에 어려운 점이 많았습니다.

[220720 웹코딩(게임)] [ html / css / js ]

slick 슬라이드 두 개를 연동하고, 표시되는 화면을 변환하는 버튼을 구현했습니다.

  var num = 0;

  $(".slider").on("afterChange", function (e, s, c) {

    num = c;

  });

  $(".infoSlideBtn .prev").on("click", function () {

    $(".titleSlider").slick("slickPrev");

    $(".description")

      .children()

      .eq((num - 1) % 4)

      .addClass("on")

      .siblings()

      .removeClass("on");

  });

width가 769보다 작을 경우에는 slick slide의 속성을 변경할 필요가 있었습니다.

화면 사이즈가 바뀜에 따라 slick이 오류가 나는 것을 

unslick으로 한 번 작동을 멈추고 그 뒤에 다시 slick을 만들어주는 방법으로 구현했습니다.

  function promoSlideResponsive() {

    var screenWidth = $(window).width();

    var scrWLow = screenWidth < 769;

    // promo 슬릭을 centerMode로 전환합니다.

    if (scrWLow) {

      $(".promotionSlider").slick("unslick");

      $(".promotionSlider").slick({

        arrows: true,

        centerMode: true,

        centerPadding: "10%",

        slidesToShow: 1,

        swipeToSlide: true,

      });