Skip to content

Instantly share code, notes, and snippets.

@kewang

kewang/slick.htm

Last active November 29, 2016 14:23
Show Gist options
  • Save kewang/f7027306105996bf043088e9c3750bd1 to your computer and use it in GitHub Desktop.
Save kewang/f7027306105996bf043088e9c3750bd1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
slick.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by Mu Chun Wang</title>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
</head>
<body>
<span class="prev-slick">&lt;</span>
<div class="slick">
<div>1 content</div>
<div>2 content</div>
<div>3 content</div>
<div>4 content</div>
<div>5 content</div>
<div>6 content</div>
</div>
<span class="next-slick">&gt;</span>
<script>
$(document).ready(function() {
$('.slick').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
prevArrow: $(".prev-slick"),
nextArrow: $(".next-slick"),
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
});
</script>
</body>
</html>
@kewang
Copy link
Author

kewang commented Nov 28, 2016 •
edited
Loading

官網：http://kenwheeler.github.io/slick/

  • L6：這是 slick 的 css，記得要加進來
  • L7：這是 jquery，記得要加進來
  • L8：這是 slick 的 js，因為 slick 是依附 jquery 執行的，所以記得要放在 jquery 下面才行
  • L12 ~ L19：就做一個 div，然後給一個 class name，這是到時候要給 slick 用的，不用真的給 css 的內容，因為 slick 會自己處理
  • L23 ~ L56：一定要放在 L7 跟 L8 的後面，因為要先讀取 jquery 跟 slick 檔案後才能執行 slick
    • L24：是說當 html, js, css 都讀取完之後才要做的事
    • L25：.slick 就是 L12 的 class name
    • L26 ~ L28：是說無限循環 (infinite)，然後一次要 show 幾個 (slidesToShow)，按一次前後要移動幾個 (slidesToScroll)
    • L29 ~ L30：$(".prev-slick") 跟 $(".next-slick") 是指 L12 跟 L21 的前後箭頭，如果要調整箭頭的 style 再加 css 就可以了
    • L31 ~ L53：照文件的講法是可以在 responsive 裡面用 breakpoint 跟 settings 來做多尺寸的處理
      • breakpoint 就是指小於這個值要做處理，然後用 settings 是小於 breakpoint 之後要做的設定，可以改的內容跟 L26 ~ L30 一樣，但原則上妳只要改 slidesToShow 這個值就可以了

Responsive Display

responsive: Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to "unslick" instead of an object to disable slick at a given breakpoint.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment