20 ตัวอย่าง Bootstrap 4 Carousel ฟรีสุดเจ๋ง 2021
เผยแพร่แล้ว: 2021-07-22แสดงสไลด์ของรูปภาพและข้อความอย่างน่าทึ่งด้วยเทมเพลตแบบหมุน Bootstrap 4 ที่พัฒนาขึ้นอย่างพิถีพิถันของเรา
เนื่องจากเราไม่สามารถหาตัวอย่างเพียงพอที่จะสร้างคอลเลกชั่นที่มั่นคง เราจึงสร้าง 20 ตัวขึ้นเอง
เรามีอิสระที่จะสร้างรูปแบบต่างๆ มากมาย ในระยะสั้นเรามี บางสิ่งบางอย่างสำหรับทุกคน
เรายังทำให้แน่ใจว่าภาพหมุนของเราประกอบด้วย:
- การออกแบบที่ตอบสนอง
- แอนิเมชั่น
- เล่นอัตโนมัติ
- ลูกศร
- ตัวอย่างภาพขนาดย่อ (ไม่ใช่ทั้งหมด)
คุณยังมีสิทธิ์ปรับแต่งเทมเพลต ซึ่งทำให้น่าตื่นเต้นยิ่งขึ้น
แสดงผลิตภัณฑ์ รายการพอร์ต คำรับรอง และรายการอื่นๆ ในเว็บไซต์ของคุณอย่างเจ้านาย
ไม่. เงิน. ค่าใช้จ่าย.
เทมเพลต Bootstrap 4 Carousel ฟรีที่ดีที่สุด
ม้าหมุน V01
Carousel V01 ทำงานได้อย่างยอดเยี่ยม หากคุณกำลังตามล่าเพื่อเพิ่มแถบเลื่อนแบบเต็มหน้าจอในเว็บแอปพลิเคชันของคุณ ยอดเยี่ยม ใช้งานได้ทั้งการเลื่อนรูปภาพและข้อความแบบเลื่อนทีละรายการ
คุณสามารถใช้ทั้งสองอย่างหรือเลือกเพียงรายการเดียว ขึ้นอยู่กับคุณ นี่เป็นเพียงการแสดงให้เห็นว่า Carousel V01 มีความสามารถมากกว่าสิ่งเดียวเพื่อให้คุณได้รับประโยชน์สูงสุด
นอกจากนี้ การเลื่อนอาจเกิดขึ้นโดยการลากสไลด์ด้วยตนเอง แต่จะม้วนโดยอัตโนมัติด้วย
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V02
การแสดง PORTFOLIO ของคุณด้วยภาพหมุนเป็นเรื่องง่ายเมื่อคุณเลือกใช้ Carousel V02 ตัวอย่าง Bootstrap ที่เรียบร้อยนี้ไม่มีค่าใช้จ่ายและมาพร้อมกับรหัสที่ใช้งานง่าย
ยินดีต้อนรับ ผู้เริ่มต้นและมืออาชีพ
นอกจากนี้ Carousel V02 ยังมาพร้อมกับพอยน์เตอร์ซ้ายและขวา และเอฟเฟกต์การคลิกที่แสดงไอคอนที่สามารถคลิกได้
นี่เป็นสิ่งที่ดีหากคุณต้องการเชื่อมโยงแต่ละภาพหมุนกับส่วนต่างๆ ของผลงานออนไลน์หรือเว็บไซต์ของคุณ
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V03
Carousel V03 เป็นภาพหมุนที่ทันสมัยโดยใช้ Bootstrap Framework คุณสามารถรวมเข้ากับเว็บไซต์หรือบล็อกของคุณได้อย่างรวดเร็วเนื่องจากวิดเจ็ตนี้ เหมาะสำหรับผู้เริ่มต้น
รหัสที่จัดระเบียบยังช่วยให้คุณทำการปรับปรุง SWIFT และปรับแต่งการออกแบบขั้นสุดท้ายตามที่คุณต้องการ ขนาดหน้าจอที่ต่างกันจะแสดงจำนวนภาพหมุนที่แตกต่างกัน
ตัวอย่างเช่น มีสามเครื่องบนเดสก์ท็อป สองเครื่องบนแท็บเล็ต และอีกหนึ่งเครื่องบนสมาร์ทโฟน แต่คุณสามารถทดสอบได้ด้วยตัวเอง – เพียงเข้าไปที่ตัวอย่างแบบสดด้านล่าง
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V04
เว็บไซต์ที่แตกต่างกันต้องการองค์ประกอบที่แตกต่างกัน แต่คำรับรองสามารถเป็นประโยชน์ได้ในหลายกรณี Carousel V04 เป็นภาพหมุน Bootstrap 4 ที่ยอดเยี่ยมที่ช่วยให้คุณเพิ่มคำติชมของลูกค้าไปยังเว็บไซต์ของคุณ
ไม่ว่าจะเป็นผลิตภัณฑ์ บริการ แอป หรือเรียกได้ว่า Carousel V04 ใช้ได้กับทุกสิ่ง
การออกแบบยังน้อยมาก ดังนั้นการเพิ่มลงในธีมเว็บไซต์และข้อบังคับเกี่ยวกับตราสินค้าที่แตกต่างกันจึงเป็นเรื่องง่าย
ฟีเจอร์เด็ดอีกอันคือส่วนรูปโปรไฟล์ลูกค้า/ลูกค้า ซึ่งทำให้เป็น ส่วนตัวมากขึ้น
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V05
Carousel V05 เหมาะอย่างยิ่งหากคุณใช้พื้นหลังที่มีสี เนื่องจากพื้นหลังจะดูสวยงาม เป็นภาพหมุนสำหรับแสดง คำติชมจาก ลูกค้า หรือแม้แต่ บทวิจารณ์ สั้นๆ
นอกจากพื้นที่ข้อความหลักแล้ว ยังมีส่วนสำหรับอวาตาร์ ชื่อ และอาชีพอีกด้วย
และในรูปแบบตัวอย่าง Bootstrap ที่แท้จริง เลย์เอาต์นั้นลื่นไหล โดยทำงานบนขนาดหน้าจอที่ทันสมัยทั้งหมดได้โดยไม่มีปัญหา
การเพิ่มข้อความรับรองหรือภาพหมุนตอบรับในเว็บไซต์ บล็อก พอร์ตโฟลิโอออนไลน์ ง่ายกว่าที่เคย
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V06
Carousel V06 เป็นสไลด์โชว์การออกแบบหน้าจอแยกที่ใหญ่ขึ้น ซึ่งช่วยให้คุณผสมพื้นที่ข้อความกับพื้นที่รูปภาพได้อย่างสวยงาม คุณสามารถใช้เพื่อวัตถุประสงค์ต่างๆ ได้ ดังนั้นคุณเท่านั้นที่จะเป็นผู้กำหนดการใช้งาน
การออกแบบค่อนข้างยืดหยุ่น คุณจึงสามารถปรับเปลี่ยนได้อย่างรวดเร็วและ ทำให้เวอร์ชันของคุณใช้งาน ได้
พึงระลึกไว้เสมอว่าแม้บนมือถือ ทั้งสองส่วนจะยังคงอยู่ เพียงว่ารูปภาพมาก่อนแล้วตามด้วยส่วนข้อความ
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V07
หากคุณเปิดบล็อกหรือเว็บไซต์อื่นๆ ที่มีส่วนของบล็อกและต้องการโปรโมตโพสต์เด่น ให้เลือก Carousel V07
ที่จริงแล้ว แม้ว่าคุณต้องการแสดงบทความล่าสุดของคุณหรือข่าวเฉพาะ CATEGORY คุณก็สามารถทำได้เช่นกัน
ม้าหมุน Bootstrap 4 ฟรีนี้ประกอบด้วยส่วนวันที่ รูปภาพ ชื่อ ข้อความ ปุ่มอ่านเพิ่มเติม ผู้แต่ง และหมายเลขความคิดเห็น
มันทำงานได้อย่างราบรื่น โดยอัตโนมัติ แต่คุณสามารถเปลี่ยนได้ ด้วยตนเอง เช่นกัน
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V08
นี่เป็นตัวอย่างที่น่าทึ่งของวิธีการทำให้คำนิยมของลูกค้าปรากฏบนเว็บไซต์ของคุณ Carousel V08 เป็นวิธีที่กล้าหาญและสร้างสรรค์ในการ แสดง คำติชม หรือ คำ วิจารณ์ เกี่ยวกับลูกค้า ลูกค้า ผู้ใช้ของคุณ
นอกจากการออกแบบหน้าจอแยกที่ประณีตแล้ว Carousel V08 ยังมีเอฟเฟกต์การเปลี่ยนภาพสุดเจ๋งที่จะดึงดูดความสนใจของทุกคน
คุณไม่จำเป็นต้องเพิ่มคำนิยมในหน้าของคุณตั้งแต่เริ่มต้น – เพียงแค่ใช้ Carousel V08
เครื่องมือนี้ช่วยให้มั่นใจถึงความแตกต่างในทันทีซึ่งคุณสมควรได้รับอย่างมาก
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V09
สำหรับคุณทุกคนที่ต้องการนำเสนอเฉพาะภาพในสไลด์โชว์ เทมเพลต Carousel V09 ของเราคือการตัดสินใจที่ถูกต้อง ทุกอย่างดำเนินไปอย่างราบรื่น ปลดล็อกประสบการณ์ผ่อนคลาย ที่ทุกคนจะได้เพลิดเพลิน
เป็นโซลูชันที่ยอดเยี่ยมสำหรับช่างภาพ นักออกแบบ บล็อกเกอร์ การแสดงพอร์ตโฟลิโอและรายการต่างๆ
ด้วย Bootstrap carousels ของเรา คุณไม่จำเป็นต้องยึดติดกับการกำหนดค่าเริ่มต้นโดยเฉพาะ
คุณสามารถเปลี่ยนสิ่งต่าง ๆ และแนะนำ สัมผัสที่สร้างสรรค์ของคุณ แทนได้เสมอ
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V10
Carousel V10 ค่อนข้างคล้ายกับ Carousel V09 เพียงแต่แตกต่างไปจากเดิมอย่างสิ้นเชิง นั่นสมเหตุสมผลหรือไม่?
อย่างไรก็ตาม มันเป็นวิดเจ็ตที่ ยอดเยี่ยม ที่เน้นการแสดง ผลงานชิ้นเอก ของคุณต่อผู้ใช้ทั้งหมดของคุณ

นอกจากส่วนของรูปภาพแล้ว คุณยังสามารถเพิ่มข้อความ/ชื่อเรื่อง ซึ่งจะอธิบายอย่างรวดเร็วว่าเกี่ยวกับอะไร ที่ด้านล่างยังมีรูปขนาดย่อที่ปัดเศษซึ่งให้ภาพรวมคร่าวๆ ในแต่ละสไลด์โชว์
มันทำงานบนมือถือหรือไม่? แน่นอน ทำได้! แต่คุณสามารถทดสอบด้วยตัวเองก่อน
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V11
Carousel V11 เป็นตัวเลื่อน Bootstrap ขนาดใหญ่ที่มีวัตถุประสงค์หลักเพียงอย่างเดียว - IMAGES ตอนนี้คุณสามารถเพิ่มสีสันบนเว็บไซต์ บล็อก หรือแม้แต่ร้านค้าออนไลน์ของคุณได้อย่างง่ายดาย คุณสามารถใช้เพื่อจัดแสดงไฮไลท์พอร์ตโฟลิโอได้เช่นกัน
วิดเจ็ตฟรีมีวิธีการต่างๆ ในการย้ายจากสไลด์หนึ่งไปยังอีกสไลด์หนึ่ง เพื่อให้ทุกคนสามารถเลือกตัวเลือกที่ต้องการได้
เปิดใช้งานรหัสที่ ใช้งานง่าย แนะนำรูปถ่ายของคุณ และสร้างความประทับใจให้ทุกคนด้วยสไลด์โชว์รูปภาพที่ยอดเยี่ยม
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V12
ดังที่คุณเห็นจากภาพ Carousel V12 ใช้งานได้กับร้านค้าออนไลน์ตั้งแต่แกะกล่อง ช่วยให้คุณสามารถแสดงรายการที่คุณต้องการและเชื่อมโยงภาพหมุนไปยังหน้าผลิตภัณฑ์ สินค้าเหล่านี้อาจเป็นสินค้าใหม่ล่าสุด สินค้าขายดี หรืออะไรก็ได้ที่คุณต้องการ
สิ่งที่ทำให้ Carousel V12 แตกต่างจาก Bootstrap carousels ที่คล้ายคลึงกันอื่น ๆ คือ พื้นหลังแบบทูโทน
และรูปแบบเดียวกันนี้ยังคงเหมือนเดิมแม้บนมือถือ เพียงแสดงภาพหมุน/สไลด์เดียวเท่านั้น
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V13
ความพิเศษหลักของ Carousel V13 คือการจัดวางแนวตั้งที่สปอร์ต
ไม่ใช่สิ่งที่คุณจะเห็นว่าคนอื่น ใช้บ่อยเกินไป แต่นั่นเป็นสาเหตุหนึ่งที่ทำให้เว็บแอปพลิเคชันของคุณโดดเด่น
ทำไมทำสิ่งต่าง ๆ อย่างที่คนอื่นทำหากคุณสามารถต่อสู้กับ TWIST สร้างสรรค์ของคุณเองได้เสมอ? และยังมีอีกสิ่งที่ยอดเยี่ยมเกี่ยวกับ Carousel V13 ซึ่งฟรี
แต่ Bootstrap carousels อื่น ๆ ทั้งหมดของเรามาโดยไม่มีค่าใช้จ่ายเช่นกัน
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V14
หากคุณกำลังพิจารณาที่จะอุทิศส่วนหนึ่งของเว็บไซต์ของคุณให้กับคำรับรอง ให้ตระหนักด้วย Carousel V14
วิดเจ็ตภาพหมุนที่ยอดเยี่ยม ทันสมัย น้อยที่สุด และยืดหยุ่นนี้พร้อมแล้วที่จะนำไปใช้ใน PLAY ได้ทันที
สำหรับทุกคนที่ชอบสไตล์นี้ คุณจะชนะครั้งใหญ่ เพราะคุณ ประหยัด เวลาและพลังงาน ให้กับ ตัวเองได้มาก และ. เงิน.
เพิ่มรูปภาพ ข้อความ และคุณพร้อมและพร้อมที่จะม้วน แต่สำหรับทุกท่านที่หาวิธีปรับปรุงสิ่งต่างๆ อยู่เสมอ ลงมือทำเลย
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V15
แต่คุณอาจไม่จำเป็นต้องปรับปรุงเทมเพลตก่อนหน้าด้วยซ้ำเพราะคุณสามารถใช้ Carousel V15 ได้ มันคล้ายกันในระดับหนึ่ง แต่การออกแบบที่เพิ่มขึ้นทำให้ค่อนข้างมีส่วนร่วมมากขึ้น
โดยมีพื้นหลังเป็นสีซึ่งมีพื้นที่ข้อความและภาพขนาดย่อ ซึ่งแสดงภาพของลูกค้า/ลูกค้าของคุณ
สร้างส่วนรับรองที่ทุกคนจะได้ชมและทบทวนอย่างยอดเยี่ยม การเพิ่มความคิดเห็นของลูกค้าเป็นการตัดสินใจที่ชาญฉลาดเสมอ เนื่องจากจะช่วยสร้างความไว้วางใจ ให้กับลูกค้าที่จะมาถึง ใน ไม่ช้า
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V16
Minimalism ที่ดีที่สุด – นั่นคือสิ่งที่คุณจะได้รับจาก Carousel V16 มันเป็นม้าหมุน Bootstrap ที่ยอดเยี่ยมสำหรับคำรับรอง คำติชม บทวิจารณ์สั้น ๆ คำพูด อืม ทุกประเภทที่แตกต่างกัน
Carousel V16 มาพร้อมกับอ วาตาร์แบบวงกลม ชื่อ และส่วน ข้อความ พร้อมการออกแบบที่ผสานรวมได้ง่าย
ความสามารถในการปรับตัวให้เข้ากับทิศทางการสร้างแบรนด์ต่างๆ ของข้อมูลโค้ดนี้อยู่ที่ระดับ 11
สามารถทำงานได้กับทุกสิ่ง!
เอาเลย ลองใช้เลย ทดสอบน่านน้ำ คุณก็รู้ GOOD STUFF
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V17
Carousel V17 เป็นวิดเจ็ตแนวนอนหรือตัวเลื่อนแนวนอนพร้อมเอฟเฟกต์การเปลี่ยนแนวตั้ง
ใช่ ฉันรู้ มันค่อนข้างยุ่งยาก นั่นเป็นเหตุผลที่เรามีการแสดงตัวอย่างแบบสดเพื่อแสดงให้คุณเห็น
แม้ว่าการออกแบบจะเกือบจะเหมือนกันกับรูปแบบอื่นๆ ด้านบน แต่เอฟเฟกต์ แอนิเมชัน หรือสิ่งที่คุณต้องการเรียกว่าทำให้มันโดดเด่น
วิดเจ็ตยังเน้นที่รูปภาพเท่านั้น ทำให้ข้อความและรายการพิเศษอื่นๆ ออกมาเพื่อ ประสบการณ์ที่ราบรื่นยิ่งขึ้น
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V18
Carousel V18 นั้นแตกต่างออกไปเล็กน้อยเมื่อเทียบกับ Bootstrap carousels อื่นๆ มีการออกแบบแบบแยกส่วน รูปภาพทางด้านซ้ายและพื้นที่ข้อความทางด้านขวา
อย่างไรก็ตาม สิ่งที่ไม่ซ้ำใครคือแท็บหรือการนำทางที่อยู่ด้านบน ทำให้ สลับไปมา ระหว่างสไลด์ ได้ง่ายขึ้น แม้กระทั่งบนมือถือ
เมื่อพูดถึงอุปกรณ์เคลื่อนที่ แท็บจะยังคงเหมือนเดิม แต่การออกแบบแยกจากแนวนอนเป็นแนวตั้ง
หากคุณต้องการสร้างภาพหมุนที่มีรูป ลักษณ์ร่วมสมัย ต่อไป นี้คือตัวอย่างข้อมูลที่สมบูรณ์แบบที่ใช้เคล็ดลับนี้
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V19
Bootstrap carousels ของเรามาในสไตล์ต่างๆ มากมาย แต่ถ้าคุณต้องการความเรียบง่ายจริงๆ คุณสามารถใส่เฉพาะข้อความได้
Carousel V19 นั้น ยอดเยี่ยมสำหรับ คำพูด คำรับรอง บทวิจารณ์ และข้อความอื่น ๆ ที่คุณต้องการแสดง
เนื่องจากการออกแบบมีน้อยที่สุดเท่าที่จะทำได้ คุณเกือบจะสามารถคัดลอกและวางโค้ดลงในเว็บแอปพลิเคชันของคุณและเรียกใช้งานได้ทุกวัน เพิ่มเนื้อหาที่คุณต้องการแชร์ เท่านี้ก็เรียบร้อย
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมม้าหมุน V20
Carousel V20 ไม่ใช่ Bootstrap carousel ประจำวันของคุณ ด้วยการออกแบบดั้งเดิม คุณสามารถสร้าง สไลด์โชว์แบบแบ่งหน้าจอ ได้อย่างง่ายดายและรวดเร็ว ซึ่งจะทำให้ผู้เยี่ยมชมของคุณประทับใจ
หมายเหตุ การออกแบบจะเปลี่ยนไปไม่ว่าจะดูบนมือถือหรือเดสก์ท็อป
บนมือถือ ข้อความจะซ้อนทับส่วนของรูปภาพ ไม่ปรากฏเป็นหน้าจอแยกอีกต่อไป นอกจากนี้ Carousel V20 ยังมีชื่อ ข้อความ และ CTA ซึ่งคุณเปิดใช้งานได้โดยไม่ต้องเหนื่อย
นอกจากนี้ การเปลี่ยนระหว่างสไลด์ไม่ได้เกิดขึ้นในแนวนอนแต่เป็นแนวตั้ง
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโม