20 ตัวอย่าง Bootstrap 4 Carousel ฟรีสุดเจ๋ง 2021

เผยแพร่แล้ว: 2021-07-22

แสดงสไลด์ของรูปภาพและข้อความอย่างน่าทึ่งด้วยเทมเพลตแบบหมุน Bootstrap 4 ที่พัฒนาขึ้นอย่างพิถีพิถันของเรา

เนื่องจากเราไม่สามารถหาตัวอย่างเพียงพอที่จะสร้างคอลเลกชั่นที่มั่นคง เราจึงสร้าง 20 ตัวขึ้นเอง

เรามีอิสระที่จะสร้างรูปแบบต่างๆ มากมาย ในระยะสั้นเรามี บางสิ่งบางอย่างสำหรับทุกคน

เรายังทำให้แน่ใจว่าภาพหมุนของเราประกอบด้วย:

  • การออกแบบที่ตอบสนอง
  • แอนิเมชั่น
  • เล่นอัตโนมัติ
  • ลูกศร
  • ตัวอย่างภาพขนาดย่อ (ไม่ใช่ทั้งหมด)

คุณยังมีสิทธิ์ปรับแต่งเทมเพลต ซึ่งทำให้น่าตื่นเต้นยิ่งขึ้น

แสดงผลิตภัณฑ์ รายการพอร์ต คำรับรอง และรายการอื่นๆ ในเว็บไซต์ของคุณอย่างเจ้านาย

ไม่. เงิน. ค่าใช้จ่าย.

เทมเพลต Bootstrap 4 Carousel ฟรีที่ดีที่สุด

ม้าหมุน V01

ม้าหมุน01
Carousel V01 ทำงานได้อย่างยอดเยี่ยม หากคุณกำลังตามล่าเพื่อเพิ่มแถบเลื่อนแบบเต็มหน้าจอในเว็บแอปพลิเคชันของคุณ ยอดเยี่ยม ใช้งานได้ทั้งการเลื่อนรูปภาพและข้อความแบบเลื่อนทีละรายการ

คุณสามารถใช้ทั้งสองอย่างหรือเลือกเพียงรายการเดียว ขึ้นอยู่กับคุณ นี่เป็นเพียงการแสดงให้เห็นว่า Carousel V01 มีความสามารถมากกว่าสิ่งเดียวเพื่อให้คุณได้รับประโยชน์สูงสุด

นอกจากนี้ การเลื่อนอาจเกิดขึ้นโดยการลากสไลด์ด้วยตนเอง แต่จะม้วนโดยอัตโนมัติด้วย

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V02

ม้าหมุน02
การแสดง PORTFOLIO ของคุณด้วยภาพหมุนเป็นเรื่องง่ายเมื่อคุณเลือกใช้ Carousel V02 ตัวอย่าง Bootstrap ที่เรียบร้อยนี้ไม่มีค่าใช้จ่ายและมาพร้อมกับรหัสที่ใช้งานง่าย

ยินดีต้อนรับ ผู้เริ่มต้นและมืออาชีพ

นอกจากนี้ Carousel V02 ยังมาพร้อมกับพอยน์เตอร์ซ้ายและขวา และเอฟเฟกต์การคลิกที่แสดงไอคอนที่สามารถคลิกได้

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

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V03

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

รหัสที่จัดระเบียบยังช่วยให้คุณทำการปรับปรุง SWIFT และปรับแต่งการออกแบบขั้นสุดท้ายตามที่คุณต้องการ ขนาดหน้าจอที่ต่างกันจะแสดงจำนวนภาพหมุนที่แตกต่างกัน

ตัวอย่างเช่น มีสามเครื่องบนเดสก์ท็อป สองเครื่องบนแท็บเล็ต และอีกหนึ่งเครื่องบนสมาร์ทโฟน แต่คุณสามารถทดสอบได้ด้วยตัวเอง – เพียงเข้าไปที่ตัวอย่างแบบสดด้านล่าง

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V04

ม้าหมุน04
เว็บไซต์ที่แตกต่างกันต้องการองค์ประกอบที่แตกต่างกัน แต่คำรับรองสามารถเป็นประโยชน์ได้ในหลายกรณี Carousel V04 เป็นภาพหมุน Bootstrap 4 ที่ยอดเยี่ยมที่ช่วยให้คุณเพิ่มคำติชมของลูกค้าไปยังเว็บไซต์ของคุณ

ไม่ว่าจะเป็นผลิตภัณฑ์ บริการ แอป หรือเรียกได้ว่า Carousel V04 ใช้ได้กับทุกสิ่ง

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

ฟีเจอร์เด็ดอีกอันคือส่วนรูปโปรไฟล์ลูกค้า/ลูกค้า ซึ่งทำให้เป็น ส่วนตัวมากขึ้น

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V05

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

นอกจากพื้นที่ข้อความหลักแล้ว ยังมีส่วนสำหรับอวาตาร์ ชื่อ และอาชีพอีกด้วย

และในรูปแบบตัวอย่าง Bootstrap ที่แท้จริง เลย์เอาต์นั้นลื่นไหล โดยทำงานบนขนาดหน้าจอที่ทันสมัยทั้งหมดได้โดยไม่มีปัญหา

การเพิ่มข้อความรับรองหรือภาพหมุนตอบรับในเว็บไซต์ บล็อก พอร์ตโฟลิโอออนไลน์ ง่ายกว่าที่เคย

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V06

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

การออกแบบค่อนข้างยืดหยุ่น คุณจึงสามารถปรับเปลี่ยนได้อย่างรวดเร็วและ ทำให้เวอร์ชันของคุณใช้งาน ได้

พึงระลึกไว้เสมอว่าแม้บนมือถือ ทั้งสองส่วนจะยังคงอยู่ เพียงว่ารูปภาพมาก่อนแล้วตามด้วยส่วนข้อความ

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V07

ม้าหมุน 07
หากคุณเปิดบล็อกหรือเว็บไซต์อื่นๆ ที่มีส่วนของบล็อกและต้องการโปรโมตโพสต์เด่น ให้เลือก Carousel V07

ที่จริงแล้ว แม้ว่าคุณต้องการแสดงบทความล่าสุดของคุณหรือข่าวเฉพาะ CATEGORY คุณก็สามารถทำได้เช่นกัน

ม้าหมุน Bootstrap 4 ฟรีนี้ประกอบด้วยส่วนวันที่ รูปภาพ ชื่อ ข้อความ ปุ่มอ่านเพิ่มเติม ผู้แต่ง และหมายเลขความคิดเห็น

มันทำงานได้อย่างราบรื่น โดยอัตโนมัติ แต่คุณสามารถเปลี่ยนได้ ด้วยตนเอง เช่นกัน

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V08

ม้าหมุน 08
นี่เป็นตัวอย่างที่น่าทึ่งของวิธีการทำให้คำนิยมของลูกค้าปรากฏบนเว็บไซต์ของคุณ Carousel V08 เป็นวิธีที่กล้าหาญและสร้างสรรค์ในการ แสดง คำติชม หรือ คำ วิจารณ์ เกี่ยวกับลูกค้า ลูกค้า ผู้ใช้ของคุณ

นอกจากการออกแบบหน้าจอแยกที่ประณีตแล้ว Carousel V08 ยังมีเอฟเฟกต์การเปลี่ยนภาพสุดเจ๋งที่จะดึงดูดความสนใจของทุกคน

คุณไม่จำเป็นต้องเพิ่มคำนิยมในหน้าของคุณตั้งแต่เริ่มต้น – เพียงแค่ใช้ Carousel V08

เครื่องมือนี้ช่วยให้มั่นใจถึงความแตกต่างในทันทีซึ่งคุณสมควรได้รับอย่างมาก

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V09

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

เป็นโซลูชันที่ยอดเยี่ยมสำหรับช่างภาพ นักออกแบบ บล็อกเกอร์ การแสดงพอร์ตโฟลิโอและรายการต่างๆ

ด้วย Bootstrap carousels ของเรา คุณไม่จำเป็นต้องยึดติดกับการกำหนดค่าเริ่มต้นโดยเฉพาะ

คุณสามารถเปลี่ยนสิ่งต่าง ๆ และแนะนำ สัมผัสที่สร้างสรรค์ของคุณ แทนได้เสมอ

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V10

ม้าหมุน 10
Carousel V10 ค่อนข้างคล้ายกับ Carousel V09 เพียงแต่แตกต่างไปจากเดิมอย่างสิ้นเชิง นั่นสมเหตุสมผลหรือไม่?

อย่างไรก็ตาม มันเป็นวิดเจ็ตที่ ยอดเยี่ยม ที่เน้นการแสดง ผลงานชิ้นเอก ของคุณต่อผู้ใช้ทั้งหมดของคุณ

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

มันทำงานบนมือถือหรือไม่? แน่นอน ทำได้! แต่คุณสามารถทดสอบด้วยตัวเองก่อน

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V11

ม้าหมุน 11
Carousel V11 เป็นตัวเลื่อน Bootstrap ขนาดใหญ่ที่มีวัตถุประสงค์หลักเพียงอย่างเดียว - IMAGES ตอนนี้คุณสามารถเพิ่มสีสันบนเว็บไซต์ บล็อก หรือแม้แต่ร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย คุณสามารถใช้เพื่อจัดแสดงไฮไลท์พอร์ตโฟลิโอได้เช่นกัน

วิดเจ็ตฟรีมีวิธีการต่างๆ ในการย้ายจากสไลด์หนึ่งไปยังอีกสไลด์หนึ่ง เพื่อให้ทุกคนสามารถเลือกตัวเลือกที่ต้องการได้

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

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V12

ม้าหมุน12
ดังที่คุณเห็นจากภาพ Carousel V12 ใช้งานได้กับร้านค้าออนไลน์ตั้งแต่แกะกล่อง ช่วยให้คุณสามารถแสดงรายการที่คุณต้องการและเชื่อมโยงภาพหมุนไปยังหน้าผลิตภัณฑ์ สินค้าเหล่านี้อาจเป็นสินค้าใหม่ล่าสุด สินค้าขายดี หรืออะไรก็ได้ที่คุณต้องการ

สิ่งที่ทำให้ Carousel V12 แตกต่างจาก Bootstrap carousels ที่คล้ายคลึงกันอื่น ๆ คือ พื้นหลังแบบทูโทน

และรูปแบบเดียวกันนี้ยังคงเหมือนเดิมแม้บนมือถือ เพียงแสดงภาพหมุน/สไลด์เดียวเท่านั้น

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V13

ม้าหมุน13
ความพิเศษหลักของ Carousel V13 คือการจัดวางแนวตั้งที่สปอร์ต

ไม่ใช่สิ่งที่คุณจะเห็นว่าคนอื่น ใช้บ่อยเกินไป แต่นั่นเป็นสาเหตุหนึ่งที่ทำให้เว็บแอปพลิเคชันของคุณโดดเด่น

ทำไมทำสิ่งต่าง ๆ อย่างที่คนอื่นทำหากคุณสามารถต่อสู้กับ TWIST สร้างสรรค์ของคุณเองได้เสมอ? และยังมีอีกสิ่งที่ยอดเยี่ยมเกี่ยวกับ Carousel V13 ซึ่งฟรี

แต่ Bootstrap carousels อื่น ๆ ทั้งหมดของเรามาโดยไม่มีค่าใช้จ่ายเช่นกัน

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V14

ม้าหมุน14
หากคุณกำลังพิจารณาที่จะอุทิศส่วนหนึ่งของเว็บไซต์ของคุณให้กับคำรับรอง ให้ตระหนักด้วย Carousel V14

วิดเจ็ตภาพหมุนที่ยอดเยี่ยม ทันสมัย ​​น้อยที่สุด และยืดหยุ่นนี้พร้อมแล้วที่จะนำไปใช้ใน PLAY ได้ทันที

สำหรับทุกคนที่ชอบสไตล์นี้ คุณจะชนะครั้งใหญ่ เพราะคุณ ประหยัด เวลาและพลังงาน ให้กับ ตัวเองได้มาก และ. เงิน.

เพิ่มรูปภาพ ข้อความ และคุณพร้อมและพร้อมที่จะม้วน แต่สำหรับทุกท่านที่หาวิธีปรับปรุงสิ่งต่างๆ อยู่เสมอ ลงมือทำเลย

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V15

ม้าหมุน 15
แต่คุณอาจไม่จำเป็นต้องปรับปรุงเทมเพลตก่อนหน้าด้วยซ้ำเพราะคุณสามารถใช้ Carousel V15 ได้ มันคล้ายกันในระดับหนึ่ง แต่การออกแบบที่เพิ่มขึ้นทำให้ค่อนข้างมีส่วนร่วมมากขึ้น

โดยมีพื้นหลังเป็นสีซึ่งมีพื้นที่ข้อความและภาพขนาดย่อ ซึ่งแสดงภาพของลูกค้า/ลูกค้าของคุณ

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

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V16

ม้าหมุน 16
Minimalism ที่ดีที่สุด – นั่นคือสิ่งที่คุณจะได้รับจาก Carousel V16 มันเป็นม้าหมุน Bootstrap ที่ยอดเยี่ยมสำหรับคำรับรอง คำติชม บทวิจารณ์สั้น ๆ คำพูด อืม ทุกประเภทที่แตกต่างกัน

Carousel V16 มาพร้อมกับอ วาตาร์แบบวงกลม ชื่อ และส่วน ข้อความ พร้อมการออกแบบที่ผสานรวมได้ง่าย

ความสามารถในการปรับตัวให้เข้ากับทิศทางการสร้างแบรนด์ต่างๆ ของข้อมูลโค้ดนี้อยู่ที่ระดับ 11

สามารถทำงานได้กับทุกสิ่ง!

เอาเลย ลองใช้เลย ทดสอบน่านน้ำ คุณก็รู้ GOOD STUFF

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V17

ม้าหมุน 17
Carousel V17 เป็นวิดเจ็ตแนวนอนหรือตัวเลื่อนแนวนอนพร้อมเอฟเฟกต์การเปลี่ยนแนวตั้ง

ใช่ ฉันรู้ มันค่อนข้างยุ่งยาก นั่นเป็นเหตุผลที่เรามีการแสดงตัวอย่างแบบสดเพื่อแสดงให้คุณเห็น

แม้ว่าการออกแบบจะเกือบจะเหมือนกันกับรูปแบบอื่นๆ ด้านบน แต่เอฟเฟกต์ แอนิเมชัน หรือสิ่งที่คุณต้องการเรียกว่าทำให้มันโดดเด่น

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

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V18

ม้าหมุน 18
Carousel V18 นั้นแตกต่างออกไปเล็กน้อยเมื่อเทียบกับ Bootstrap carousels อื่นๆ มีการออกแบบแบบแยกส่วน รูปภาพทางด้านซ้ายและพื้นที่ข้อความทางด้านขวา

อย่างไรก็ตาม สิ่งที่ไม่ซ้ำใครคือแท็บหรือการนำทางที่อยู่ด้านบน ทำให้ สลับไปมา ระหว่างสไลด์ ได้ง่ายขึ้น แม้กระทั่งบนมือถือ

เมื่อพูดถึงอุปกรณ์เคลื่อนที่ แท็บจะยังคงเหมือนเดิม แต่การออกแบบแยกจากแนวนอนเป็นแนวตั้ง

หากคุณต้องการสร้างภาพหมุนที่มีรูป ลักษณ์ร่วมสมัย ต่อไป นี้คือตัวอย่างข้อมูลที่สมบูรณ์แบบที่ใช้เคล็ดลับนี้

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V19

ม้าหมุน 19
Bootstrap carousels ของเรามาในสไตล์ต่างๆ มากมาย แต่ถ้าคุณต้องการความเรียบง่ายจริงๆ คุณสามารถใส่เฉพาะข้อความได้

Carousel V19 นั้น ยอดเยี่ยมสำหรับ คำพูด คำรับรอง บทวิจารณ์ และข้อความอื่น ๆ ที่คุณต้องการแสดง

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

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม

ม้าหมุน V20

ม้าหมุน 20
Carousel V20 ไม่ใช่ Bootstrap carousel ประจำวันของคุณ ด้วยการออกแบบดั้งเดิม คุณสามารถสร้าง สไลด์โชว์แบบแบ่งหน้าจอ ได้อย่างง่ายดายและรวดเร็ว ซึ่งจะทำให้ผู้เยี่ยมชมของคุณประทับใจ

หมายเหตุ การออกแบบจะเปลี่ยนไปไม่ว่าจะดูบนมือถือหรือเดสก์ท็อป

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

นอกจากนี้ การเปลี่ยนระหว่างสไลด์ไม่ได้เกิดขึ้นในแนวนอนแต่เป็นแนวตั้ง

ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม