ตัวอย่างการแก้ไข carousel หรือ slideshow โดย update slide จาก ajax
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 | <!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> |
ไฟล์ที่ส่งข้อมูลกลับมาให้
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 | <?php$datas = [];if (isset($_GET['order_by'])) { $order_by = $_GET['order_by'];} else { $order_by = 'asc';}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