[slick] slick 슬라이드 - 기본(+이전,다음버튼)

이전다음 버튼은 slick 슬라이드에서

prevArrow , nextArroow 옵션을 추가하면 된다.

$(document).ready(function(){
  $('.responsive').slick({
    dots: true,
    prevArrow: $('.prev'),
    nextArrow: $('.next'),
    infinite: false,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 1
  });
});

<div id="container">
  <h2>맛집사진 갤러리</h2>
  <p>맛집 & 핫플이 필요하신 경우 연락주세요. 언제든지 환영합니다.</p>
</div>

<div class="content">
  <h3>slick 슬라이드</h3>
  <p>왼쪽은 파란색 배경 before<br>오른쪽을 슬라이드 입니다.</p>
  <div id="rolling">
  <div class="responsive">
    <div>
      <img src="https://placehold.it/432x432" alt="" />
    </div>
    <div>
      <img src="https://placehold.it/432x432" alt="" />
    </div>
    <div>
      <img src="https://placehold.it/432x432" alt="" />
    </div>
    <div>
      <img src="https://placehold.it/432x432" alt="" />
    </div>
    <div>
      <img src="https://placehold.it/432x432" alt="" />
    </div>
    <div>
      <img src="https://placehold.it/432x432" alt="" />
    </div>
    </div>
  </div>
  <div id="pager">
    <div class="prev">
   	 <span>이전</span>
    </div>
    <div class="next">
      <span>다음</span>
    </div>
  </div>
</div>

#container{width:1500px; margin:50px auto 0; }
#container h2{font-size:44px; color:#444; line-height:1; text-align:center;}
#container p{font-size:20px; color:#444; font-weight:bold;  line-height:1; text-align:center; margin-top:10px;}
.content{position:relative; width:1500px; margin:50px auto 0; padding:50px 0;}
.content:before{content:""; position:absolute; top:0; left:50%; margin-left: -960px;   width:1115px; height:460px; background:#2668d2; z-index:-1;}
.content h3{font-size:32px; color:#fff; line-height:1;}
.content p{font-size:14px; color:#fff; margin-top:20px; }
#rolling{position:absolute; top:60px; left:50%; margin-left:-400px; width:1390px; height:432px;  border:1px solid red;}
#pager{position:absolute; left:0; bottom:0;}

.slick-dots {margin-top:10px;  padding: 0; text-align:center;}
.slick-dots li {display: inline-block;margin-left: 4px; margin-right: 4px;}
.slick-dots li.slick-active button {background-color: black;}
.slick-dots li button {width:15px; height:15px; background-color: #999; border-radius: 50%; text-shadow: none; color: transparent;  border: none;  font: 0;}
.slick-dots li :hover {background-color: black;}

/* Custom Arrow */
.prev{display:inline-block; width:30px; height:30px; background:black; }
.next{display:inline-block; width:30px; height:30px; background:red;}

 왼쪽 파란 배경은 가상클래스로 설정했고,

슬라이드를 감싸고 있는 #rolling을 absolute 로 띄워 오른쪽에 배치한다.