نوار عکس‌ها را می‌توان به عنوان یک لیست ul/li‍ شامل عکس‌ها <img> نشان داد.

معمولا، چنین نوار عریض است، اما ما یک <div> با سیز ثایت دور قرار می‌دهیم تا آنرا “ببریم”. با اینکار فقط قستمی از آن نمایش داده می‌شود:

برا اینکه لیست را افقی نمایش دهیم باید خصوصیات CSS‌ درستی را برای <li> نسبت دهیم. مثلا display: inline-block.

برای <img> باید display را تغییر دهیم. چرا که مقدار پیشفرض آن inline است. فضای رزورشده اضافی زیر عناصر inline قرار دارد (برای “letter tail” ها)، برای حذف آن می‌توانیم از display:block کمک بگیریم.

برای پیمایش کردن، می‌توانیم <ul> را تغییر مکان دهیم. راه‌های زیادی برای این کار وجود دارد. برای مثال عوض کردن مقدار margin-left یا (برای کارایی بالاتر) استفاده از transform: translateX()‍:

‍<div> بیرونی طول ثابتی دارد. پس عکس‌های “اضافه” برش داده می‌شوند.

همه‌ی این اسلایدر یک حزء گرافیکی مستقل روی صحفه است. پس بهتر است آنرا درون یک <div class="carousel"> قرار دهیم و اجزای درون آنرا استایل دهیم

باز کردن راه‌حل درون sandbox.