คอมโพเนนต์ amp-carousel สร้างภาพหมุนสำหรับแสดงรูปภาพต่างๆ คุณปรับแต่งรูปลักษณ์และการทำงานของภาพหมุนได้โดยการแก้ไขคุณสมบัติ
วิธีใช้คอมโพเนนต์ amp-carousel ในโครงการของคุณมีดังต่อไปนี้
-
เปิดแผงคอมโพเนนต์ แล้วเปิดโฟลเดอร์แกลเลอรี
-
ลากคอมโพเนนต์ amp-carousel
ลงในพื้นที่งาน
-
ในแผงคุณสมบัติ ให้หาส่วนคุณสมบัติ amp-carousel แล้วป้อนชื่อของคอมโพเนนต์ในช่องชื่อ
-
ในช่องรูปภาพ ให้เพิ่มรูปภาพลงในแกลเลอรีโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้
- คลิกปุ่มเลือกรูปภาพในแกลเลอรี
คลิกปุ่มเลือกรูปภาพเพื่อเรียกดูไฟล์ภาพ หรือลากไฟล์ไปยังกล่องโต้ตอบโดยตรง
- ป้อน URL ของรูปภาพโดยคั่นด้วยเครื่องหมายจุลภาค
- คลิกปุ่มเลือกรูปภาพในแกลเลอรี
-
ปรับเปลี่ยนคุณสมบัติอื่นๆ ของคอมโพเนนต์ (คำอธิบายอยู่ด้านล่าง) หากต้องการ
มุมมองโค้ด
images แทนที่จะรวมไว้เป็นรายการย่อย มิฉะนั้น ซอร์สโค้ดของคอมโพเนนต์ควรเป็นไปตามข้อกำหนดอย่างเป็นทางการ (ไฟล์ที่เผยแพร่จะเป็นไปตามข้อกำหนดทั้งหมด)วิธีเรียงลำดับใหม่หรือนำรูปภาพในภาพหมุนออกมีดังต่อไปนี้
- ในส่วนคุณสมบัติ amp-carousel ของแผงคุณสมบัติ ให้คลิกเลือกรูปภาพในแกลเลอรี
- ลากรูปภาพไปยังตำแหน่งใหม่เพื่อจัดเรียงใหม่ หรือวางเคอร์เซอร์เหนือรูปภาพแล้วคลิกไอคอนลบรูปภาพ
เพื่อนำรูปภาพออกจากแกลเลอรี
- คลิกตกลง
คุณสมบัติ
เปลี่ยนรูปลักษณ์และการทำงานของคอมโพเนนต์ amp-carousel ในแผง "คุณสมบัติ"
| คุณสมบัติ | คำอธิบาย |
|---|---|
| ชื่อ | ชื่อ amp-carousel |
| รูปภาพ | URL ของรูปภาพที่แสดงในภาพหมุน |
| ประเภท | ประเภทการแสดงผล
|
| เล่นอัตโนมัติ |
ใช้เมื่อมีการตั้งค่าเป็นสไลด์เท่านั้น
เลือกช่องนี้เพื่อไปยังรูปภาพถัดไปในภาพหมุนโดยอัตโนมัติโดยที่ผู้ใช้ไม่ต้องโต้ตอบ โดยจะต้องมีอย่างน้อย 3 สไลด์เพื่อให้เล่นอัตโนมัติได้ |
| การหน่วงเวลา |
ใช้เมื่อตั้งค่าประเภทเป็นสไลด์และเปิดใช้เล่นอัตโนมัติไว้เท่านั้น
ระยะห่างของเวลาเป็นมิลลิวินาทีก่อนเปลี่ยนไปเป็นสไลด์ถัดไป การหน่วงเวลาเริ่มต้นคือ 5,000 มิลลิวินาที (5 วินาที) |
| แสดงตัวควบคุม | เลือกช่องนี้เพื่อแสดงลูกศรซ้ายและขวาให้ผู้ใช้นำทางรายการต่างๆ ในภาพหมุนบนอุปกรณ์เคลื่อนที่ ในเดสก์ท็อป จะมีลูกศรแสดงอยู่เสมอสำหรับภาพหมุนที่มีภาพหลายรายการ |
| วนซ้ำ |
ใช้เมื่อมีการตั้งค่าเป็นสไลด์เท่านั้น
เลือกช่องนี้เพื่ออนุญาตให้แสดงต่อจากสไลด์แรกหรือสไลด์สุดท้ายได้ ภาพหมุนจะวนซ้ำไปจนสุดทางอีกด้านหนึ่ง โดยจะต้องมีอย่างน้อย 3 สไลด์เพื่อให้วนซ้ำได้ |
เหตุการณ์และการทำงาน
เหตุการณ์ที่ส่งโดยคอมโพเนนต์ amp-carouselคุณทริกเกอร์การทำงานอื่นๆ ได้โดยอิงตามเหตุการณ์ของคอมโพเนนต์ amp-carousel ดังต่อไปนี้
| เหตุการณ์ | คำอธิบาย |
|---|---|
| เปลี่ยนสไลด์ | ส่งเมื่อสไลด์ที่แสดงอยู่มีการเปลี่ยนแปลง |
หากต้องการเลือกเหตุการณ์ใดเหตุการณ์หนึ่งในกล่องโต้ตอบเหตุการณ์ ให้ตั้งค่าคอมโพเนนต์ amp-carousel เป็นเป้าหมาย
การทำงานของคอมโพเนนต์ amp-carousel ที่ทริกเกอร์ให้ตอบสนองต่อเหตุการณ์อื่นได้มีดังนี้
| การทำงาน | ตัวเลือกการกำหนดค่า |
|---|---|
| ไปที่สไลด์ |
|
เมื่อเลือกการทำงานอย่างใดอย่างหนึ่งในกล่องโต้ตอบเหตุการณ์ ให้ตั้งค่าคอมโพเนนต์ amp-carousel เป็นตัวรับ
ดูวิธีกำหนดค่าเหตุการณ์
แสดงตัวอย่าง
การแสดงตัวอย่างคอมโพเนนต์นี้ภายในอินเทอร์เฟซของ Google Web Designer นั้นทำไม่ได้ หากต้องการดูการทำงานของคอมโพเนนต์ ให้แสดงตัวอย่างเอกสารในเบราว์เซอร์ที่ต้องการ โดยคลิกปุ่มแสดงตัวอย่าง 