เจอปัญหาว่า 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 > </ 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 > </ 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 จะเห็นได้ว่าสามารถควบคุมการแสดงผลได้ดียิ่งขึ้น