5월31일 12일차 - slick 슬라이드 버튼 구현 [jquery]

6월 1일은 공휴일입니다. 공부 외에도 해야할 일이 있어서 바쁘기 때문에 주중의 휴일이 무척 달콤하게 다가옵니다.

개인적인 일이 이제 곧 끝납니다. 이번 주 목요일부터는 09:00~18:00 수업으로 전환되기 때문에 수업 내용을 복습하는 것 만으로도 바쁠 것 같습니다. 여유가 될 때마다 코딩 문제풀이도 할 수 있도록 해야겠습니다.

 

slick과 jquery로 이전슬라이드, 다음슬라이드 버튼, 선택한 슬라이드로 바로 이동하는 버튼을 구현했습니다.

[수업 중 구현한 버튼 slide 페이지 주소입니다.]

---

 

slick 다운로드와 설정 방법입니다.
https://kenwheeler.github.io/slick/

slick을 다운로드 받고 압축을 풉니다. 아래의 파일을 복사해서 폴더 안에 붙여넣으면 됩니다.
slick.css
slick.min.js

슬릭 구현은 간단합니다. div 안에 넣은 뒤 jquery로 div를 선택하고 .slick()을 해주면 끝입니다.
    <div class="test_slick">
        <div class="itm">01</div>
        <div class="itm">02</div>
        <div class="itm">03</div>
    </div>
$(function(){
    $('.test_slick').slick();
})

---

슬라이드를 구현해봅니다.
slick은 자식이 많아지기 때문에 번호로 선택하기 어렵습니다. nth-child 를 이용하지 말고 class로 선택합니다.

shortcut
figure.itm0$.itm*3
    <section class="main_visual">
        <div class="main_slider">
            <figure class="itm01 itm"></figure>
            <figure class="itm02 itm"></figure>
            <figure class="itm03 itm"></figure>
        </div>
    </section>
figure에 background가 깔리게 되는데 높이가 필요합니다.
.main_visual .main_slider figure {
    height: 600px;
}
이미지를 background에 줍니다.
.main_visual .main_slider .itm01 {
    background: url(../img/mainvisual01.jpg);
}
background 사이즈를 조절합니다. cover로 이미지가 박스를 가득 채우도록 합니다.
.main_visual .main_slider .itm01 {
  background: url(../img/mainvisual01.jpg) no-repeat center center/cover;
}

---

js 설정을 합니다.
dots 는 각각의 슬라이드에 해당하는 위치로 이동하는 버튼을 만듭니다.
$(function () {
  $(".main_slider").slick(){
      dots: true,
  };
});

---

화살표 버튼을 만듭니다. 검사를 통해 class로 버튼을 찾을 수 있습니다. 
.main_visual .main_slider .slick-arrow {
    color: #f00;
}
슬라이드가 position: relative; 되어 있습니다. 버튼의 position을 absolute로 바꿉니다.
previous 버튼이 이미지보다 뒤로 가 있기 때문에 z-index: 999;를 주어 올려줍니다.
.main_visual .main_slider .slick-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}
margin으로 거리를 벌려 화살표의 위치를 조절합니다.
.main_visual .main_slider .slick-prev {
    margin: 0 0 0 -600px
}
.main_visual .main_slider .slick-next {
    margin: 0 0 0 600px
}
화살표를 만듭니다.
.main_visual .main_slider .slick-arrow {
    width: 100px;
    height: 100px;
    font-size: 0;
    border: none;
    outline: none;
    background: transparent;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
}
.main_visual .main_slider .slick-prev {
  margin: 0 0 0 -600px;
  transform: rotate(-45deg);
}
.main_visual .main_slider .slick-next {
  margin: 0 0 0 600px;
  transform: rotate(135deg);
}
화살표의 위치가 중간보다 내려가있습니다. transform을 두 번 적용하였기 때문에 위에서 적용하였던 translate(-50% -50%);이 적용이 안되었습니다. transfrom을 합쳐줍니다.
.main_visual .main_slider .slick-prev {
  margin: 0 0 0 -600px;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.main_visual .main_slider .slick-next {
  margin: 0 0 0 600px;
  transform: translate(-50%, -50%) rotate(135deg);
}

---

dots를 하단 버튼으로 만듭니다.
.main_visual .main_slider .slick-dots {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}
.main_visual .main_slider .slick-dots li {
    display: inline-block;
    width: 80px;
    height: 5px;
    background: #333;
    margin: 0 3px;
}
.main_visual .main_slider .slick-dots button {
    display: none;
}
현재 슬라이드의 버튼 색을 바꿉니다.
.main_visual .main_slider .slick-dots li.slick-active {
    background: #f00
}

---

슬라이드에 글씨를 넣습니다.
        <figure class="itm01 itm">
          <div class="inner">
            <h3>01.Lorem ipsum dolor sit amet.</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />Et
              pariatur nostrum magnam quos vitae ad.
            </p>
            <a href="">more</a>
          </div>
        </figure>
position: absolute; 로 위치를 잡아줍니다.
.main_visual .main_slider .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
}
figure마다 position: relative;를 설정합니다.
.main_visual .main_slider figure {
    position: relative;
  height: 600px;
}
글자에 shadow를 줍니다.
.main_visual .main_slider .inner {
    color: #fff;
    text-shadow: 0 0 5px;
}
폰트를 조절합니다.
.main_visual .main_slider .inner h3 {
    font-size: 50px;
    font-weight: 700;
    margin: 0 0 20px 0;
}
more 버튼을 만듭니다.
.main_visual .main_slider .inner a {
    display: inline-block;
    padding: 5px 30px 10px 30px;
    background: #333;
    border: 1px solid #fff;
}

---

js로 글자가 올라오는 애니메이션을 만듭니다. c는 현재 페이지를 나타냅니다.
  $(".main_slider").on("afterChange", function (e, s, c) {
    console.log(e, s, c);
  });
페이지 숫자를 나타나도록 해봅니다.
      <div class="num">1</div>
    </section>
  $(".main_slider").on("afterChange", function (e, s, c) {
    console.log(e, s, c);
    $(".num").text(c + 1 + "/" + s.slideCount);
  });
새로고침 했을 때는 나타나지 않습니다. 항상 나올 수 있도록 합니다.  
이상하게 첫 페이지는 NaN이 출력되길래 삼항연산자로 수정을 합니다.
$(function () {
  $(".main_slider").on("init reInit afterChange", function (e, s, c) {
    console.log(e, s, c);
    $(".num").text((c ? c + 1 : 1) + " / " + s.slideCount);
  });
  $(".main_slider").slick({
    dots: true,
  });
});
글자가 올라오는 애니메이션을 만듭니다.
$(function () {
  $(".main_slider").on("init reInit afterChange", function (e, s, c) {
    console.log(e, s, c);
    $(".num").text((c ? c + 1 : 1) + " / " + s.slideCount);
    let cur = $(".slick-current");
    cur.addClass("xx").siblings().removeClass("xx");
  });
  $(".main_slider").slick({
    dots: true,
  });
});
transition: 0.5s 0.5s; 로 딜레이를 줄 수 있습니다.
.main_visual .main_slider figure a {
  transform: translateY(100px);
  opacity: 0;
}
.main_visual .main_slider figure.xx a {
transform: translateY(0);
opacity: 1;
transition: 0.5s 1s;
}

---

js 자동으로 슬라이드가 넘어가도록 합니다.
  $(".main_slider").slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: 4000,
    mouseOnHover: false,
    mouseOnFocus: false,
  });
transition이 hover에도 적용되어서 천천히 색상이 변합니다.
특정 css에만 적용되도록 transition-property: 를 적용합니다.
.main_visual .main_slider figure.on a {
  transform: translateY(0);
  opacity: 1;
  transition: 0.5s 0.6s;
  transition-property: transform, opacity;
}

---

extention 
color highlight 색상이 글자의 배경에 담겨 눈에 띄도록 바꿔줍니다.

---