[slick] slick 슬라이드 row

html 구조 순서대로

이미지1 -> 이미지2 -> 이미지3 ->이미지4 > 이미지A -> 운동시설B -> 이미지C ->이미지D

입니다.

 

이미지로 넣었으면 중간에 구간 식별이 더 쉬었을텐데

이미지대신 배경 핑크색을 넣어서 중간 구별이 안가는것 같아 글씨를 추가했습니다.

 

slick slide 옵션

rows : 2 -> 세로로 2줄

slidePerRow:3 ->  slidesToScroll 과 같은 옵션인것 같다.

( slidesToShow: 3, -> 보여지는 슬라이드 갯수

slidesToScroll: 3 -> 스크롤 넘겼을때 넘어가는 슬라이드 갯수 )

arrows -> 이전/다음버튼 추가

dots -> 페이징 버튼

infinite ->  슬라이드 갯수에 상관없이 무한반복

$(document).ready(function(){
  $('.slick1').slick({
    rows: 2,
    slidesPerRow: 3,
    arrows: false,
    dots:false,
    infinite:true
  });
});

<div id="product">
  <div class="product_inner">
    <h2><b>이미지</b>추가</h2>
    <div class="slider_wrap">
      <div class="slick1">
        <div class="slidewidth">
          <h3>이미지 1</h3><img src="" alt="">
        </div>
        <div class="slidewidth">
          <h3>이미지 2</h3> <img src="" alt="">
        </div>
        <div class="slidewidth">
          <h3>이미지 3</h3><img src="" alt="">
        </div>
        <div class="slidewidth">
          <h3>이미지 4</h3><img src="" alt="">
        </div>
        <div class="slidewidth">
          <h3>이미지 A</h3><img src="" alt="">
        </div>
        <div class="slidewidth">
          <h3>운동시설 B</h3><img src="" alt="">
        </div>
        <div class="slidewidth">
          <h3>이미지 C</h3><img src="" alt="">
        </div>
        <div class="slidewidth">
          <h3>이미지 D</h3><img src="" alt="">
        </div>
      </div>
    </div>
  </div>	
</div>

#product{background:#dfdfdf; padding:70px 0;}
.product_inner{width:1200px; margin:0 auto; }
.product_inner h2{font-size:32px; color:#444; line-height:1; text-align:center;}
.product_inner h2 b{color:hotpink;}
.slider_wrap{height:560px; margin-top:30px; font-size:0px;}
.slidewidth{position:relative; height:270px;  overflow:hidden; }
.slidewidth img{display:inline-block; width:100%; height:100%; background-color:pink;}
.slidewidth h3{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:24px; color:#fff; line-height:1;}
.slick-list {margin:-10px;}
.slick-slide > div + div {margin-top:20px;}