6

好用的 [ 圖片輪播 ] 套件

 2 years ago
source link: https://webber0928.blogspot.com/2016/04/blog-post.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

好用的 [ 圖片輪播 ] 套件

今天要推薦的套件是 slick( http://kenwheeler.github.io/slick/ )

一個非常好用的圖片輪播套件


使用方式非常簡單
在 head 的部分加入 CSS
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>


<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css"/>
然後在 body 最下面加上 JS
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

程式碼的部分

<div class="slider">
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>
# main.js
$('.slider').slick();
幾個好用的參數

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK