slick – PlusMagi's Blog By Pitt Phunsanit

bootstrap, carousel, container, initialize, jquey, kenwheeler, responsive, slick, slide show, WIDTH, กว้าง, เรซสปอนต์ซีฟ

slick: responsive และ ความกว้าง

เจอปัญหาว่า slick เวลาวางต่อไปอีก block ต่อจากตัวอื่น มันจะตกลงมา หรือแสดงไม่ครบแล้วแต่กรณี เพราะว่า block มันจะยาวเท่าหน้า windows เลย ไม่ใช่ container หรือ div ที่ห่อมันเอาไว้เหมือน slideshow ตัวอื่นๆ

ลองหลายวิธีจนพบว่าวิธีของคุณ kirana Slick Carousel Center Padding Demo นั้นดีที่สุด

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>kenwheeler.slick: responsive</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="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="theme.css" rel="stylesheet" type="text/css" />
    <style>
        .slickContainer {
            background: #1f6d38;
            color: #333;
            margin: 0 auto;
            padding: 40px;
            width: 80%;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-5">
                <h1>sidebar</h1>
            </div>
            <div class="col-11 col-sm-10 col-md-9 col-lg-8 col-xl-7">
                <div class="slickContainer">
                    <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>
                </div>
            </div>
        </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": [{
            "breakpoint": 1140,
            "settings": {
                "dots": true,
                "infinite": true,
                "slidesToScroll": 4,
                "slidesToShow": 4
            }
        }, {
            "breakpoint": 960,
            "settings": {

                "dots": true,
                "infinite": true,
                "slidesToScroll": 3,
                "slidesToShow": 3
            }
        }, {
            "breakpoint": 720,
            "settings": {
                "dots": false,
                "infinite": false,
                "slidesToScroll": 2,
                "slidesToShow": 2
            }
        },
        {
            "breakpoint": 540,
            "settings": "unslick"
        }
    ],
    "speed": 300,
    "variableWidth": true,
    "zIndex": 2
});

});
    </script>
</body>

</html>

เมื่อสร้าง container ครอบตัว slide show และร่วมกับคำสั่ง responsive จะเห็นได้ว่าสามารถควบคุมการแสดงผลได้ดียิ่งขึ้น

Byphunsanit

AJAX, carousel, initialize, jquey, kenwheeler, slick, slide show, update, อัพเดท, อาเจ็ก

slick: carousel / slideshow จาก ajax

ตัวอย่างการแก้ไข carousel หรือ slideshow โดย update slide จาก ajax

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>kenwheeler.slick: ajax update</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><br>
    <select id="order_by">
    <option value="asc">น้อยไปมาก</option>
    <option value="desc">มากไปน้อย</option>
    <option value="random">สุ่ม</option>
    </select>
    <script src="../vendor/components/jquery/jquery.min.js"></script>
    <script src="../vendor/kenwheeler/slick/slick/slick.min.js"></script>
    <script>
        $(function() {

            var order_by = $('#order_by');
            var slideshowA = $('#slideshowA');

            function getSliderSettings() {
                return {
                    "autoplay": false,
                    "autoplaySpeed": 3000,
                    "centerMode": true,
                    "infinite": false,
                    "slidesToScroll": 4,
                    "slidesToShow": 4,
                    "speed": 300,
                    "variableWidth": true,
                    "zIndex": 2
                }
            }

            function getSlideShow() {

                $.ajax({
                    "data": {
                        "order_by": order_by.val(),
                    },
                    "success": function(data, textStatus, jqXHR) {

                        /* add items */
                        $.each(data.datas, function(index, value) {
                            slideshowA.append('<div><b>' + index + '</b><img alt="' + index + '" src="' + value + '"><p>แสดง ' + index + ' จาก http://www.avatarsdb.com</p></div>');
                        });

                        slideshowA.slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
                        $('.my-slide').remove(); /* Remove current slides elements, in case that you want to show new slides. */
                        slideshowA.slick(getSliderSettings()); /* Initialize the slick again */

                        alert('ทดลองดูครับ');

                    },
                    "url": "ajax.php",
                });

            }

            order_by.change(function() {
                getSlideShow();
            });

            getSlideShow();
            slideshowA.slick(getSliderSettings());
        });
    </script>
</body>

</html>

ไฟล์ที่ส่งข้อมูลกลับมาให้

<?php
$datas = [];

if (isset($_GET['order_by'])) {
    $order_by = $_GET['order_by'];
} else {
    $order_by = 'asc';
}

$datas['Acrobat'] = 'http://www.avatarsdb.com/avatars/acrobat.gif';
$datas['Cat Rain'] = 'http://www.avatarsdb.com/avatars/cat_rain.gif';
$datas['Dota Windranger'] = 'http://www.avatarsdb.com/avatars/dota_windranger.jpg';
$datas['Fighting Funny'] = 'http://www.avatarsdb.com/avatars/fighting_funny.gif';
$datas['Fire 01'] = 'http://www.avatarsdb.com/avatars/fire_01.gif';
$datas['German Shepherd Puppy'] = 'http://www.avatarsdb.com/avatars/german_shepherd_puppy.jpg';
$datas['Girl With Cigarette'] = 'http://www.avatarsdb.com/avatars/girl_with_cigarette.jpg';
$datas['Hidden Cat'] = 'http://www.avatarsdb.com/avatars/hidden_cat.jpg';
$datas['Im Fabulous'] = 'http://www.avatarsdb.com/avatars/im_fabulous.jpg';
$datas['One Direction'] = 'http://www.avatarsdb.com/avatars/One_Direction.jpg';
$datas['Panda Kiss'] = 'http://www.avatarsdb.com/avatars/panda_kiss.gif';
$datas['PC User'] = 'http://www.avatarsdb.com/avatars/pc_user.gif';
$datas['Riri Queen'] = 'http://www.avatarsdb.com/avatars/riri_queen.gif';
$datas['Tennessee'] = 'http://www.avatarsdb.com/avatars/tennessee.jpg';
$datas['Tuxedo M'] = 'http://www.avatarsdb.com/avatars/Tuxedo_m.jpg';
$datas['Tuxedo Mask'] = 'http://www.avatarsdb.com/avatars/tuxedo_mask.jpg';
$datas['Ugly Face'] = 'http://www.avatarsdb.com/avatars/ugly_face.gif';
$datas['Waifu'] = 'http://www.avatarsdb.com/avatars/waifu.jpg';
$datas['Wolf In The Snow'] = 'http://www.avatarsdb.com/avatars/wolf_in_the_snow.jpg';
$datas['Xerxes Break Kevin'] = 'http://www.avatarsdb.com/avatars/xerxes_break_kevin.jpg';

switch ($order_by) {
    case 'desc':{krsort($datas);}
        break;

    case 'random':{
            $keys = array_keys($datas);
            shuffle($keys);
            $random = [];
            foreach ($keys as $key) {
                $random[$key] = $datas[$key];
            }
            $datas = $random;
        }break;

    case 'asc':
    default:
        {ksort($datas);}
        break;
}

header('Content-type: application/json; charset=utf-8');
echo json_encode([
    'datas' => $datas,
    'order_by' => $order_by,
]);

code บางส่วนจะอยู่ในบทความ slick: สร้าง carousel / slideshow

Credit: Reinitialize Slick js after successful ajax call

Byphunsanit

carousel, jquey, kenwheeler, slick, slide show

slick: สร้าง carousel / slideshow

เป็นตัว 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: กำหนดการแสดงผลสำหรับหน้จอขนาดต่าง

Tag Archive slick

slick: responsive และ ความกว้าง

slick: carousel / slideshow จาก ajax

slick: สร้าง carousel / slideshow