ก่อนอื่นเรียกใช้ไฟล์ CSS และ JS
ดาว์นโหลดไฟล์ css และ js ได้ที่http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/
โค้ด: เลือกทั้งหมด
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
ต่อมาเลือกรูปภาพที่ต้องการแสดงใน Slider
โค้ด: เลือกทั้งหมด
<div id="Pic">
<div id="img">
<!-- ภาพที่ 1 -->
<a href="https://www.mindphp.com/ " target="_blank">
<img src="picture/cat1.jpg" alt="CAT" />
<span>
<b>Cute Cat</b><br />
<small>แมว เป็นสัตว์เลี้ยงลูกด้วยนม จะมีรูปร่างขนาดเล็ก ขนาดลำตัวยาว ช่วงขาสั้นและจัดอยู่ในกลุ่มของประเภทสัตว์กินเนื้อ มีเขี้ยวและเล็บแหลมคม สามารถหดซ่อนเล็บได้เช่นเดียวกับเสือ สืบสายเลือดมาจากแมวป่าที่มีขนาดใหญ่กว่า ซึ่งลักษณะบางอย่างของแมวยังคงพบเห็นได้ในแมวบ้านปัจจุบัน</small>
</span>
</a>
<!— ภาพที่ 2 -->
<a href="https://www.mindphp.com/" target="_blank">
<img src="picture/cat2.jpg" alt="CAT" />
<span>
<b>Cute Cat</b><br />
<small>แมว เป็นสัตว์เลี้ยงลูกด้วยนม จะมีรูปร่างขนาดเล็ก ขนาดลำตัวยาว ช่วงขาสั้นและจัดอยู่ในกลุ่มของประเภทสัตว์กินเนื้อ มีเขี้ยวและเล็บแหลมคมสามารถหดซ่อนเล็บได้เช่นเดียวกับเสือ สืบสายเลือดมาจากแมวป่าที่มีขนาดใหญ่กว่า ซึ่งลักษณะบางอย่างของแมวยังคงพบเห็นได้ในแมวบ้านปัจจุบัน</small>
</span>
</a>
</div>
</div
เรียกให้ Slider ทำงาน
โค้ด: เลือกทั้งหมด
<script type="text/javascript">
$(document).ready(function() {
$('#Pic').coinslider();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>
บทเรียนที่ 1
บทเรียนที่ 2