Site icon PlusMagi's Blog By Pitt Phunsanit

slick: สร้าง carousel / slideshow

phunsanit

เป็นตัว carousel ที่ใช้ใน office ปรับแต่งได้ง่ายพอสมควรเลยเขียนอธิบายวิธีการใช้ไว้ซักหน่อย

ถ้าใช้ composer ก็ให้เพิ่ม “kenwheeler/slick”: “*”, ไปใน require ได้เลย หรือจะโหลดจาก kenwheeler/slick หรือ slick ก็ได้

<!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><b>Acrobat</b><img alt="Acrobat" src="http://www.avatarsdb.com/avatars/acrobat.gif">
            <p>แสดง acrobat.gifจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Cat Rain</b><img alt="Cat Rain" src="http://www.avatarsdb.com/avatars/cat_rain.gif">
            <p>แสดง cat_rain.gifจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Dota Windranger</b><img alt="Dota Windranger" src="http://www.avatarsdb.com/avatars/dota_windranger.jpg">
            <p>แสดง dota_windranger.jpgจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Fighting Funny</b><img alt="Fighting Funny" src="http://www.avatarsdb.com/avatars/fighting_funny.gif">
            <p>แสดง fighting_funny.gifจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Fire 01</b><img alt="Fire 01" src="http://www.avatarsdb.com/avatars/fire_01.gif">
            <p>แสดง fire_01.gifจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>German Shepherd Puppy</b><img alt="German Shepherd Puppy" src="http://www.avatarsdb.com/avatars/german_shepherd_puppy.jpg">
            <p>แสดง german_shepherd_puppy.jpgจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Girl With Cigarette</b><img alt="Girl With Cigarette" src="http://www.avatarsdb.com/avatars/girl_with_cigarette.jpg">
            <p>แสดง girl_with_cigarette.jpgจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Hidden Cat</b><img alt="Hidden Cat" src="http://www.avatarsdb.com/avatars/hidden_cat.jpg">
            <p>แสดง hidden_cat.jpgจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Im Fabulous</b><img alt="Im Fabulous" src="http://www.avatarsdb.com/avatars/im_fabulous.jpg">
            <p>แสดง im_fabulous.jpgจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>One Direction</b><img alt="One Direction" src="http://www.avatarsdb.com/avatars/One_Direction.jpg">
            <p>แสดง One_Direction.jpgจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Panda Kiss</b><img alt="Panda Kiss" src="http://www.avatarsdb.com/avatars/panda_kiss.gif">
            <p>แสดง panda_kiss.gifจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>PC User</b><img alt="PC User" src="http://www.avatarsdb.com/avatars/pc_user.gif">
            <p>แสดง pc_user.gifจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Riri Queen</b><img alt="Riri Queen" src="http://www.avatarsdb.com/avatars/riri_queen.gif">
            <p>แสดง riri_queen.gifจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Tennessee</b><img alt="Tennessee" src="http://www.avatarsdb.com/avatars/tennessee.jpg">
            <p>แสดง tennessee.jpgจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Tuxedo M</b><img alt="Tuxedo M" src="http://www.avatarsdb.com/avatars/Tuxedo_m.jpg">
            <p>แสดง Tuxedo_m.jpgจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Tuxedo Mask</b><img alt="Tuxedo Mask" src="http://www.avatarsdb.com/avatars/tuxedo_mask.jpg">
            <p>แสดง tuxedo_mask.jpgจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Ugly Face</b><img alt="Ugly Face" src="http://www.avatarsdb.com/avatars/ugly_face.gif">
            <p>แสดง ugly_face.gifจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Waifu</b><img alt="Waifu" src="http://www.avatarsdb.com/avatars/waifu.jpg">
            <p>แสดง waifu.jpgจาก http://www.avatarsdb.com</p>
        </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">
            <p>แสดง wolf_in_the_snow.jpgจาก http://www.avatarsdb.com</p>
        </div>
        <div><b>Xerxes Break Kevin</b><img alt="Xerxes Break Kevin" src="http://www.avatarsdb.com/avatars/xerxes_break_kevin.jpg">
            <p>แสดง xerxes_break_kevin.jpgจาก http://www.avatarsdb.com</p>
        </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 หรือจะให้เหมือนผมก็ได้

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%;
}