슬라이드 플러그인 Slick

티스토리 뷰

플러그인/slick

슬라이드 플러그인 Slick - API (1)

찐망고 2021. 8. 2. 18:32

728x90

안녕하세요..

찐망고입니다.

매일매일 포스팅하는 게 참 쉬운 게 아니네요..

자료는 많은데 취합해서 포스팅한다는 게.. 말이죠

오늘은 슬라이드 관련 포스팅을 해보려고 합니다.

마크업 퍼블리싱 블로그인데..

요소는 시멘틱 요소만 해놓고..

플러그인이라니...

요즘 제가 자주 쓰는 플러그인이 두 가지인데요

하나는 slick이 있고

또 하나는 swiper입니다.

머 나름 다른 것들도 많이 쓰긴 했지만요..

bx라거나 owl 이런 옛날 옛적 플러그인은 안녕..~

마크업을 할 때 사용하는 플러그인들은 더 강력한 애니메이션을 만들기 위한 도움을 줍니다

그들이 제공하는 API만 잘 사용하면 더 디테일한 슬라이드 작업이 가능하죠.

솔직히 제가 블로그를 만든 가장 큰 이유 중에 하나가

그런 것들을 제공하기 위해서도 한몫!!!

대신 마크업이나 API를 사용함에 있어 이렇게도 가능하다는 예시를 보여주는 것뿐이니

참고만 해주세요..😂

본론으로 들어가서 두 가지 플러그인 중 저는 slick플러그인을 사용해 볼 거고요..

swiper도 할 겁니다.

둘 다 할 거임..

기본 메인 슬라이드부터 볼까요?

일단 다운을 받아야 해요

본인이 작업하고 있는 폴더에 경로에 맞춰 잘 넣어줍니다.

그러고 보니 경로 관련 포스팅도 해야겠어요 나중에 ㅎㅎ

HTML에 마크업 할 땐

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick();
    });
  </script>

  </body>
</html>

위처럼 코드를 넣으면 기본 slick슬라이드가 완성됩니다.

slick의 기본값을 설정하면 기본적으로 들어가는 기능들이 있는데요.

양옆에 previous와 next로 보이는 arrows
끊기지 않고 계속 슬라이딩이 이어지는 infinite
터치로 슬라이드 모션이 가능한 touchMove
마우스로 움직이는 draggable

진짜 딱 기본이죠? slick-theme.css를 같이 연결하면 저 네모 박스애들한테 화살표도 들어갑니다~

arrows가 필요 없으면 API를 수정하러 가면 됩니다.

$(document).ready(function(){
  $('.slick-slider').slick({
    arrows: false,
    dots: true
  });
});

API를 이용해서 dots를 ture 처리하면 저렇게 슬라이드 개수만큼 slick-dots 리스트가 생성됩니다.

각 dots는 <li> 요소 안에 <button>으로 들어가 있어요

slick-theme.css를 연결 안 해서 직접 css로 동그란 도트 모양을 만들어볼게요

https://codepen.io/jjinMangKo/pen/mdmKGxj

완성된 dots가 추가된 슬라이드 구여

<img> 요소 대신 background속성으로도 가능하고,

.slick-slider {
  width: 100%;
}
.slick-slider img {
  width: 100%;
  height: auto;
}

슬라이드를 꽉 차게 작업하려면 width값을 100%로 주면 됩니다.

그런 경우 아무래도 img보다는 background속성이 조금 더 편하고요.

그리고 이어서 dots를 가지고 놀아보도록 할 거예요

그 작업은 다음 포스팅에 해볼게요~

728x90

'플러그인 > slick' 카테고리의 다른 글

슬라이드 플러그인 Slick - API(3) (0)	2021.08.08
슬라이드 플러그인 Slick - API(2) (0)	2021.08.03

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

글 보관함

마크업퍼블리싱그리고디자인

티스토리 뷰

슬라이드 플러그인 Slick - API (1)

'플러그인 > slick' 카테고리의 다른 글

티스토리툴바