CSS Infinite Slider พลิกภาพโพลารอยด์

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

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

การตั้งค่าพื้นฐาน

HTML และ CSS ส่วนใหญ่สำหรับแถบเลื่อนนี้คล้ายกับตัวเลื่อนวงกลมที่เราทำไว้ครั้งก่อน อันที่จริง เรากำลังใช้มาร์กอัปเดียวกัน:

และนี่คือ CSS พื้นฐานที่กำหนดพาเรนต์ของเรา .gallery คอนเทนเนอร์เป็นตารางที่รูปภาพทั้งหมดวางซ้อนกัน:

.gallery  {
  display: grid;
  width: 220px; /* controls the size */
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 4px #0007;
}

ไม่มีอะไรซับซ้อนจนถึงตอนนี้ แม้แต่รูปแบบโพลารอยด์สำหรับรูปภาพ สิ่งที่ฉันใช้ก็แค่บางส่วนเท่านั้น border และ box-shadow. คุณอาจจะทำได้ดีกว่านี้ ดังนั้นอย่าลังเลที่จะเล่นกับสไตล์การตกแต่งเหล่านั้น! เราจะโฟกัสไปที่แอนิเมชันซึ่งเป็นส่วนที่ยากที่สุด

เคล็ดลับคืออะไร?

ตรรกะของแถบเลื่อนนี้ขึ้นอยู่กับลำดับการซ้อนภาพ — ใช่แล้ว เราจะเล่นด้วย z-index. ภาพทั้งหมดเริ่มต้นด้วยสิ่งเดียวกัน z-index ค่า (2) ซึ่งจะทำให้ภาพสุดท้ายอยู่ด้านบนของสแต็กอย่างมีเหตุผล

เราถ่ายภาพสุดท้ายนั้นและเลื่อนไปทางขวาจนกว่าจะเผยให้เห็นภาพถัดไปในกอง จากนั้นเราก็ลดขนาดภาพลง z-index ค่าจากนั้นเราเลื่อนกลับเข้าไปในสำรับ และเนื่องจากมัน z-index ค่าต่ำกว่าภาพที่เหลือจะกลายเป็นภาพสุดท้ายในกอง

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

ทีนี้ลองจินตนาการถึงกลอุบายเดียวกันกับทุกภาพ นี่คือรูปแบบถ้าเราใช้ :nth-child() หลอกตัวเลือกเพื่อแยกความแตกต่างของภาพ:

• เราเลื่อนภาพสุดท้าย (N). ภาพถัดไปจะปรากฏ (N - 1).
• เราเลื่อนภาพถัดไป (N - 1). ภาพถัดไปจะปรากฏ (N - 2)
• เราเลื่อนภาพถัดไป (N - 2). ภาพถัดไปจะปรากฏ (N - 3)
• (เราทำขั้นตอนเดิมต่อไปจนกว่าจะถึงรูปแรก)
• เราเลื่อนภาพแรก (1). รูปสุดท้าย (N) ปรากฏให้เห็นอีกครั้ง

นั่นคือสไลเดอร์ที่ไม่มีที่สิ้นสุดของเรา!

ผ่าแอนิเมชั่น

หากคุณจำบทความที่แล้วได้ ฉันกำหนดแอนิเมชันเพียงภาพเดียวและเล่นด้วยความล่าช้าเพื่อควบคุมแต่ละภาพ เราจะทำสิ่งเดียวกันที่นี่ ขั้นแรกให้ลองนึกภาพเส้นเวลาของภาพเคลื่อนไหวของเรา เราจะเริ่มด้วยภาพสามภาพ จากนั้นสรุปในภายหลังสำหรับตัวเลขใดๆ (N) ของรูปภาพ

แอนิเมชั่นของเราแบ่งออกเป็นสามส่วน: "เลื่อนไปทางขวา", "เลื่อนไปทางซ้าย" และ "อย่าขยับ" เราสามารถระบุการหน่วงเวลาระหว่างแต่ละภาพได้อย่างง่ายดาย ถ้าเราพิจารณาว่าภาพแรกเริ่มที่ 0sและระยะเวลาเท่ากับ 6sจากนั้นอันที่สองจะเริ่มที่ -2s และตัวที่สามที่ -4s.

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */

เรายังเห็นได้ว่าส่วน "ไม่ขยับ" ใช้เวลา XNUMX ใน XNUMX ของแอนิเมชั่นทั้งหมด (2*100%/3) ในขณะที่ส่วน "เลื่อนไปทางขวา" และ "เลื่อนไปทางซ้าย" คิดรวมกันหนึ่งในสาม ดังนั้น แต่ละส่วนจะเท่ากับ 100%/6 ของแอนิเมชั่นทั้งหมด

เราสามารถเขียนแอนิเมชั่นคีย์เฟรมได้ดังนี้

@keyframes slide {
  0%     { transform: translateX(0%); }
  16.67% { transform: translateX(120%); }
  33.34% { transform: translateX(0%); }
  100%   { transform: translateX(0%); } 
}

ที่ 120% เป็นค่าโดยพลการ ฉันต้องการสิ่งที่ยิ่งใหญ่กว่า 100%. ภาพต้องเลื่อนไปทางขวาจากภาพที่เหลือ ในการทำเช่นนั้น มันต้องเคลื่อนที่อย่างน้อย 100% ขนาดของมัน นั่นเป็นเหตุผลที่ฉันไป 120% - เพื่อเพิ่มพื้นที่พิเศษ

ตอนนี้เราต้องพิจารณาว่า z-index. อย่าลืมว่าเราต้องปรับปรุงรูปภาพของ z-index ความคุ้มค่า หลังจาก มันเลื่อนไปทางขวาของกองและ ก่อน เราเลื่อนกลับไปที่ด้านล่างของกอง

@keyframes slide {
  0%     { transform: translateX(0%);   z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } /* we update the z-order here */
  33.34% { transform: translateX(0%);   z-index: 1; }
  100%   { transform: translateX(0% );  z-index: 1; }  
}

แทนที่จะกำหนดสถานะเดียวที่ 16.67% (100%/6) ในไทม์ไลน์ เรากำลังกำหนดสองสถานะที่จุดที่เกือบจะเหมือนกัน (16.66% และ 16.67%) ที่ไหน z-index ค่าจะลดลงก่อนที่เราจะเลื่อนภาพกลับไปที่เด็ค

นี่คือสิ่งที่เกิดขึ้นเมื่อเรารวบรวมทั้งหมดเข้าด้วยกัน:

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

เราจำเป็นต้องติดตามอย่างใกล้ชิด z-index การเปลี่ยนแปลง ในขั้นต้นภาพทั้งหมดมี z-index: 2. นั่นหมายความว่าลำดับการเรียงซ้อนควรไป...

Our eyes 👀 --> 3rd (2) | 2nd (2) | 1st (2)

เราเลื่อนภาพที่สามและอัปเดต z-index เพื่อรับคำสั่งซื้อนี้:

Our eyes 👀 --> 2nd (2) | 1st (2) | 3rd (1)

เราทำเช่นเดียวกันกับอันที่สอง:

Our eyes 👀 --> 1st (2) | 3rd (1) | 2nd (1)

…และอันแรก:

Our eyes 👀 --> 3rd (1) | 2nd (1) | 1st (1)

เราทำอย่างนั้นและทุกอย่างดูเหมือนจะดี แต่ในความเป็นจริงแล้ว ไม่ใช่! เมื่อภาพแรกถูกย้ายไปด้านหลัง ภาพที่สามจะเริ่มการวนซ้ำอีกครั้ง ซึ่งหมายถึงภาพจะกลับไปที่ z-index: 2:

Our eyes 👀 --> 3rd (2) | 2nd (1) | 1st (1)

ดังนั้น ในความเป็นจริง เราไม่เคยมีภาพทั้งหมดเลย z-index: 2 เลย! เมื่อรูปภาพไม่เคลื่อนไหว (เช่น ส่วน "ไม่เคลื่อนไหว" ของภาพเคลื่อนไหว) z-index is 1. หากเราเลื่อนภาพที่สามและอัปเดต z-index ค่าจาก 2 ไปยัง 1มันจะยังคงอยู่ด้านบน! เมื่อทุกรูปมีความเหมือนกัน z-indexภาพสุดท้ายในลำดับต้นทาง — รูปภาพที่สามของเราในกรณีนี้ — อยู่ด้านบนสุดของสแต็ก การเลื่อนภาพที่ XNUMX จะทำให้เกิดผลลัพธ์ต่อไปนี้:

Our eyes 👀 --> 3rd (1) | 2nd (1) | 1st (1)

ภาพที่สามยังคงอยู่ที่ด้านบน และหลังจากนั้น เราจะย้ายภาพที่สองไปที่ด้านบนเมื่อภาพเคลื่อนไหวเริ่มต้นใหม่ที่ z-index: 2:

Our eyes 👀 --> 2nd (2) | 3rd (1) | 1st (1)

เมื่อเราเลื่อนมัน เราจะได้:

Our eyes 👀 --> 3rd (1) | 2nd (1) | 1st (1)

จากนั้นภาพแรกจะกระโดดขึ้นด้านบน:

Our eyes 👀 --> 1st(2) | 3rd (1) | 2nd (1)

ตกลง ฉันหลงทาง ตรรกะทั้งหมดผิดแล้ว?

ฉันรู้ มันสับสน แต่ตรรกะของเราไม่ได้ผิดทั้งหมด เราต้องแก้ไขแอนิเมชั่นเล็กน้อยเพื่อให้ทุกอย่างทำงานตามที่เราต้องการ เคล็ดลับคือการรีเซ็ตอย่างถูกต้อง z-index.

ลองมาในสถานการณ์ที่ภาพที่สามอยู่ด้านบน:

Our eyes 👀 -->  3rd (2) | 2nd (1) | 1st (1)

เราเห็นว่าเลื่อนภาพที่สามและเปลี่ยนภาพ z-index เก็บไว้ด้านบน สิ่งที่เราต้องทำคือการปรับปรุง z-index ของภาพที่สอง ดังนั้น ก่อนที่เราจะเลื่อนรูปภาพที่สามออกจากสำรับ เราจะอัปเดต z-index ของภาพที่สองถึง 2.

กล่าวอีกนัยหนึ่งคือเรารีเซ็ต z-index ของภาพที่สองก่อนที่ภาพเคลื่อนไหวจะจบลง

เครื่องหมายบวกสีเขียวแสดงถึงการเพิ่มขึ้น z-index ไปยัง 2และสัญลักษณ์ลบสีแดงสัมพันธ์กับ z-index: 1. ภาพที่สองเริ่มต้นด้วย z-index: 2แล้วเราจะอัปเดตเป็น 1 เมื่อมันเลื่อนออกจากดาดฟ้า แต่ก่อนที่ภาพแรกจะเลื่อนออกไปจากสำรับ เราเปลี่ยน z-index ของภาพที่สองกลับไปที่ 2. สิ่งนี้จะทำให้แน่ใจว่าทั้งสองภาพมีความเหมือนกัน z-indexแต่ถึงกระนั้น อันที่สามจะยังคงอยู่บนสุดเพราะปรากฏใน DOM ในภายหลัง แต่หลังจากสไลด์ภาพที่สามแล้ว z-index ได้รับการปรับปรุง มันย้ายไปด้านล่าง

นี่เป็นสองในสามของภาพเคลื่อนไหว ดังนั้นมาอัปเดตคีย์เฟรมของเราตามนี้:

@keyframes slide {
  0%     { transform: translateX(0%);   z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } /* we update the z-order here */
  33.34% { transform: translateX(0%);   z-index: 1; }
  66.33% { transform: translateX(0%);   z-index: 1; }
  66.34% { transform: translateX(0%);   z-index: 2; } /* and also here */
  100%   { transform: translateX(0%);   z-index: 2; }  
}

ดีขึ้นเล็กน้อยแต่ก็ยังไม่ ทีเดียว ที่นั่น. มีปัญหาอื่น ...

ไม่นะ เรื่องนี้จะไม่มีวันจบสิ้น!

ไม่ต้องกังวล เราจะไม่เปลี่ยนคีย์เฟรมอีกเพราะปัญหานี้จะเกิดขึ้นก็ต่อเมื่อเกี่ยวข้องกับรูปภาพสุดท้ายเท่านั้น เราสามารถสร้างภาพเคลื่อนไหวคีย์เฟรม "พิเศษ" สำหรับภาพสุดท้ายโดยเฉพาะเพื่อแก้ไขสิ่งต่างๆ

เมื่อภาพแรกอยู่ด้านบน เรามีสถานการณ์ต่อไปนี้:

Our eyes 👀 -->  1st (2) | 3rd (1) | 2nd (1)

เมื่อพิจารณาจากการปรับแต่งก่อนหน้านี้ รูปภาพที่สามจะกระโดดขึ้นด้านบนก่อนที่รูปภาพแรกจะเลื่อน จะเกิดขึ้นในสถานการณ์นี้เท่านั้น เพราะภาพถัดไปที่เคลื่อนต่อจากภาพแรกคือ ล่าสุด ภาพที่มีลำดับสูงกว่าใน DOM ภาพที่เหลือไม่เป็นไรเพราะเรามี Nแล้ว N - 1แล้วเราไปจาก 3 ไปยัง 2และ 2 ไปยัง 1…แต่แล้วเราก็จากไป 1 ไปยัง N.

เพื่อหลีกเลี่ยงปัญหานี้ เราจะใช้คีย์เฟรมต่อไปนี้สำหรับรูปภาพสุดท้าย:

@keyframes slide-last {
  0%     { transform: translateX(0%);   z-index: 2;}
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } /* we update the z-order here */
  33.34% { transform: translateX(0%);   z-index: 1; }
  83.33% { transform: translateX(0%);   z-index: 1; }
  83.34% { transform: translateX(0%);   z-index: 2; } /* and also here */
  100%   { transform: translateX(0%);   z-index: 2; }
}

เรารีเซ็ต z-index ความคุ้มค่า 5/6 ผ่านแอนิเมชั่น (แทนที่จะเป็น XNUMX ใน XNUMX) คือตอนที่ภาพแรกออกจากกอง เลยไม่เห็นกระโดดเลย!

ธาดา! ตอนนี้สไลเดอร์ที่ไม่มีที่สิ้นสุดของเราสมบูรณ์แบบแล้ว! นี่คือรหัสสุดท้ายของเราในรัศมีภาพทั้งหมด:

.gallery > img {
  animation: slide 6s infinite;
}
.gallery > img:last-child {
  animation-name: slide-last;
}
.gallery > img:nth-child(2) { animation-delay: -2s; } 
.gallery > img:nth-child(3) { animation-delay: -4s; }

@keyframes slide {
  0% { transform: translateX(0%); z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } 
  33.34% { transform: translateX(0%); z-index: 1; }
  66.33% { transform: translateX(0%); z-index: 1; }
  66.34% { transform: translateX(0%); z-index: 2; } 
  100% { transform: translateX(0%); z-index: 2; }
}
@keyframes slide-last {
  0% { transform: translateX(0%); z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; }
  33.34% { transform: translateX(0%); z-index: 1; }
  83.33% { transform: translateX(0%); z-index: 1; }
  83.34% { transform: translateX(0%); z-index: 2; } 
  100%  { transform: translateX(0%); z-index: 2; }
}

รองรับภาพจำนวนเท่าใดก็ได้

ตอนนี้แอนิเมชั่นของเราใช้งานได้กับภาพสามภาพแล้ว มาทำให้มันใช้งานได้กับตัวเลขใดๆ (N) ของรูปภาพ แต่ก่อนอื่น เราสามารถเพิ่มประสิทธิภาพงานของเราได้เล็กน้อยโดยแยกแอนิเมชันเพื่อหลีกเลี่ยงความซ้ำซ้อน:

.gallery > img {
  z-index: 2;
  animation: 
    slide 6s infinite,
    z-order 6s infinite steps(1);
}
.gallery > img:last-child {
  animation-name: slide, z-order-last;
}
.gallery > img:nth-child(2) { animation-delay: -2s; } 
.gallery > img:nth-child(3) { animation-delay: -4s; }

@keyframes slide {
  16.67% { transform: translateX(120%); }
  33.33% { transform: translateX(0%); }
}
@keyframes z-order {
  16.67%,
  33.33% { z-index: 1; }
  66.33% { z-index: 2; }
}
@keyframes z-order-last {
  16.67%,
  33.33% { z-index: 1; }
  83.33% { z-index: 2; }
}

โค้ดน้อยลงแล้ว! เราสร้างแอนิเมชั่นหนึ่งอันสำหรับส่วนที่เลื่อนและอีกอันสำหรับ z-index การปรับปรุง โปรดทราบว่าเราใช้ steps(1) บน z-index ภาพเคลื่อนไหว นั่นเป็นเพราะฉันต้องการเปลี่ยนอย่างกะทันหัน z-index ไม่เหมือนภาพเคลื่อนไหวแบบเลื่อนที่เราต้องการการเคลื่อนไหวที่ราบรื่น

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

@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i)/$n}*6s);
  }
}

นั่นหมายความว่าเรากำลังย้ายจาก vanilla CSS เป็น Sass ต่อไปเราต้องจินตนาการว่าไทม์ไลน์มีมาตราส่วนอย่างไร N ภาพ อย่าลืมว่าแอนิเมชั่นเกิดขึ้นในสามขั้นตอน:

หลังจาก "เลื่อนไปทางขวา" และ "เลื่อนไปทางซ้าย" รูปภาพควรคงอยู่จนกว่ารูปภาพที่เหลือจะผ่านลำดับ ดังนั้นส่วน "ไม่ขยับ" จึงต้องใช้เวลาเท่ากับ (N - 1) เป็น "เลื่อนไปทางขวา" และ "เลื่อนไปทางซ้าย" และภายในการวนซ้ำหนึ่งครั้ง N ภาพจะเลื่อน ดังนั้น "เลื่อนไปทางขวา" และ "เลื่อนไปทางซ้าย" ทั้งสองใช้เวลา 100%/N ของไทม์ไลน์แอนิเมชั่นทั้งหมด ภาพเลื่อนออกไปจากกองที่ (100%/N)/2 และถอยกลับที่ 100%/N .

เราสามารถเปลี่ยนสิ่งนี้ได้:

@keyframes slide {
  16.67% { transform: translateX(120%); }
  33.33% { transform: translateX(0%); }
}

…สำหรับสิ่งนี้:

@keyframes slide {
  #{50/$n}%  { transform: translateX(120%); }
  #{100/$n}% { transform: translateX(0%); }
}

ถ้าเราเปลี่ยน N กับ 3, เราได้รับ 16.67% และ 33.33% เมื่อมี 3 ภาพในกอง เป็นตรรกะเดียวกันกับลำดับการซ้อนที่เราจะมีสิ่งนี้:

@keyframes z-order {
  #{50/$n}%,
  #{100/$n}% { z-index: 1; }
  66.33% { z-index: 2; }
}

เรายังคงต้องปรับปรุง 66.33% จุด. นั่นควรจะเป็นที่ที่ภาพจะรีเซ็ต z-index ก่อนจบอนิเมชั่น ในเวลาเดียวกัน ภาพถัดไปก็เริ่มเลื่อน เนื่องจากส่วนที่เลื่อนใช้เวลา 100%/N, การรีเซ็ตควรเกิดขึ้นที่ 100% - 100%/N:

@keyframes z-order {
  #{50/$n}%,
  #{100/$n}% { z-index: 1; }
  #{100 - 100/$n}% { z-index: 2; }
}

แต่สำหรับเรา z-order-last แอนิเมชั่นในการทำงาน มันควรจะเกิดขึ้นหลังจากนั้นเล็กน้อยในลำดับ จำการแก้ไขที่เราทำกับภาพสุดท้ายได้ไหม กำลังรีเซ็ต z-index ค่าจะต้องเกิดขึ้นเมื่อภาพแรกอยู่นอกกอง ไม่ใช่เมื่อภาพเริ่มเลื่อน เราสามารถใช้เหตุผลเดียวกันนี้ในคีย์เฟรมของเรา:

@keyframes z-order-last {
  #{50/$n}%,
  #{100/$n}% { z-index: 1; }
  #{100 - 50/$n}% { z-index: 2; }
}

เสร็จแล้ว! นี่คือสิ่งที่เราได้รับเมื่อใช้ภาพห้าภาพ:

เราสามารถเพิ่มการหมุนเวียนเพื่อทำให้สิ่งต่าง ๆ น่าสนใจยิ่งขึ้น:

ทั้งหมดที่ฉันทำคือผนวก rotate(var(--r)) ไป transform คุณสมบัติ. ภายในวง --r ถูกกำหนดด้วยมุมสุ่ม:

@for $i from 1 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    --r: #{(-20 + random(40))*1deg}; /* a random angle between -20deg and 20deg */
  }
}

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

ตัดขึ้น

ทั้งหมดนั้น z-index การทำงานเป็นการสร้างสมดุลครั้งใหญ่ ใช่ไหม? หากคุณไม่แน่ใจว่าลำดับการเรียงซ้อนทำงานอย่างไรก่อนแบบฝึกหัดนี้ คุณอาจมีความคิดที่ดีกว่านี้มาก! หากคุณพบว่าคำอธิบายบางอย่างทำตามได้ยาก เราขอแนะนำให้คุณอ่านบทความและ วาดแผนที่ด้วยดินสอและกระดาษ. พยายามอธิบายแต่ละขั้นตอนของแอนิเมชันโดยใช้รูปภาพจำนวนต่างกันเพื่อให้เข้าใจเคล็ดลับได้ดีขึ้น

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

ครั้งหน้าเราจะทำแถบเลื่อน 3 มิติ คอยติดตาม!