طراحی نوار اسلاید افقی با CSS

نوار اسلاید افقی (Horizontal Slider) یکی از اجزای مهم رابط کاربری است که می‌تواند به شکل کنترل مقدار (range control) یا نمایش محتوای متحرک (carousel/slider) پیاده‌سازی شود. در این مقاله به صورت کاربردی و با مثال‌های کد، نحوه طراحی هر دو نوع با CSS خالص یا با حداقل جاوااسکریپت و نکات مربوط به دسترس‌پذیری، ریسپانسیو و بهینه‌سازی را بررسی می‌کنیم.

چرا دو نوع؟

نوار اسلاید می‌تواند به دو شکل مطرح شود:

• کنترل مقدار (input[type=range]) برای انتخاب عدد یا مقدار.
• اسلایدر محتوایی (carousel) برای نمایش تصاویر یا کارت‌ها به‌صورت افقی.

طراحی نوار اسلاید مقدار (Range) با CSS

برای سفارشی‌سازی ظاهر input[type=range] باید به شبه‌العنصرهای مرتبط با مرورگرها توجه کرد. مثال زیر یک نمونه پایه و قابل شخصی‌سازی است:

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, #4caf50 0%, #4caf50 50%, #ddd 50%, #ddd 100%);
  border-radius: 5px;
  outline: none;
}

/* WebKit track */input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  background: transparent;
}

/* WebKit thumb */input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #4caf50;
  border-radius: 50%;
  margin-top: -5px; /* centers thumb on track */}

/* Firefox */input[type="range"]::-moz-range-track {
  height: 10px;
  background: #ddd;
  border-radius: 5px;
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #4caf50;
  border-radius: 50%;
}

این کد ظاهر پایه اسلایدر را تنظیم می‌کند. اما برای نمایش مقدار پرشده (filled track) باید با جاوااسکریپت درصد مقدار را به background اندازه‌دهی کرد یا از متدهای CSS متغیر و calc استفاده نمود. در مرورگرهای مدرن، می‌توان از ترکیب CSS variables و event input برای بروزرسانی نمای پرشدگی استفاده کرد.

/* نمونه با CSS variable که توسط JS مقداردهی می‌شود */input[type="range"] {
  --val: 50;
  background: linear-gradient(90deg, #4caf50 0%, #4caf50 var(--val)%, #ddd var(--val)%, #ddd 100%);
}

در این حالت یک اسکریپت ساده مقدار –val را هنگام حرکت اسلایدر به‌روزرسانی می‌کند تا ظاهر پرشدگی نرم و قابل کنترل باشد.

اسلایدر محتوایی (Carousel) با CSS خالص

برای اسلایدر تصاویر یا کارت‌ها دو روش محبوب وجود دارد: استفاده از scroll-snap برای تعامل لمسی و استفاده از radio-buttons به‌عنوان کنترلی برای تغییر اسلایدها بدون جاوااسکریپت.

روش اول — scroll-snap (پیشنهاد برای ریسپانسیو و لمسی)

.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.card {
  min-width: 300px;
  scroll-snap-align: center;
  flex: 0 0 auto;
}

این ساختار با استفاده از overflow-x و scroll-snap کاربر را قادر می‌سازد با کشیدن (swipe) یا اسکرول افقی بین آیتم‌ها جابه‌جا شود. مناسب برای موبایل و دسکتاپ است و به صورت طبیعی با صفحه‌کلید نیز کار می‌کند.

روش دوم — CSS-only با radio buttons

.slides { position: relative; width: 100%; overflow: hidden; }
.slide { width: 100%; opacity: 0; transition: opacity 0.4s ease; position: absolute; top:0; left:0; }
#r1:checked ~ .slide1 { opacity: 1; position: static; }
/* لازم است برای هر اسلاید یک رادیو و استایل مرتبط تعریف شود */

این روش امکان تولید کنترل‌های قدم‌به‌قدم (next/prev) با CSS را می‌دهد، اما مقیاس‌پذیری برای تعداد زیاد اسلایدها پیچیده‌تر است و دسترسی (accessibility) باید با دقت پیاده‌سازی شود.

نکات کلیدی در پیاده‌سازی

• دسترس‌پذیری (Accessibility): برای input[type=range] از label مناسب، aria-valuenow و نقش (role) استفاده کنید. برای carousel از عنوان‌ها و کنترل‌های کیبورد بهره ببرید.
• ریسپانسیو: عرض و حداقل عرض آیتم‌ها را با min-width و درصد تنظیم کنید. در موبایل از scroll-snap استفاده کنید.
• عملکرد: از تصاویر بهینه‌شده (webp/avif) و lazy-loading استفاده کنید تا بار اولیه صفحه سنگین نشود.
• پشتیبانی مرورگر: شبه‌العنصرهای input range بین مرورگرها متفاوت‌اند؛ تست در Chrome، Safari و Firefox ضروری است.
• انیمیشن‌ها و انتقال‌ها: برای روان بودن از transform و opacity استفاده کنید (تغییر layout گران است).

جدول مقایسه روش‌ها

مثال نهایی: اسلایدر عکس با scroll-snap و دکمه‌های JS برای ناوبری

/* HTML structure
<div id="c" class="carousel"><img class="card" src="img1.jpg" alt="..." /> <img class="card" src="img2.jpg" alt="..." /> ...</div>
<button id="prev">Prev</button> <button id="next">Next</button>
*/ 
/* CSS */ .carousel { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; } .card { min-width:80%; scroll-snap-align:center; flex:0 0 auto; }

در این نمونه CSS رفتار اسکرول، snap و سرعت انتقال را کنترل می‌کند. با افزودن دو دکمه و یک اسکریپت کوچک می‌توان به صورت دستی اسلاید بعدی یا قبلی را با متد scrollBy یا scrollTo فعال کرد که برای UX مفید است.

جمع‌بندی و بهترین تمرین‌ها

طراحی نوار اسلاید افقی نیازمند توجه به نوع کاربرد است: برای انتخاب مقدار از input[type=range] استفاده کنید و برای نمایش محتوا از scroll-snap یا روش‌های CSS-only/JS ترکیبی. همیشه دسترسی، ریسپانسیو بودن و عملکرد را در اولویت بگذارید. امتحان و تست در مرورگرها و دستگاه‌های مختلف کیفیت تجربه کاربری را تضمین می‌کند.

اگر می‌خواهید نمونه‌ای از پیاده‌سازی کامل با جاوااسکریپت کم‌حجم نیز ببینید، می‌توانم کد آماده و قابل کپی/پیست برای پروژه شما ایجاد کنم.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال