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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

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 985 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 985 times
:mrgreen: เรียนรู้วิธีการใช้งาน jQuery ได้ที่
:arrow: บทเรียนที่ 1
:arrow: บทเรียนที่ 2

Top