ภาพประกอบ : flexslider

ทำภาพ slider สวยๆด้วย flexslider

slider งดงามในความเรียบง่าย ผมนี่ชอบคำนี้จริงๆโดยส่วนมากแล้วเราจะใช้  flexslider สำหรับการแสดงรูปภาพกันอยู่แล้ว เดี๋ยวนี้มีออกมาเยอะแยะมากมายให้เลือกใช้เต็มไปหมด แต่ตัวที่ผมไว้วางใจมากเรียกใช้งานบ่อยๆก็คงไม่พ้น ซึ่งนอกจากจะใช้กับ wordpress ได้แล้วยังใช้กับเว็บไซต์อื่นๆได้ด้วยน๊าาาา

ภาพประกอบ : flexslider

ภาพประกอบ : flexslider

ทำภาพ slider สวยๆด้วย flexslider

การออกแบบเว็บไซต์ส่วนใหญ่แล้วเราจะทำเพื่อเน้นการแสดงข้อมูล โชว์สินค้า บอกรายละเอียดและแบ่งปันประสบการณ์ต่าๆ ดังนั้นการแสดงรูปภาพจึงถูกใช้เป็นองค์ประกอบสำคัญในการวางเป้าหมายเพื่อการออกแบบ และหากภาพของเราสวยงาม ลงตัว สร้างความโดดเด่นให้กับเว็บไซต์ สร้างอารมณ์ร่วมกับประสบการณ์ของผู้ใช้งานจะยิ่งทำให้ผู้ใช้หยุดสายตามา focus อยู่ที่รูปภาพนานพอสมควรเลยทีเดียว

หากว่ารูปภาพของเรามีเยอะละ มีเป็นจำนวนมาก จะทำไงดี  จะจัดเรียงยังไงให้สวยงาม ลงตัวและยังคงความเป็นอารมณ์ร่วมกับเว็บไซต์ได้อยู่ คงต้องใช้ สไลด์เค้ามาช่วยในการออกแบบแล้วครับแบบนี้ เดี๋ยวนี้มีสไลด์งามๆออกมาให้เลือกใช้มากมายเลยแต่เราจะต้องเลือกกับความเหมาะสมของระบบ หน้าตาของมัน การปรับแต่ง และความเข้าใจกับมันในการนำ สไลด์มาติดไว้ที่เว็บไซต์ของเรานะครับ

ผมมักเลือกใช้ สไลด์ตัวนี้เนื่องจากคุ้นเคยเวลาทำใช้งานบน wordpress แถมด้วยความเรียบง่ายของตัว source code เองและความที่เราสามารถปรับแต่งอะไรได้เยอะอยู่พอสมควรด้วยการเตรียมการมาให้แล้วเบื้องต้นกับในส่วนของ Advanced Options section ซึ่งแค่นั้นก็นับว่ามากเพียงพอแล้วสำหรับความต้องการของผมเอง ทีนี้เราจะมาดูวิธีการใช้งานกับตัวอย่างง่ายๆเพื่อจะได้นำไปใช้งานกันได้นะครับ

เริ่มจากมาดูตัวอย่างงานที่ใช้กับ สไลด์ตัวนี้กันก่อนนะครับ จะได้เห็นภาพมากขึ้นว่าเค้าเป็นอย่างไร

  • Simple, semantic markup
  • Supported in all major browsers
  • Horizontal/vertical fade animations
  • Hardware accelerated touch swipe support
  • Custom navigation options
  • Compatible with the latest version of jQuery

ความสามารถหลักๆของเค้าก็ใช้งานง่าย รองรับทุก browser ทำได้ทั้งแนวตั้งแนวนอนมี API แบบ advance ให้เล่น ก็ประมาณนั้นนะครับ ลองดูรูปภาพตัวอย่างงานกัน

Flexslider Example 1

Example 1

แบบแรกเป็นแบบ Basic นะครับง่ายๆไม่มีอะไรมาก หมุนไปซ้ายขวา

ภาพประกอบ : FlexSlider With Thumbnail

ภาพประกอบ : With Thumbnail

ภาพที่สองนี่เป็นแบบมี ภาพ Thumbnail อยู่ด้านล่างด้วย

ภาพประกอบ : FlexSlider Thumbnail Slider

ภาพประกอบ : Thumbnail

ภาพที่สามนี่เป็นแบบที่ส่วนของ Thumbnail เองก็ สไลด์ ได้และแยกกันกับภาพใหญ่

ภาพประกอบ : FlexSlider Carousel

ภาพประกอบ :  Carousel

ภาพที่สี่เป็นแบบที่เรียกกันว่า Carousel คือจะมีขนาดเล็กหน่อยแล้ว สไลด์ไปมาได้เลย

แล้วนอกจากนี้เจ้า สไลด์นี่ก็ยังมีความสามารถรองรับ API จาก Vimeo ด้วยนะไม่ธรรมดาเลย ทีนี้เราได้เห็นหน้าค่าตาของ สไลด์ตัวนี้กันไปแล้วเรามลองดูครับว่า องค์ประกอบหรือไฟล์ที่จำเป็นของ plugin ตัวนี้มีอะไรบ้าง

ก่อนอื่นคุณสามารถเข้าไป download ไฟล์ของเค้าได้ที่ link : http://www.woothemes.com/

ทีนี้ไฟล์ที่เราจำเป็นต้องใช้นะครับ flexslider.css, jquery.flexslider.js, jquery.min.js ทั้ง 3 ไฟล์นี้เลยครับ จากนั้นเราจะมาเริ่มกับ 3 Step Easy แบบสุดๆเพื่อให้ได้มาซึ่ง flexslider แบบ Basic กันครับ

Step 1.

link ไฟล์ทั้ง 3 ตามข้างบนที่คุณไปดาวน์โหลดมาแล้วจากเว็บไซต์เข้าที่ไฟล์เอกสารของคุณได้เลย

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

เรียบร้อยไป 1 ขั้นตอนมาดู step ต่อไปกันเลยครับ

 

Step 2.

เพิ่ม HTML markup ลงไปใน code ซะวางไว้บริเวณที่คุณต้องการเรียกใช้งานได้เลยครับ

<div class="flexslider">
 <ul class="slides">
 <li>
 <img src="slide1.jpg" />
 </li>
 <li>
 <img src="slide2.jpg" />
 </li>
 <li>
 <img src="slide3.jpg" />
 </li>
 </ul>
</div>

จากนั้นให้คุณเติม class ชื่อ flexslider ลงไปใน div ที่ครอบเนื้อหาส่วนของการแสดงรูปภาพนี้เอาไว้ครับ แล้วเติม class ชื่อ slides เพื่อให้ important ไม่งั้นเดี๋ยวไปชนกับตัวอื่นเข้านะ เรียบร้อยไปอีก 1 ขั้นตอนมาดูขั้นตอนสุดท้ายกันเลย

Step 3.

สุดท้ายเลยแค่ไปเขียนเรียก javascript ขึ้นมาเตรียมพร้อมทำงาน

[่html]
<script type=”text/javascript”>
$(window).load(function() {
$(‘.flexslider’).flexslider();
});
</script>
[/html]

แล้วจบด้วยการเรียก flexslider ให้ทำงานครับ เพียงเท่านี้ก็เสร็จเรียบร้อยแล้ว

ส่วนใครที่ต้องการใช้งานรูปแบบอื่นๆก็ทำได้ง่ายๆแค่เพียงเติม API อีกนิดเข้าไปเรียกความสามารถอื่นๆขึ้นมาเท่านั้นเองครับ อย่างเช่น

ต้องการเรียกรูปแบบของ Thumbnail แบบมี Nav ก็แค่เติม

animation: "slide",
controlNav: "thumbnails"

ถ้าต้องการแบบข้างล่างก็สไลด์ ข้างบนก็สไลด์ ต้องเรียกแบบ full หน่อยครับ

$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});

$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});

ก็เป็นประมาณนี้สำหรับวิธีใช้งานสไลด์สวยๆง่ายๆตัวนี้ ใครอยากเอามาลองก็เข้าไปดูได้ที่ link ของเค้ากันเลยนะครับติดขัดอะไรตรงไหนก็ถามกันไว้ที่ comment ด้านล่างนี้ได้เลย