jQuery

[JQuery] slick slider 라이브러리 사용법

OOQ 2023. 6. 20. 10:55
728x90
SMALL

우리가 홈페이지를 만들다 보면 슬라이드 기능이 필요할 때가 있다.

홈페이지 메인화면에 종종 쓰이는 그러한 슬라이드 기능들 말이다.

 
 

나 역시도 그런 기능들을 찾다가 우연히 반응형 웹을 지원하는 슬라이더 라이브러리를 발견하게 되어서 이번에 공유를 해보고자 한다.

​

만들 수 있는 슬라이더의 형태는 다양하니 꼭 홈페이지에 들어가서 원하는 스타일을 찾아 적용하길 바란다.

Slick 다운로드 및 파일 URL

 

이곳에 들어가 상단의 get it now를 클릭하게 되면 download 할 수 있는 버튼이 있는 곳으로 이동하게 된다.

그 파일을 다운받아서 사용하거나 그 아래의 CDN 주소를 따서 사용하면 된다.

CDN 주소는 JQuery를 사용할 때와 마찬가지로 <head> 태그 안에 링크해주면 사용할 수 있다.

 
CSS
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
 
JS
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 

 

slick 사용법

slick slider의 기본 HTML구성은 div태그 형태로 구성되어있는 HTML문서를 슬라이드 형태로 변경을 해준다.

​

다시 말해서 기본적으로 슬라이드를 적용하고 싶은 것들을 div형태로 만들어 놓으면 그 div를 토대로 슬라이드 형태로 전환시켜 준다는 것이다.

오늘 내가 적용해 볼 코드는 다음과 같다. auto play로 페이지 넘기는 버튼을 따로 눌러주지 않아도 자동으로 넘어가는 기능이다.

​

내가 사용할 기본 코드는 다음과 같이 만들어 주었다.

 
 
 
//HTML
<div class="post-slider">
      <h1 class="sider-title">Treding Posts</h1>
      <div class="post-wrapper">
            <div class="post">1</div>
            <div class="post">2</div>
            <div class="post">3</div>
            <div class="post">4</div>
            <div class="post">5</div>
       </div>
</div>
 
//CSS
.post-slider{ border:1px solid red; }
.post-slider .post-wrapper {
       width:84%;
       height:350px;
       margin:0px auto;
       border:1px dashed red;
}
.post-slider .post-wrapper .post{
        width:300px;
        height:350px;
        display:inline-block;
        background:gray;
}
 
 
 

위와 같이 만들어 놓은 기본 코드에 위 사이트에 있는 다음 코드를 자바스크립트 안에 넣어준다.

(단 복사 시 $() 괄호 안에 적용하고자 하는 div를 묶고 있는 바깥 div에 적용을 시킨다. )

 
 
$('.post-wrapper').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
});
 
 

이렇게 스크립트 역시 작성해 주면 아래의 gif사진을 보듯이 혼자서 자동으로 슬라이드가 넘어가는 것을 볼 수 있다.

autoplay모드가 적용모습을 확인할 수 있다.

이런 식으로 응용을 하여서 다음과 같이 슬라이더를 제작할 수 있다.

대충 간단하게 기능만 넣어본 슬라이더.

<HTML>

 
 
<div class="page-wrapper" style="position:relative;">
      <!--page slider -->
      <div class="post-slider">
            <h1 class="silder-title">Trending Posts</h1>
            <i class="fas fa-chevron-left prev"></i> //왼쪽 방향 버튼
            <i class="fas fa-chevron-right next"></i> //오른쪽 방향 버튼
            <div class="post-wrapper">
            <div class="post">
                  <img src="img/paris.jpg" class="slider-image">
            <div class="post-info">
                  <h4><a href="#" class="post-subject">Lorem ipsu eiusmod tempor incididunt ut </a></h4>
                  <i class="far fa-user" style="height:10%;">Awa Melvine</i>
            </div>
      </div>
      <div class="post">
            <img src="img/architecture.jpg" class="slider-image">
            <div class="post-info">
                  <h4><a href="#"> Commodo odio aenean sed </a></h4>
                  <i class="far fa-user" style="height:10%;">Awa Melvine</i>
            </div>
      </div>
      <div class="post">
            <img src="img/paris.jpg" class="slider-image">
      <div class="post-info">
            <h4><a href="#">Quis hendrerit dolor magna eget est lorem ipsum dolor sit. </a></h4>
            <i class="far fa-user" style="height:10%;">Awa Melvine</i>
      </div>
</div>
      <div class="post">
            <img src="img/gyungju.jpg" class="slider-image">
      <div class="post-info">
      <h4>
            <a href="#">Elit at imperdiet dui accumsan sit.</a>
      </h4>
      <i class="far fa-user" style="height:10%;">Awa Melvine</i>
</div>
</div>
</div>
</div>
<!--post slider-->
</div>
 
 

<CSS>

 
/*post slider*/
.post-slider{
      width:70%;
      margin:0px auto;
      position:relative;
}
.post-slider .silder-title{
      text-align:center;
      margin:30px auto;
}
.post-slider .next{
      position:absolute;
      top:50%;
      right:30px;
      font-size:2em;
      color:gray;
      cursor: pointer;
}
.post-slider .prev{
      position:absolute;
      top:50%;
      left:30px;
      font-size:2em;
      color:gray;
      cursor: pointer;
}
.post-slider .post-wrapper{
      width:84%;
      height:350px;
      margin:0px auto;
      overflow: hidden;
      padding:10px 0px 10px 0px;
}
.post-slider .post-wrapper .post{
      width:300px;
      height:300px;
      margin:0px 10px;
      display:inline-block;
      background:white;
      border-radius: 5px;
}
.post-slider .post-wrapper .post .post-info{
      font-size:15px;
      height:30%;
      padding-left:10px;
}
.post-slider .post-wrapper .post .slider-image{
      width:100%;
      height:175px;
      border-top-left-radius:5px;
      border-top-right-radius:5px;
}
 
 

<JS>

 
$('.post-wrapper').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      nextArrow:$('.next'),
      prevArrow:$('.prev'),
});

​

728x90
LIST
저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

slick slider 옵션 한글 정리  (0) 2023.06.20
[jQuery] jQuery/Method/.empty() - method to clear the contents of the selected element  (0) 2022.09.10
[jQuery] jQuery/Method/.each() - Method that causes a function to run on each of the selected elements  (0) 2022.09.09
[jQuery] jQuery/Method/.detach() - Method to remove selected element from document and save  (0) 2022.09.08
[jQuery] jQuery/Method/.delay() - Method to pause (defer) a running function for a given amount of time  (0) 2022.09.07

'jQuery'의 다른글

  • 현재글[JQuery] slick slider 라이브러리 사용법

관련글

티스토리툴바