آموزش ساخت اسلایدرهای تصویری مینیمال فقط با استفاده از CSS

ساخت اسلایدرهای تصویری یکی از اون چالش‌هاییه که هر برنامه‌نویس وب حداقل یه بار باهاش روبه‌رو شده. بیشتر اوقات میریم سراغ کتابخونه‌های جاوااسکریپت، چون خب، راحت‌تره. اما رفیق، گاهی اوقات دلمون یه چیز سبک، سریع و بدون بار اضافه جاوااسکریپت می‌خواد. اینجا دقیقاً همونجاییه که قدرت خالص CSS به کمکمون میاد. قراره یه اسلایدر مینیمال، شیک و کاملاً با CSS بسازیم که هم جذاب باشه و هم پرفورمنس بالایی داشته باشه. این رویکرد نه تنها بارگذاری صفحه رو بهینه‌تر می‌کنه، بلکه بهت کمک می‌کنه تا درک عمیق‌تری از قابلیت‌های انیمیشن و ترنزیشن CSS پیدا کنی. آماده‌ایم که با هم یه شاهکار بدون JS بسازیم؟ بزن بریم!

چرا اسلایدر CSS-Only؟ مزایا و معایب

ممکنه بپرسی اصلاً چرا باید خودمون رو به دردسر بندازیم و فقط با CSS اسلایدر بسازیم، وقتی کلی پلاگین جاوااسکریپتی آماده داریم؟ سؤال خوبیه! بیا نگاهی به نقاط قوت و ضعف این رویکرد بندازیم تا کامل بفهمیم چرا و کی باید ازش استفاده کنیم.

پس همونطور که می‌بینی، اسلایدر CSS-Only برای موارد خاصی مثل نمایش تصاویر پورتفولیو در یک صفحه ثابت یا بنرهای تبلیغاتی ساده که نیازی به تعامل پیچیده ندارن، گزینه‌ی فوق‌العاده‌ایه. اما اگه به یه چیز داینامیک و پر از امکانات نیاز داری، شاید بهتر باشه به راهکارهای جاوااسکریپتی فکر کنی.

گام اول: ساختار HTML پایه

هر اسلایدر، قبل از هر چیز به یه شاکله‌ی HTML درست و حسابی نیاز داره. برای یه اسلایدر مینیمال، ما به یک کانتینر اصلی نیاز داریم که اسلایدر رو در خودش نگه داره، و داخلش هم یه رپر (Wrapper) برای تمام تصاویر و در نهایت خود تصاویر. بذار با هم کد HTML رو بنویسیم.

<div class="slider-container">
    <div class="slider-wrapper">
        <img src="img/image1.jpg" alt="Minimal Image 1">
        <img src="img/image2.jpg" alt="Minimal Image 2">
        <img src="img/image3.jpg" alt="Minimal Image 3">
        <img src="img/image4.jpg" alt="Minimal Image 4">
        <!-- تکرار تصاویر برای حلقه بی‌نهایت -->
        <img src="img/image1.jpg" alt="Minimal Image 1">
    </div>
</div>

function copyCode(button) {
const codeBlock = button.parentElement.nextElementSibling.querySelector(‘code’);
const range = document.createRange();
range.selectNode(codeBlock);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand(‘copy’);
window.getSelection().removeAllRanges();
button.textContent = ‘Copied!’;
setTimeout(() => {
button.textContent = ‘Copy Code’;
}, 2000);
}

اینجا `slider-container` نقش پنجره‌ای رو داره که ما ازش به اسلایدها نگاه می‌کنیم. `slider-wrapper` هم که همه‌ی تصاویر رو در خودش داره، قراره حرکت کنه تا اسلایدها عوض بشن. یه نکته: تصویر اول رو دوباره ته `slider-wrapper` اضافه کردیم. این تکرار برای اینه که وقتی اسلاید به آخر رسید، بتونیم یه ترنزیشن روان به اول برگردیم و حس یه حلقه بی‌نهایت رو ایجاد کنیم. این روش از ترفندهای جالب CSS خالص به حساب میاد.

گام دوم: استایل‌دهی پایه و تنظیم ابعاد

حالا وقتشه که به این ساختار خاممون یه ظاهر مینیمال و کاربرپسند بدیم. هدف اینه که اسلایدر ما یه ابعاد مشخص داشته باشه و فقط یک تصویر در هر لحظه دیده بشه.

.slider-container {
    width: 80%; /* یا هر عرض دلخواهی */
    max-width: 900px;
    margin: 50px auto;
    overflow: hidden; /* این مهمه! اسلایدهای بیرون از کانتینر رو مخفی می‌کنه */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    position: relative; /* برای موقعیت‌دهی دکمه‌ها یا شاخص‌ها در آینده */
}

.slider-wrapper {
    display: flex; /* تصاویر رو کنار هم قرار میده */
    width: calc(100% * 5); /* 4 تصویر + 1 تصویر تکراری = 5 تصویر هرکدام 100% عرض */
    animation: slideAnimation 20s infinite; /* انیمیشن اصلی اسلاید */
    /* یا از transition برای حرکت آهسته استفاده کن */
}

.slider-wrapper img {
    width: calc(100% / 5); /* هر تصویر 1/5 عرض کل wrapper */
    height: auto;
    display: block; /* برای حذف فضای خالی زیر تصویر */
    object-fit: cover; /* مطمئن میشه تصویر فضای خودش رو پر کنه */
}

بریم سراغ جزئیات مهم این بخش:

• `slider-container` و `overflow: hidden;`: این کانتینر، پنجره‌ی ماست. `overflow: hidden;` باعث میشه هر چیزی که از ابعاد این پنجره بیرون می‌زنه، دیده نشه. این قلب کارکرد اسلایدر ماست.
• `slider-wrapper` و `display: flex;`: با `display: flex;` تمام تصاویرمون رو کنار هم ردیف می‌کنیم. `width: calc(100% * 5);` هم یعنی این رپر به اندازه ۵ برابر عرض کانتینر ما جا داره، چون ۵ تا تصویر داریم (۴ اصلی + ۱ تکراری).
• `slider-wrapper img`: هر تصویر باید `calc(100% / 5)` از عرض رپر رو بگیره تا دقیقاً به اندازه یه اسلاید کامل توی کانتینر جا بشه. `object-fit: cover;` هم کمک می‌کنه تصاویر بدون کشیدگی یا له شدن، فضای خودشون رو پر کنن.

معرفی متغیرهای CSS برای طراحی منعطف

برای اینکه کارمون تو مدیریت اسلایدر راحت‌تر بشه، خصوصاً وقتی تعداد اسلایدها تغییر می‌کنه، می‌تونیم از متغیرهای CSS (CSS Custom Properties) استفاده کنیم. اینطوری فقط با تغییر چند تا مقدار، کل اسلایدر آپدیت میشه.

:root {
    --total-slides: 4; /* تعداد اسلایدهای اصلی */
    --transition-time: 1s; /* زمان انتقال بین اسلایدها */
    --pause-time: 3s; /* زمان مکث روی هر اسلاید */
    --animation-duration: calc(var(--total-slides) * (var(--transition-time) + var(--pause-time)));
}

.slider-wrapper {
    /* ... کدهای قبلی ... */
    width: calc(100% * (var(--total-slides) + 1)); /* تعداد اسلایدها + 1 برای حلقه */
    animation: slideAnimation var(--animation-duration) infinite;
}

.slider-wrapper img {
    width: calc(100% / (var(--total-slides) + 1));
    /* ... کدهای قبلی ... */
}

با این روش، فقط کافیه مقدار `–total-slides` رو عوض کنی تا همه محاسبات عرض و زمان انیمیشن به صورت خودکار بروزرسانی بشن. این یه راه حل عالی برای افزایش انعطاف‌پذیریه.

گام سوم: جان‌بخشیدن با Keyframes و انیمیشن

حالا نوبت جذاب‌ترین بخش کاره: حرکت دادن اسلایدها! ما از `@keyframes` برای تعریف یک سیکل انیمیشن کامل استفاده می‌کنیم که به صورت بی‌نهایت تکرار میشه.

@keyframes slideAnimation {
    0% { transform: translateX(0%); } /* شروع: اسلاید اول */
    /* هر اسلاید اصلی (با احتساب تصویر تکراری) */
    15% { transform: translateX(0%); } /* مکث روی اسلاید 1 */
    20% { transform: translateX(calc(-100% / (var(--total-slides) + 1) * 1)); } /* حرکت به اسلاید 2 */

    35% { transform: translateX(calc(-100% / (var(--total-slides) + 1) * 1)); } /* مکث روی اسلاید 2 */
    40% { transform: translateX(calc(-100% / (var(--total-slides) + 1) * 2)); } /* حرکت به اسلاید 3 */

    55% { transform: translateX(calc(-100% / (var(--total-slides) + 1) * 2)); } /* مکث روی اسلاید 3 */
    60% { transform: translateX(calc(-100% / (var(--total-slides) + 1) * 3)); } /* حرکت به اسلاید 4 */

    75% { transform: translateX(calc(-100% / (var(--total-slides) + 1) * 3)); } /* مکث روی اسلاید 4 */
    80% { transform: translateX(calc(-100% / (var(--total-slides) + 1) * var(--total-slides))); } /* حرکت به اسلاید تکراری (اسلاید 1) */

    95% { transform: translateX(calc(-100% / (var(--total-slides) + 1) * var(--total-slides))); } /* مکث روی اسلاید تکراری */
    100% { transform: translateX(0%); } /* سریعاً برمیگرده به اسلاید اول (بدون ترنزیشن محسوس) */
}

بذار این کد رو برات باز کنم.

• `transform: translateX()`: این جادوی حرکت ماست. با تغییر مقدار منفی درصد، رپر اسلایدر رو به سمت چپ هل میدیم تا تصویر بعدی دیده بشه.
• درصدها در `keyframes`: این درصدها نشون میدن که در هر لحظه از انیمیشن (0% تا 100%)، چه اتفاقی بیفته. مثلاً:
  • `0%` و `15%`: اسلایدر روی تصویر اول ثابت می‌مونه.
  • `15%` به `20%`: در این بازه کوتاه، اسلایدر به تصویر دوم حرکت می‌کنه (با `transition-time` که تعریف کردیم).
  • `80%`: وقتی به تصویر تکراری (همون تصویر اول) میرسه.
  • `100%`: اینجا مهمترین قسمت برای حلقه بی‌نهایته! `transform: translateX(0%);` باعث میشه اسلایدر به سرعت و بدون اینکه کاربر متوجه بشه، به اول برگرده و انیمیشن دوباره از نو شروع شه. این انتقال ناگهانی چون خارج از دید کاربره، حس روان و پیوستگی رو میده.
• `calc(-100% / (var(–total-slides) + 1) * N)`: این فرمول تضمین می‌کنه که اسلایدر به اندازه دقیق یک تصویر در هر مرحله حرکت کنه، فارغ از اینکه چند تا اسلاید داریم. `N` شماره اسلاید فعلیه (از 0 شروع میشه).

مدیریت زمان‌بندی انیمیشن

با استفاده از متغیرهایی که تعریف کردیم، می‌تونیم زمان‌بندی انیمیشن رو به شکل دقیق‌تری کنترل کنیم.

/* در بخش :root */
:root {
    --total-slides: 4;
    --slide-duration: 1s; /* زمان حرکت یک اسلاید */
    --slide-pause: 4s; /* زمان مکث روی هر اسلاید */
    --total-animation-time: calc(var(--total-slides) * (var(--slide-duration) + var(--slide-pause)));
}

.slider-wrapper {
    animation: slideAnimation var(--total-animation-time) infinite ease-in-out;
}

@keyframes slideAnimation {
    /* حالا زمان‌بندی رو بر اساس متغیرها تعریف می‌کنیم */
    /* درصد هر اسلاید = (زمان مکث + زمان حرکت) / کل زمان انیمیشن * 100 */
    /* مثلاً: زمان حرکت 1 ثانیه، مکث 4 ثانیه = 5 ثانیه برای هر اسلاید */
    /* کل زمان = 4 * 5 = 20 ثانیه */

    0%, calc(var(--slide-pause) / var(--total-animation-time) * 100%) {
        transform: translateX(0%);
    }
    calc((var(--slide-pause) + var(--slide-duration)) / var(--total-animation-time) * 100%) {
        transform: translateX(calc(-100% / (var(--total-slides) + 1) * 1));
    }
    /* ... این الگو برای بقیه اسلایدها ادامه پیدا می‌کنه. نیاز به محاسبه دقیق درصدهاست ... */
    /* مثلاً برای اسلاید دوم (حرکت به اسلاید سوم) */
    calc(((var(--slide-pause) + var(--slide-duration)) * 1 + var(--slide-pause)) / var(--total-animation-time) * 100%) {
        transform: translateX(calc(-100% / (var(--total-slides) + 1) * 1));
    }
    calc(((var(--slide-pause) + var(--slide-duration)) * 1 + var(--slide-pause) + var(--slide-duration)) / var(--total-animation-time) * 100%) {
        transform: translateX(calc(-100% / (var(--total-slides) + 1) * 2));
    }

    /* و برای اسلاید تکراری و بازگشت نهایی */
    calc((var(--total-animation-time) - var(--slide-duration)) / var(--total-animation-time) * 100%) {
        transform: translateX(calc(-100% / (var(--total-slides) + 1) * var(--total-slides)));
    }
    100% {
        transform: translateX(0%); /* بازگشت سریع */
    }
}

اینجا یه کم ریاضی وارد بازی میشه! برای اینکه زمان‌بندی انیمیشن کاملاً داینامیک و بر اساس تعداد اسلایدها و زمان‌های مکث و حرکت باشه، باید درصدها رو با `calc()` و متغیرها حساب کنیم. اینطوری اگه فردا تصمیم گرفتی تعداد اسلایدها رو کم یا زیاد کنی، یا زمان مکث رو تغییر بدی، دیگه لازم نیست تک‌تک درصدها رو دستی تغییر بدی، فقط متغیرها رو آپدیت می‌کنی و تمام!

گام چهارم: رسپانسیو کردن اسلایدر برای همه دستگاه‌ها

در دنیای امروز، وب‌سایتی که روی موبایل، تبلت، لپ‌تاپ و حتی تلویزیون خوب دیده نشه، اصلاً وب‌سایت نیست! اسلایدر ما هم باید کاملاً رسپانسیو باشه. خوشبختانه، با `width: 80%; max-width: 900px;` که از قبل گذاشتیم، تا حدودی این قابلیت رو داره. اما برای کنترل دقیق‌تر، از مدیا کوئری‌ها (Media Queries) استفاده می‌کنیم.

@media (max-width: 768px) { /* برای تبلت‌ها و موبایل‌های بزرگ‌تر */
    .slider-container {
        width: 95%; /* عرض بیشتری در موبایل بگیره */
        margin: 30px auto;
        border-radius: 8px;
    }
    .slider-wrapper {
        /* اگر بخوایم انیمیشن روی موبایل کندتر باشه */
        animation-duration: calc(var(--total-animation-time) * 1.2); /* 20% کندتر */
    }
}

@media (max-width: 480px) { /* برای موبایل‌های کوچک */
    .slider-container {
        width: 100%; /* تمام عرض رو پر کنه */
        margin: 15px auto;
        border-radius: 0; /* گوشه‌ها رو تیز می‌کنیم */
        box-shadow: none; /* سایه رو حذف می‌کنیم تا سبک‌تر باشه */
    }
    .slider-wrapper img {
        height: 250px; /* ارتفاع ثابت برای تصاویر در موبایل */
        object-fit: cover;
    }
}

@media (min-width: 1200px) { /* برای صفحه‌های بزرگتر از لپ‌تاپ و تلویزیون */
    .slider-container {
        max-width: 1100px;
        margin: 80px auto;
        border-radius: 15px;
    }
}

با این مدیا کوئری‌ها، ما می‌تونیم ظاهر و رفتار اسلایدر رو بر اساس ابعاد صفحه نمایش تغییر بدیم. مثلاً در موبایل، می‌تونیم عرض رو 100% کنیم و سایه رو برداریم تا فضای بیشتری در دسترس باشه و بارگذاری سریع‌تر صورت بگیره. این فقط یک نمونه‌اس، دستت برای خلاقیت بازه! راستی، اگه دنبال اسنیپت‌های پایتون یا جاوااسکریپت هم بودی، توی FA Tools یه عالمه چیزای باحال برای برنامه‌نویسی وب هست.

نکات پیشرفته برای اسلایدرهای مینیمال CSS

ساختن یک اسلایدر مینیمال فقط به معنی کد کمتر نیست، به معنی استفاده هوشمندانه از CSS برای ایجاد بهترین تجربه کاربریه. اینجا چند تا نکته حرفه‌ای دیگه رو با هم بررسی می‌کنیم:

۱. افزودن دکمه‌های ناوبری (فقط CSS)

قبول دارم که بدون جاوااسکریپت، ساخت دکمه‌های “بعدی” و “قبلی” که دقیقاً کار کنن، چالش‌برانگیزه. اما می‌تونیم با ترفندهایی مثل `:target` یا `:checked` (با استفاده از رادیو باتن‌های مخفی) به یه سری امکانات محدود برسیم. برای یک اسلایدر کاملاً مینیمال و خودکار، شاید اصلاً نیازی به این دکمه‌ها نباشه، اما اگه اصرار داری، باید ساختار HTML رو کمی تغییر بدی و از رادیو باتن‌های مخفی به عنوان ماشه (trigger) برای تغییر اسلاید استفاده کنی. اما خب، این از ذات “مینیمال” بودن اسلایدر کاسته و پیچیدگی کد CSS را افزایش میداد. برای همین، در این مقاله روی سادگی تمرکز می‌کنیم.

۲. بهبود عملکرد با `will-change`

برای اطمینان از اینکه انیمیشن‌های ما کاملاً روان اجرا میشن، می‌تونیم از ویژگی `will-change` استفاده کنیم. این ویژگی به مرورگر میگه که چه ویژگی‌هایی قراره تغییر کنن، تا مرورگر بتونه خودش رو برای این تغییرات آماده کنه و رندرینگ رو بهینه‌تر انجام بده.

.slider-wrapper {
    /* ... کدهای قبلی ... */
    will-change: transform; /* به مرورگر میگه که این المنت قراره ترنسفورم بشه */
}

فقط حواست باشه که از `will-change` به طور افراطی استفاده نکنی، چون ممکنه خودش باعث افزایش مصرف منابع بشه. فقط روی المنت‌هایی که واقعاً قراره انیمیشن داشته باشن، ازش استفاده کن.

۳. بهینه‌سازی تصاویر

حتی بهترین کد CSS هم نمی‌تونه بارگذاری کند تصاویر رو جبران کنه. برای اسلایدری که می‌خوای سریع و روان باشه، باید تصاویر رو بهینه کنی:

• فرمت‌های مدرن: از فرمت‌هایی مثل WebP استفاده کن که فشرده‌سازی بهتری دارن و حجم کمتری اشغال می‌کنن.
• فشرده‌سازی: تصاویر رو قبل از آپلود، با ابزارهای آنلاین یا نرم‌افزارهای گرافیکی فشرده کن.
• ابعاد صحیح: تصاویر رو با ابعاد واقعی که در اسلایدر نمایش داده میشن، ذخیره کن. لود کردن یک تصویر 4K و بعد کوچیک کردنش با CSS، فقط هدر دادن پهنای بنده.

عیب‌یابی سریع (Troubleshooting)

خب، رفیق! اگه اسلایدری که ساختی درست کار نمی‌کنه، نگران نباش. اینا چند تا از مشکلات رایج و راه‌حل‌هاشون هست:

همیشه بهترین ابزار برای دیباگ کردن CSS، همون Inspect Element مرورگرته. اونجا می‌تونی تک‌تک استایل‌ها و انیمیشن‌ها رو بررسی کنی و ببینی دقیقاً چه اتفاقی داره می‌افته. اگه بازم مشکلی داشتی، می‌تونی به بخش اسنیپت‌های CSS در FA Tools سر بزنی و نمونه‌های بیشتری رو بررسی کنی.

جمع‌بندی نهایی

خب رفیق، رسیدیم به آخر خط. دیدی که چطور با یه کمی HTML و کلی CSS باحال، تونستیم یه اسلایدر تصویری مینیمال و کاملاً کاربردی بسازیم. این روش نه تنها بهت اجازه میده کنترل کامل روی ظاهر و عملکرد اسلایدرت داشته باشی، بلکه باعث میشه وب‌سایتت سبک‌تر و سریع‌تر باشه و تجربه کاربری بهتری ارائه بده.

همیشه یادت باشه که قدرت CSS فراتر از چیزیه که فکرش رو می‌کنی. با ترکیب درست خواص و کمی خلاقیت، می‌تونی کارهای شگفت‌انگیزی بدون نیاز به جاوااسکریپت اضافی انجام بدی. از این تکنیک‌ها در پروژه‌های بعدیت استفاده کن و لذت ببر از ساخت وب‌سایت‌های بهینه و زیبا. اگه دنبال اسنیپت‌های وردپرس یا حتی پایتون هستی، FA Tools یه منبع خوبه. موفق باشی!

سوالات متداول (FAQ Schema)

آموزش ساخت اسلایدرهای تصویری مینیمال فقط با استفاده از CSS

بسیاری از طراحان و توسعه‌دهندگان وب عادت کرده‌اند برای هر کار کوچکی در سایت، سراغ کتابخانه‌های سنگین جاوااسکریپت بروند. اما وقتی صحبت از سرعت لود، بهینه‌سازی و سئوی سایت به میان می‌آید، هر کیلوبایت اهمیت پیدا می‌کند. شاید شما هم به این تسمیم رسیده باشید که کدهای اضافه را حذف کنید. در این مقاله یاد می‌گیرید که چگونه بدون حتی یک خط کد جاوااسکریپت و صرفاً با استفاده از جادوی سی‌اس‌اس، اسلایدرهای تصویری فوق‌العاده سبک، مینیمال و کاملاً ریسپانسیو بسازید.

۱. چرا باید از اسلایدرهای فقط CSS استفاده کنیم؟

استفاده از اسلایدرهای سنگین جاوااسکریپتی اغلب مرورگر کاربر را مجبور به پردازش کوئری‌های سنگین DOM می‌کند که این امر مستقیماً بر روی شاخص‌های مهم هسته حیاتی وب (Core Web Vitals) مانند LCP و CLS تاثیر منفی می‌گذارد. وقتی سراغ کدهای سبک وب می‌روید، سرعت لود صفحات شما چندین برابر می‌شود. برای دیدن نمونه‌های بیشتر از این کدهای بهینه، حتماً بخش آرشیو بزرگ تکه کدهای fa-tools را بررسی کنید تا تفاوت سرعت و کارایی را متوجه شوید.

مزایای اصلی این رویکرد عبارتند از:

• کاهش فوق‌العاده حجم صفحه: بدون بارگذاری حتی یک فایل خارجی JS.
• عملکرد روان‌تر روی موبایل: استفاده از شتاب‌دهنده سخت‌افزاری مرورگر.
• امنیت بالا: عدم وجود حفره‌های امنیتی مرتبط با پکیج‌های شخص ثالث.
• سادگی توسعه: نگهداری آسان‌تر کدهای پایه بدون تداخل با سایر کتابخانه‌ها.

۲. روش اول: ساخت اسلایدر مدرن با متد CSS Scroll Snap (پیشنهادی)

این روش مدرن‌ترین و استانداردترین روش موجود است که به طور کامل از قابلیت‌های پیش‌فرض مرورگرها بهره می‌برد. در این متد، کاربر می‌تواند به صورت افقی با دست (روی موبایل) یا ماوس اسکرول کند و اسلایدر به صورت خودکار روی نزدیک‌ترین تصویر متمرکز یا اصطلاحاً قفل (Snap) می‌شود. اگر می‌خواهید با اصول ساختاری صفحات وب بیشتر آشنا شوید، حتماً بخش کدهای کاربردی HTML را مطالعه کنید.

کدهای HTML اسلایدر Scroll Snap

<div class="css-slider">
  <div class="slider-track">
    <div class="slide" id="slide-1">
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&auto=format&fit=crop" alt="طبیعت ساحل">
    </div>
    <div class="slide" id="slide-2">
      <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&auto=format&fit=crop" alt="جنگل کوهستانی">
    </div>
    <div class="slide" id="slide-3">
      <img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=800&auto=format&fit=crop" alt="مسیر جنگلی زیبا">
    </div>
  </div>
  <div class="slider-nav">
    <a href="#slide-1"></a>
    <a href="#slide-2"></a>
    <a href="#slide-3"></a>
  </div>
</div>

کدهای CSS استایل‌دهی

برای یادگیری نحوه مدیریت استایل‌های پیشرفته در صفحات وب، می‌توانید بخش قطعه کدهای CSS ما را بررسی کنید. کدهای زیر را به پروژه خود اضافه کنید:

.css-slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* پنهان کردن نوار اسکرول */
.slider-track::-webkit-scrollbar {
  display: none;
}
.slider-track {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}

.slide img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
}

.slider-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.slider-nav a {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.slider-nav a:hover {
  background-color: rgba(255, 255, 255, 1);
}

۳. روش دوم: ساخت اسلایدر تعاملی دکمه‌دار با ترفند Radio Buttons

اگر دوست دارید یک اسلایدر با قابلیت کلیک روی دکمه‌های ناوبری داشته باشید بدون اینکه صفحه به بالا و پایین بپرد یا اسکرول افقی اتفاق بیفتد، ترفند اینپوت‌های رادیویی فوق‌العاده است. این کار با پنهان کردن رادیو باتن‌ها و استفاده از سلکتور عمومی همسایگی در سی‌اس‌اس یعنی ~ پیاده‌سازی می‌شود.

کدهای HTML روش تعاملی

<div class="radio-slider">
  <input type="radio" name="slide-group" id="r1" checked>
  <input type="radio" name="slide-group" id="r2">
  <input type="radio" name="slide-group" id="r3">
  
  <div class="slides-container">
    <div class="slide-item s1">
      <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&auto=format&fit=crop" alt="اسلاید اول">
    </div>
    <div class="slide-item s2">
      <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&auto=format&fit=crop" alt="اسلاید دوم">
    </div>
    <div class="slide-item s3">
      <img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=800&auto=format&fit=crop" alt="اسلاید سوم">
    </div>
  </div>

  <div class="nav-controls">
    <label for="r1" class="bar"></label>
    <label for="r2" class="bar"></label>
    <label for="r3" class="bar"></label>
  </div>
</div>

کدهای CSS ترفند رادیویی

.radio-slider {
  max-width: 800px;
  margin: 40px auto;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
}

.slides-container {
  display: flex;
  width: 300%; /* تعداد اسلایدها ضربدر ۱۰۰ */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide-item {
  width: 33.3333%; /* ۱۰۰ تقسیم بر تعداد اسلایدها */
  transition: 0.6s;
}

.slide-item img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
}

/* مخفی کردن دکمه‌های رادیویی اصلی */
input[name="slide-group"] {
  display: none;
}

/* تعریف اکشن‌های تغییر وضعیت */
#r1:checked ~ .slides-container {
  transform: translateX(0%);
}
#r2:checked ~ .slides-container {
  transform: translateX(-33.3333%);
}
#r3:checked ~ .slides-container {
  transform: translateX(-66.6666%);
}

/* راست به چپ کردن جهت ترنسفورم */
[dir="rtl"] .slides-container {
  direction: ltr; /* برای کارکرد صحیح ریاضیات جابجایی ترجیحاً کانتینر چپ به راست باشد */
}

/* کنترلرها */
.nav-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

.bar {
  width: 35px;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.bar:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

#r1:checked ~ .nav-controls .bar:nth-child(1),
#r2:checked ~ .nav-controls .bar:nth-child(2),
#r3:checked ~ .nav-controls .bar:nth-child(3) {
  background-color: #ffffff;
}

۴. جدول مقایسه دو روش ساخت اسلایدر

برای اینکه راحت‌تر بتوانید روش مناسب کار خود را انتخاب کنید، تفاوت‌های کلیدی هر دو ساختار را در جدول زیر مشخص کرده‌ایم:

۵. نکات مهم برای طراحی ریسپانسیو و بهینه در تمام نمایشگرها

برای اینکه اسلایدرها در موبایل، تبلت و حتی تلویزیون‌های هوشمند بدون مشکل و به شکلی کاملاً بهینه نمایش داده شوند، رعایت اصول طراحیی زیر الزامی است:

• استفاده از object-fit: cover: این قانون کمک می‌کند تصاویر شما در نمایشگرهای مختلف تغییر حالت نداده و به شکل کامل کادر را پر کنند.
• واحد اندازه‌گیری نسبی: از واحدهایی مثل vw یا درصد برای عرض کانتینر اصلی اسلایدر خود استفاده کنید تا در موبایل مچاله نشود.
• بهینه‌سازی سایز تصاویر: از فرمت‌های مدرن وب مانند WebP یا AVIF استفاده کنید تا حجم تصاویر بهینه‌تر شود.
• سازگاری با سیستم مدیریت محتوا: اگر برای وب‌سایت‌های وردپرسی کدنویسی می‌کنید، بخش کدهای کاربردی ما در کدهای اختصاصی وردپرس را بخوانید تا ادغام این کدها با قالب‌های داینامیک را سریع‌تر پیاده کنید.

۶. بخش عیب‌یابی سریع (Troubleshooting)

بسیاری از طراحان هنگام پیاده‌سازی اسلایدرهای سی‌اس‌اس با چند مشکل مشابه و تکراری مواجه می‌شوند. در ادامه مهم‌ترین خطاها و نحوه رفع سریع آن‌ها را آورده‌ایم:

۷. سوالات متداول کاربران (FAQ)

در این بخش، برخی از رایج‌ترین سوالات مربوط به ساخت اسلایدرهای تصویری بدون جاوااسکریپت پاسخ داده شده است: