ตัวอย่างการแก้ไข 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