[메이크샵] 슬라이드 플러그인 (slick)

카페24 쇼핑몰에 손쉽게 사용가능한 슬라이드플러그인(FlexSlider2)을 소개해드렸는데요

여러 기능들을 사용하시려면 다른 슬라이드플러그인도 알아두는게 유용합니다~ㅋ

 

메이크샵에서는 jQuery 1.7.2. 버전이 내장되어 있습니다.

그나마 카페24보단 높은 버전이라 슬라이드플러그인을 사용하기가 그나마 나은편입니다.

 

slick slider

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

메뉴중에 get it now을 클릭하시면 다운로드 버튼을 찾으실수있어요

다운로드 받으시고 압축을 푸시면 여러가지 파일을 보실수있는데요

slick 다운로드폴더

slick 폴더

index.html 파일을 클릭하시면 예제를 보실수 있고 slick폴더는 css, js파일을 보실수 있습니다.

그리고 제일 중요한 파일은 slick.css, slick.js 파일입니다.

 

홈페이지에서 CDN을 제공하고 있는데요~

 

- jsDelivr CDV

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

 

위의 소스를 사용하셔도 됩니다~

다만 혹시 모르기 때문에 자기계정의 FTP에 파일을 직접 올려서 사용하시는걸 추천해요ㅋ

 

 

<메이크샵 사용법>

 

1. 디자인편집창 > 상단폴더 > 기본상단

 

<link rel="stylesheet" type="text/css" href="/design/<!--/shop_id/-->/slick.css">
<script type="text/javascript" src="/design/<!--/shop_id/-->/slick.js"></script>

 

위의 디자인 편집탭에 넣어주세요.

<!--/shop_id/--> : 계정아이디

 

jQuery파일은 메이크샵내에 탑재되어있으니 따로 넣으실 필요없어요 ㅎㅎ

 

 

 

2. 슬라이드를 넣기 원하는 디자인편집탭에 넣어주세요

 

HTML

<div class="slick_box">
<div class="slick_slider">
<div class="item">slider1</div>
<div class="item">slider2</div>
<div class="item">slider3</div>
</div>
<span class="prev">좌측버튼</span><span class="next">우측버튼</span>
</div>

 

 

 

3. 슬라이드를 넣기 원하는 js탭에 넣어주세요

 

(function($) {
$(function(){

$('.slick_slider').slick({
dots: false, //하단 0000부분
infinite: true, //끝의이미지에서 끝나지않고 다시 앞으로 이동
autoplay: true, //오토플레이
autoplaySpeed: 5000, //다음이미지로 넘어가는 시간
speed: 300, //다음이미지로 넘겨질때 걸리는시간
slidesToShow: 1,  //화면에 보여지는 이미지 개수
slidesToScroll: 1, //슬라이드 이동할 이미지 개수
prevArrow: '.slick_box .prev', // 좌측 버튼
nextArrow: '.slick_box .next', // 우측 버튼
});

});

})(jQuery);

 

 

4. 슬라이드를 넣기 원하는 css탭에 넣어주세요

 

.slick_box{position:relative;}
.slick_box .prev{position:absolute;left:0;top:50%;margin-top:-10px;width:20px;height:20px;color:#000;font-size:15px;}
.slick_box .next{position:absolute;right:0;top:50%;margin-top:-10px;width:20px;height:20px;color:#000;font-size:15px;}
.slick_slider .item{width:100%;height:200px;background:#ddd;text-align:center;padding-top:100px 0 0;}

 

위의 css는 필요한것들만 넣은건데요

저렇게만 넣어줘도 slick.css가 있으니 잘 적용이 됩니다.