상세 컨텐츠

본문 제목

[Slide Slick] 01. 자동 슬라이더 기본 형태

JQuery Plug in

by kwanghyup 2021. 10. 26. 10:57

본문

1. CDN 

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

 

2. 기본구조 

<div class="continaer">
  <div class="visual">
    <div><img src="img/visual_bg.jpg" alt=""></div>
    <div><img src="img/visual_bg2.jpg" alt=""></div>
    <div><img src="img/visual_bg3.jpg" alt=""></div>
  </div>
</div>

 

3. 스크립트

$('.visual').slick({
	autoplay : true, // 기본값  false 
	autoplaySpeed : 1000, // 기본값 3000
});

 

4. CSS 

@charset "utf-8";
 
.continaer { /* 비주얼 영역을 가운데 정렬하기 위한 컨테이너 */ 
    max-width: 1920px; margin: 0 auto; outline: 1px solid red;
}
.slick-arrow {  /* 컨트롤 버튼 공통 */
    position: absolute;
    top: 50%;
    left: 4%;
    z-index: 10; 
    width: 72px;
    height: 72px;
    text-indent: -9999px;
    border: none;
}
.slick-next { /* 다음 컨트롤러 */
    right: 4%; 
    left: unset;
    background: url(/img/visual_rbtn.png) no-repeat rgba(0 ,0, 0, 0.4);
}
.slick-prev { /* 이전 컨트롤러 */
    background: url(/img/visual_lbtn.png) no-repeat rgba(0 ,0, 0, 0.4);
}

 

 

 

저작자표시

'JQuery Plug in' 카테고리의 다른 글

[Slick Slider] 06. 이전 다음 버튼 직접만들기  (0) 2021.10.31
[Slick Slider] 05. 정지버튼, 다시재생버튼  (0) 2021.10.27
[Slick Slider] 04. appnedArrows, appendDots 사용법  (1) 2021.10.26
[Slick Slider] 03. 점으로 표현된 인디케이터 만들기  (0) 2021.10.26
[Slide Slick] 02. 슬라이더 컨트롤러 이전 다음 버튼 html문서에 재정의  (0) 2021.10.26

관련글 더보기

댓글 영역

티스토리툴바