เป็นตัว carousel ที่ใช้ใน office ปรับแต่งได้ง่ายพอสมควรเลยเขียนอธิบายวิธีการใช้ไว้ซักหน่อย
ถ้าใช้ composer ก็ให้เพิ่ม “kenwheeler/slick”: “*”, ไปใน require ได้เลย หรือจะโหลดจาก kenwheeler/slick หรือ slick ก็ได้
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <!doctype html><html><head> <meta charset="utf-8"> <title>kenwheeler.slick: basic</title> <link href="../vendor/components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="../vendor/kenwheeler/slick/slick/slick.css" rel="stylesheet" type="text/css" /> <link href="../vendor/kenwheeler/slick/slick/slick-theme.css" rel="stylesheet" type="text/css" /> <link href="theme.css" rel="stylesheet" type="text/css" /></head><body> <div id="slideshowA"> </div> </div> <div><b>Dota Windranger</b><img alt="Dota Windranger" src="http://www.avatarsdb.com/avatars/dota_windranger.jpg"> </div> <div><b>Fighting Funny</b><img alt="Fighting Funny" src="http://www.avatarsdb.com/avatars/fighting_funny.gif"> </div> </div> <div><b>German Shepherd Puppy</b><img alt="German Shepherd Puppy" src="http://www.avatarsdb.com/avatars/german_shepherd_puppy.jpg"> </div> <div><b>Girl With Cigarette</b><img alt="Girl With Cigarette" src="http://www.avatarsdb.com/avatars/girl_with_cigarette.jpg"> </div> </div> <div><b>Im Fabulous</b><img alt="Im Fabulous" src="http://www.avatarsdb.com/avatars/im_fabulous.jpg"> </div> <div><b>One Direction</b><img alt="One Direction" src="http://www.avatarsdb.com/avatars/One_Direction.jpg"> </div> </div> </div> </div> </div> </div> <div><b>Tuxedo Mask</b><img alt="Tuxedo Mask" src="http://www.avatarsdb.com/avatars/tuxedo_mask.jpg"> </div> </div> </div> <div><b>Wolf In The Snow</b><img alt="Wolf In The Snow" src="http://www.avatarsdb.com/avatars/wolf_in_the_snow.jpg"> </div> <div><b>Xerxes Break Kevin</b><img alt="Xerxes Break Kevin" src="http://www.avatarsdb.com/avatars/xerxes_break_kevin.jpg"> </div> </div> <script src="../vendor/components/jquery/jquery.min.js"></script> <script src="../vendor/kenwheeler/slick/slick/slick.min.js"></script> <script> $(function() { $('#slideshowA').slick({ "autoplay": true, "autoplaySpeed": 3000, "centerMode": true, "infinite": true, "responsive": [], "slidesToScroll": 4, "slidesToShow": 4, "speed": 300, "variableWidth": true, "zIndex": 2, }); }); </script></body></html> |
คำสั่ง
- infinite
- จำเปลี่ยนจาก slideshow เป็น carousel
- variableWidth
- จะกำหนดขนาดความกว้างของกล่อง
- responsive
- กำหนดการแสดงผลสำหรับหน้จอขนาดต่าง
สามารถกำหนดการแสดงผลได้โดยใช้ตัวอย่างในไฟล์ slick-theme.css แต่แนะนำว่าใช้ theme ที่ทำเองดีกว่า (ไฟล์ตัวอย่างที่ให้มาทุกอยางใส transparent ทั้งหมด มองไม่เห็นปุ่ม next / prev อะไรเลย เลยคิดว่าเขียน code ผิดอยู่นานเลย) โดยทางคุณ Ken Wheeler ได้เตรียมไฟล์ที่จะใช้ complied ไว้ให้แล้วทั้งที่เป็น .less และ scss หรือจะให้เหมือนผมก็ได้
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | body { background: #3498db; font-size: 12px;}.slick-arrow { background: #c00000; font-size: 24px;}.slick-next { content: "\f105";}.slick-prev { content: "\f105";}.slick-slide { background: #fff; border-radius: 5px; border: #000 solid 1px; height: 100px; margin: 10px 10px 4px 10px; width: 250px; overflow: hidden;}.slick-slide b { background: #c00000; height: 20px; padding: 0 10px; position: relative; left: 10px; z-index: 1;}.slick-slide img { position: relative; height: 100%; top: -15px;}.slick-slide p { color: #000; padding: 5px; position: relative; top: -120px; display: block; width: 150px; left: 100px;}#slideshowA { background: #c0c0c0; color: #fff; height: 120px; margin: auto; width: 90%;} |