[slick] slick 슬라이드 (div border + border)

분명 bxslide에서는 잘됐던거 같은데 왜 slick으로 하려니까 안됐던건지 ㅠㅠ

이미지가 아닌 div에 border가 들어가고 하단에

버튼같은 역할을 하는 div에도 border가 들어가는데 이렇게 되니까

가운에 선이 큰 div와도 겹치고 하단 파란 버튼div와도 겹쳐서 해결방법을 엄청 고민했었다..

 

slick 옵션

autoplay -> 자동 슬라이드

(speed: 300 -> 슬라이드 돼는 빠르기를 지정하려면 추가하는 옵션)

$(document).ready(function(){
  $('.multiple-items').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: false,
    autoplay: true
  });
});

<div class="multiple-items">
  <div class="slider_list">
    <a href="" class="more">123</a>
  </div>
  <div class="slider_list">
    <a href="" class="more">123</a>
  </div>
  <div class="slider_list">
    <a href="" class="more">123</a>
  </div>
  <div class="slider_list">
    <a href="" class="more">123</a>
  </div>
  <div class="slider_list">
    <a href="" class="more">123</a>
  </div>
  <div class="slider_list">
    <a href="" class="more">123</a>
  </div>
  <div class="slider_list">
    <a href="" class="more">123</a>
  </div>
  <div class="slider_list">
    <a href="" class="more">123</a>
  </div>
  <div class="slider_list">
    <a href="" class="more">123</a>
  </div>
  <div class="slider_list">
    <a href="" class="more">123</a>
  </div>
</div>

.slick-list{margin-top:20px; }
.multiple-items{ position:relative; width:960px; margin:0 auto; height:500px; }
.multiple-items:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:beige; border:1px solid red;}
.slider_list{position:relative; height:500px;  }
.slider_list + .slider_list{border-left:1px solid red;}

.slick-current.slick-active a.more{left:0; width:calc(100% + 1px) }

a.more{position: absolute; left: -1px;  bottom: 0px; width:calc(100% + 2px);  height: 30px; border: 1px solid blue;  z-index: 100000;}

border를 전체 div를 감싸고 있는

.multiple-items 의 가상요소 :before로 준다.

가운데에 선은 .slider_list + .slider_list 를 이용하여 선을 추가한다.

 

하단 파란색 버튼의 border는 absolute로 띄우고

calc 값을 이용하여  빨간선 위로 올라오도록 한다.

 

.slick-current.slick-active 는 slick slide가 동작할때

슬라이드 제일 첫번째 div의 클래스가 추가되는것을 확인하고

첫번째 div에만 css를 추가해줬다..

이렇게 하지않으면 left:-1px를 줬기때문에 첫번째 div에 왼쪽 파란border가 짤려서 보이질않는다.