Banner Slider and Gallery Slider ทำแกลเลอรีแบบเลื่อนไปมาสวย ๆ ด้วย jQuery

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

putcharaporn_tan
PHP Super Member
PHP Super Member
Posts: 394
Joined: 04/08/2015 10:01 am
Contact:

Banner Slider and Gallery Slider ทำแกลเลอรีแบบเลื่อนไปมาสวย ๆ ด้วย jQuery

Post by putcharaporn_tan » 05/08/2015 2:34 pm

:mrgreen: :mrgreen: Banner Slider and Gallery Slider ทำแกลเลอรีแบบเลื่อนไปมาสวย ๆ ด้วย jQuery :mrgreen: :mrgreen:

1.jpg
1.jpg (48.44 KiB) Viewed 902 times
:arrow: ก่อนอื่นเรียกใช้ไฟล์ CSS และ JS
ดาว์นโหลดไฟล์ css และ js ได้ที่http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/

Code: Select all

<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" />

:arrow: :arrow: ต่อมาเลือกรูปภาพที่ต้องการแสดงใน Slider

Code: Select all

<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 ทำงาน

Code: Select all

<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>
2.jpg
2.jpg (56.59 KiB) Viewed 902 times
:mrgreen: เรียนรู้วิธีการใช้งาน jQuery ได้ที่
:arrow: บทเรียนที่ 1
:arrow: บทเรียนที่ 2
putcharaporn <3

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: facebook.com [Crawler] and 7 guests