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