Try   HackMD

[Bootstrap] 透過Slick建立多種輪播功能

tags: Bootstrap

Slick提供多種輪播樣式，可進行滑動、設定輪播等功能，我們只需要選定輪播形式後，引用js、css套件，即可使用它所支援的slider樣式。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

操作步驟

  1. 搜尋並引入slick cdn，加入css及js相對應程式碼

將slick.css複製到<head>中

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

slick.js複製到<body>段

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
  1. 在html建立輪播的內容結構，並在外層使用一個class作標記
<div class="slider">
    <div>slide 1</div>
    <div>slide 2</div>
    <div>slide 3</div>

</div>
  1. 在slick官網上選擇sliders樣式，複製對應語法到<body><script>中

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  1. 經由optional控制元素來調整輪播、滑動等功能設定
  • arrows: (boolean值)是否顯示左右箭頭功能
  • dots:(boolean值)是否顯示下方小圓點功能
  • autoplay：(boolean值)是否自動播放
  • autoplaySpeed:(毫秒值)自動播放的速度
  • slidesToShow:(數量值)一次主要顯現幾個slides
  • slidesToScroll:(數量值)每次滑動幾張slides
  • fade:(boolean值)是否採用淡出/淡入效果
  • infinite：(boolean值)滑到最後一張，是否繼續從回到一開始同向循環(4>1>2>3>…)，或是逆轉向循環(4>3>2>…)
  • centerMode:(boolean值)是否同時顯現前後兩張slide的部分內容
  • centerPadding:(px值)搭配centerMode:true使用，表示前後兩張slide要顯現多少範圍
  • responsive:(陣列)針對不同尺寸做額外設定
    • breakpoint:(螢幕尺寸)
    • settings:({物件})包含各種設定
Last changed by 
 
Vince Chen
0
3426

Read more

[JavaScript] event事件

Html&#x7522;&#x751F;&#x6309;&#x9215;&#x5F8C;&#xFF0C;js&#x8A2D;&#x5B9A;&#x5F48;&#x8DF3;&#x8996;&#x7A97;&#x986F;&#x793A;&#x5B57;&#x5E55; function()&#x4EE3;&#x5165;&#x4EFB;&#x610F;&#x5B57;&#x5143;&#xFF0C;&#x4FBF;&#x53EF;&#x4F7F;&#x7528;console&#x8FFD;&#x8E64;&#x6309;&#x9215;&#x9EDE;&#x5165;&#x8A73;&#x60C5;&#xFF0C;&#x540C;&#x6642;&#x5728;&#x591A;&#x7A2E;&#x7684;&#x4E8B;&#x4EF6;&#x8A9E;&#x6CD5;&#x4E2D;&#xFF0C;&#x53EF;&#x63D0;&#x4F9B;&#x7D00;&#x9304;&#x532F;&#x51FA;&#x8CC7;&#x6599;&#xFF0C;&#x662F;&#x5F88;&#x91CD;&#x8981;&#x7684;&#x7D00;&#x9304;&#x529F;&#x80FD;&#x3002; e.target&#x7528;&#x6CD5; &#x7C21;&#x8FF0;&#xFF1A;&#x89F8;&#x767C;&#x4E8B;&#x4EF6;&#x5C31;&#x6211;&#x5011;&#x7684;&#x5370;&#x8C61;&#x4E2D;&#x662F;&#x5E36;&#x5165;&#x53C3;&#x6578;&#xFF0C;&#x50B3;&#x905E;&#x5F9E;html&#x4F86;&#x7684;&#x7279;&#x5B9A;&#x6B04;&#x4F4D;&#x503C;&#xFF0C;&#x7136;&#x800C;&#x5728;&#x539F;&#x751F;&#x7684;JS&#x5BEB;&#x6CD5;&#xFF0C;&#x6642;&#x5E38;&#x5229;&#x7528;function(e){}&#x9810;&#x8A2D;&#x7684;e&#x53BB;&#x53D6;&#x5F97;&#x88AB;&#x9EDE;&#x64CA;&#x5340;&#x584A;&#x7684;&#x8A73;&#x7D30;&#x8CC7;&#x8A0A;&#xFF0C;&#x800C;&#x5E38;&#x4F7F;&#x7528;e.target&#x53D6;&#x5F97;&#x5167;&#x90E8;&#x5143;&#x7D20;&#x8CC7;&#x6599; &#x6848;&#x4F8B; &#x8A73;&#x8FF0;&#xFF1A;&#x7576;&#x8981;&#x522A;&#x9664;&#x7D93;&#x7531;&#x8FF4;&#x5708;&#x7522;&#x751F;&#x51FA;&#x7684;&#x5217;&#x8868;&#x6642;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;e.target&#x78BA;&#x8A8D;id&#x7DE8;&#x865F;&#xFF0C;&#x518D;&#x7D93;&#x7531;&#x8FF4;&#x5708;&#x6BD4;&#x5C0D;&#x7DE8;&#x865F;&#x77E5;&#x9053;&#x5E8F;&#x865F;index&#xFF0C;&#x518D;splice&#x522A;&#x9664;&#x3002;

Oct 7, 2020
[JavaScript] LocalStorage瀏覽器資料儲存

&#x524D;&#x8A00;&#xFF1A;&#x6642;&#x5E38;&#x7528;&#x65BC;&#x201C;&#x6211;&#x7684;&#x6700;&#x611B;&#x201D;&#x529F;&#x80FD;&#x5217;&#xFF0C;&#x4E00;&#x822C;&#x6211;&#x5011;&#x6240;&#x9EDE;&#x9078;&#x7684;&#x8CC7;&#x6599;&#x90FD;&#x6703;&#x85C9;&#x7531;&#x50B3;&#x5165;&#x5F8C;&#x7AEF;&#x8CC7;&#x6599;&#x5EAB;&#x5132;&#x5B58;&#xFF0C;&#x5982;&#x8981;&#x53D6;&#x7528;&#x4E5F;&#x9808;&#x5F9E;&#x8CC7;&#x6599;&#x5EAB;&#x53D6;&#x51FA;&#xFF0C;&#x7121;&#x5F62;&#x4E2D;&#x6703;&#x589E;&#x52A0;&#x8CC7;&#x6599;&#x5EAB;&#x7684;&#x8CA0;&#x8377;&#xFF0C;&#x8981;&#x7BC0;&#x7701;&#x5132;&#x5B58;&#x5EAB;&#x7684;&#x5BB9;&#x91CF;&#x4EE5;&#x53CA;&#x8F09;&#x5165;&#x901F;&#x5EA6;&#xFF0C;&#x5EFA;&#x8B70;&#x4F7F;&#x7528;localStorage&#x3001;cookie&#x3001;sessionStorage&#x7684;&#x65B9;&#x5F0F;&#x5728;&#x700F;&#x89BD;&#x5668;&#x5132;&#x5B58;&#x3002; localStorage&#x8A9E;&#x6CD5;&#x7BC4;&#x4F8B; &#x5B58;&#x5165;&#x65B9;&#x6CD5;&#xFF1A;setItem("key&#x4F4D;&#x7F6E;",&#x5BA3;&#x544A;) &#x53D6;&#x5F97;&#x65B9;&#x6CD5;&#xFF1A;getItem(&apos;key&#x4F4D;&#x7F6E;&apos;) &#x532F;&#x5165;&#x6D41;&#x7A0B; &#x5148;&#x5B9A;&#x7FA9;btn&#x8207;html&#x7684;ID&#x4F4D;&#x7F6E;&#xFF0C;&#x4EE3;&#x5165;&#x76E3;&#x807D;&#x516C;&#x5F0F;&#xFF0C;&#x518D;&#x5EFA;&#x7ACB;function&#x4E8B;&#x4EF6;&#x5BEB;&#x5165;&#x532F;&#x5165;&#x7684;&#x516C;&#x5F0F;&#xFF08;&#x540C;&#x4E0A;&#xFF09;

Oct 6, 2020
[JavaScript] 物件傳參考特性

&#x89E3;&#x8AAA;&#x50B3;&#x503C;&#x3001;&#x50B3;&#x53C3;&#x8003; &#x61C9;&#x5C0D;&#x65B9;&#x5F0F;&#xFF1A;Object.assign &#x64CD;&#x4F5C;&#x5BE6;&#x4F8B; openModal(item){ //this.tempProduct= item; //&#x56E0;&#x70BA;&#x7269;&#x4EF6;&#x50B3;&#x53C3;&#x8003;&#x7684;&#x7279;&#x6027;&#xFF0C;&#x76F4;&#x63A5;&#x7528;item&#x6703;&#x8207;tmepProduct&#x76F8;&#x540C; this.tempProduct= Object.assign({},item); //&#x53EF;&#x63A1;&#x7528;es6&#x8A9E;&#x6CD5;&#xFF0C;&#x5C07;item&#x50B3;&#x81EA;&#x7368;&#x7ACB;&#x7684;&#x7A7A;&#x7269;&#x4EF6;&#x88E1;&#xFF0C;&#x624D;&#x4E0D;&#x6703;&#x4E92;&#x76F8;&#x6E32;&#x67D3; },

Sep 13, 2020
[Vuex] 基礎介紹

vue&#x5143;&#x4EF6;&#x968E;&#x5C64;&#x8655;&#x7406;&#x65B9;&#x5F0F; &#x7236;&#x5B50;&#x968E;&#x5C64;&#x53EF;&#x900F;&#x904E;emit&#x53CA;props&#x505A;&#x50B3;&#x905E; &#x5982;&#x975E;&#x7236;&#x5B50;&#x5C64;&#x7684;&#x95DC;&#x4FC2;&#xFF0C;&#x540C;&#x968E;&#x5C64;&#x5C31;&#x5F97;&#x7D93;&#x7531;eventbus&#x50B3;&#x905E;&#xFF0C;&#x4E0D;&#x904E;&#x50C5;&#x9069;&#x5408;&#x5728;&#x8F03;&#x8F15;&#x91CF;&#x7684;&#x5C08;&#x6848;&#xFF0C;&#x56E0;&#x904E;&#x591A;&#x6613;&#x6DF7;&#x4E82;&#x96E3;&#x4EE5;&#x7BA1;&#x7406; &#x4E5F;&#x80FD;&#x9078;&#x64C7;&#x5168;&#x57DF;&#x8B8A;&#x6578;&#xFF0C;&#x4F46;&#x8CC7;&#x6599;&#x7121;&#x6CD5;&#x8CC7;&#x6599;&#x7D81;&#x5B9A; &#x65BC;&#x662F;vuex&#x5C31;&#x662F;&#x70BA;&#x4E86;&#x89E3;&#x6C7A;&#x5143;&#x4EF6;&#x5C64;&#x7D1A;&#x50B3;&#x905E;&#x7684;&#x8907;&#x96DC;&#x6027;&#x800C;&#x88AB;&#x958B;&#x767C;&#x51FA;&#xFF0C;&#x4E0D;&#x8AD6;&#x5728;&#x5C64;&#x7D1A;&#x4F4D;&#x7F6E;&#x90FD;&#x80FD;&#x4E92;&#x76F8;&#x50B3;&#x905E;&#xFF0C;&#x4E5F;&#x80FD;&#x6709;&#x96D9;&#x5411;&#x7D81;&#x5B9A;&#x7684;&#x7279;&#x6027; &#x7E3D;&#x7D50;&#x4F7F;&#x7528;&#x6642;&#x6A5F;

Sep 9, 2020
Read more from Vince Chen
Published on HackMD