ตย.  วิธีทำสไลด์แบนเนอร์ แบบง่ายๆ   จาก carousel Bootstrap 4.1 จะเห็นได้ว่าตั้งแต่ bootstrap 4 พร้อมให้ใช้งาน รูปแบบของหลายๆ  class ก็ยังใช้แบบเดิม แต่ output หรือการแสดงผลจะเปลี่ยนไป ผมว่าก็สวยกว่าเดิมนะ มีความเรียบง่าย แต่สวย หรู แพง ! กว่า bootstrap 3 นิดนึง

carousel เหมาะกับอะไร ?
     เว็บไซต์ทุกเว็บจำเป็นต้องมีอะไรที่จะโชว์เด่นๆ อาจจะเป็น ข่าวเด่น สินค้าโปรโมชั่น ฯลฯ ให้ผู้ใช้ได้เข้ามาดู เข้าถึงไวที่สุดอย่างแน่นอน สิ่งที่ขาดไม่ได้สำหรับเว็บไซต์ก็คือสไลด์ แบนเนอร์ ที่สไลด์ไปเรื่อยๆ นั้นแหละครับ  carousel เลยเป็นที่นิยม ถูกเรียกใช้มากที่สุดอีก 1 class ของ bootstrap 

 มาดู ตย. code ที่ผมเตรียมไว้ให้ครับ 

เริ่มต้นที่เว็บไซต์   https://getbootstrap.com/

https://getbootstrap.com/docs/4.1/components/carousel/

อยากเปลี่ยนภาพ
     เปลี่ยนใน tag นี้นะครับ ใส่ path ให้ถูก แต่งภาพให้สวยๆ จะทำให้เว็บดูแพงขึ้น
<img class=”d-block w-100″ src=”img/devbanban.jpg” alt=”devbanban”>

 

ผลการทำงาน

 

ทดลองใช้งานคลิก Demo Carousel

 

อย่าลืมนำไปประยุกต์ใช้นะครับ 

รวมคลิปสอนสร้างเว็บไซต์ php, mysql, bootstrap 

 

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com และทีมงานได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์  บวรเลิศสุธี   เลขที่  878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์  บวรเลิศสุธี เลขที่ 406-359094-1

โทร. 094 861 6709  , LineID: disketjet1 , Email: devbanban@gmail.com (พิศิษฐ์)

 

มีความสนใจเทคโนโลยีที่ใช้พัฒนาเว็บไซต์ และอยากแบ่งปันความรู้ด้านการพัฒนาเว็บไซต์และอื่นๆอีกมากมาย…

(Visited 664 times, 35 visits today)