Tag Archive container

Byphunsanit

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

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

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

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!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 จะเห็นได้ว่าสามารถควบคุมการแสดงผลได้ดียิ่งขึ้น