6월14일20일차 - 2중 슬라이드, 슬라이드 내용 바꾸기

[슬라이드 두 개를 asNavFor 기능을 이용하여 연결합니다.] 보다 멋진 슬라이드를 만들 수 있습니다.

슬라이드가 바뀜에 따라서 고정된 창의 내용이 바뀝니다.

js로 현재 슬라이드와 전체 슬라이드 넘버를 표시합니다.

정말 어렵지만 어려울수록 재밌습니다.

---

jquery문법 
addClass('on') > classList.add('on')
removeClass('on') > classList.remove('on')
toggleClass('on') > classList.toggle('on')
hasClass('on') > classList.contains('on')



icon을 만들 때는 box를 만들어 안에 넣습니다. 나중에 icon을 변경하더라도 css를 바꾸지 않아도 됩니다.
      <div class="slider_arrows">
        <i class="xi-arrow-left"></i>
        <i class="xi-arrow-right"></i>
        
        
slick("slickPrev") , slickNext : 이전, 다음 슬라이드로 가는 버튼 기능을 추가하는 방법입니다. 
  $(".slide01 .slider_arrows i:nth-child(1)").on("click", function () {
    $(".main_slider").slick("slickPrev");
  });
  
  
현재 슬라이드를 제외하고 나머지 슬라이드에 filter를 적용하여 회색으로 만듭니다.
우선 모든 슬라이드에 filter를 적용합니다.
.slide01 figure {
  padding: 0 30px;
  filter: grayscale(1);
}
slick-center가 붙은 현재 슬라이드는 grayscale(0); 을 적용합니다.
.slide01 figure.slick-center {
  filter: grayscale(0);
}


slick 요소들을 확인하는 방법입니다.
  $(".main_slider").on("afterChange", function (e, s, c) {
    console.log(e, s, c);
  });
잘 살펴보면 현재 슬라이드의 index를 반환하는 것을 확인할 수 있습니다.
{defaults: {…}, initials: {…}, animating: true, dragging: false, autoPlayTimer: 56, …} 0
{defaults: {…}, initials: {…}, animating: true, dragging: false, autoPlayTimer: 56, …} 1
전체 슬라이드의 갯수 또한 찾을 수 있습니다. 
slideCount: 3

 

슬라이드 카운트를 입력하려면 text() 를 이용하면 됩니다.
      $(".main_slider").on("afterChange", function (e, s, c) {
    console.log(e, s, c);
    $(".slide01 .box .num").text(c + 1 + " / " + s.slideCount);
  });

c 는 afterChange 함수로 인해서 최초에 새로고침을 하면 NaN 이 출력됩니다.
init 을 적용시켜 주면 최초에 브라우저를 방문할 때나 새로고침을 할 때에도 적용됩니다.
  $(".main_slider").on("init afterChange", function (e, s, c) {
삼항연산자로 c 가 없다면 1을 출력하도록 합니다.
    $(".slide01 .box .num").text((c ? c + 1 : 1) + " / " + s.slideCount);


class on을 활용해 슬라이드마다 글자 내용이 바뀌도록 해봅니다.
          <li class="on">01</li>
on이 붙은 li일 경우에만 보이도록 합니다.
.slide01 .content > li {
  display: none;
}
.slide01 .content > li.on {
  display: block;
}

현재 슬라이드의 li에는 on을 붙이고 형제들의 class on은 제거합니다.
    $(".slide01 .content>li").eq(c).addClass('on').siblings().removeClass('on')
.eq() : 선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다. 


슬라이드를 두 개 만들어 하나의 슬라이드는 현재 이미지를 크게 보여줄 수 있도록 합니다.
asNavFor 기능을 이용하면 슬라이드가 동기화됩니다.

하나의 버튼이나 슬라이드 동작으로 두 개의 슬라이드를 조작할 수 있습니다.
  $(".left_slider").slick({
    arrows: false,
    fade: true,
  });
  $(".right_slider").slick({
    arrows: false,
    slidesToShow: 4,
    asNavFor: ".left_slider",
  });