آموزش طراحی اسلایدر برای وب‌سایت با HTML و CSS و بدون جاوااسکریپت

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

در این مقاله به روش طراحی چند نمونه اسلایدر ساده بدون جاوااسکریپت می‌پردازیم. با ما باشید.

اسلایدرها انواع مختلفی دارند، نه فقط از نظر طراحی و ابعاد و رنگ‌بندی بلکه از نظر روش تعامل و انیمیشن. برخی اسلایدرها آزادانه قابل جابجایی به چپ یا راست هستند و برخی دیگر تنها به اندازه‌ی یک اسلاید به چپ یا راست جابجا می‌شوند. برخی با کلیک روی شماره‌ی آیتم موردنظر، به سرعت اسلاید کرده و متوقف می‌شوند و برخی دیگر فاقد عکس بندانگشتی و یا شماره هستند. از حالت‌های ساده‌تر شروع می‌کنیم و سراغ موارد پیچیده‌تر و جالب‌تر می‌رویم و همواره قرار است از Javascript استفاده نکنیم!

یک اسلایدر ساده با HTML و CSS و بدون جاوااسکریپت

فرض کنید که در کد HTML صفحه، چند div ساده با کلاس slide داریم که هر یک نقش یک اسلاید را ایفا می‌کند و می‌توان در آن متن، عکس یا موارد دیگر قرار داد. همگی divها در یک div اصلی با کلاس slider قرار می‌گیرند. کدی به صورت زیر:

<div class="slider">
	<div class="slide" id="slide-1"></div>
	<div class="slide" id="slide-2"></div>
	<div class="slide" id="slide-3"></div>
	<div class="slide" id="slide-4"></div>
	<div class="slide" id="slide-5"></div>
</div>

برای تنظیم ظاهر این بلوک‌ها (div)، طبق معمول از CSS استفاده می‌کنیم و دو کلاس slide و slider را به این صورت تعریف می‌کنیم:

.slider { width: 300px; height: 300px; display: flex; overflow-x: auto; }
.slide { width: 300px; flex-shrink: 0; height: 100%; }

 نتیجه چیزی شبیه به تصویر زیر است که با کلیک و درگ و یا با تپ کردن و درگ (در موبایل) می‌توان بین اسلایدها جابجا شد و جابجایی پیوسته است:

برای اینکه حرکت در مرورگرهای مبتنی بر webkit روان‌تر باشد، می‌توان در کلاس slider یک دستور دیگر نیز اضافه کرد:

.slider {

...

-webkit-overflow-scrolling: touch;

}

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

طراحی اسلایدری که پله‌پله به چپ یا راست جابجا می‌شود بدون Javascript

همان مثال قبل را در نظر بگیرید، در HTML تغییری ندهید اما در CSS اسلایدر، چند خط کد برای کلاس slider اضافه کنید تا اسکرول کردن به چپ یا راست، به اندازه‌ی ۳۰۰ پیکسل انجام شود و این یعنی عرض اسلایدها و مقدار پله‌های جابجایی به چپ و راست، هر دو ۳۰۰ پیکسل است. توجه کنید که به جای سه نقطه، کدهای قبلی استایل را قرار دهید.

.slider {
…
-webkit-scroll-snap-points-x: repeat(300px);
-ms-scroll-snap-points-x: repeat(300px);
 scroll-snap-points-x: repeat(300px);
-webkit-scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
}

 و نتیجه‌ی این طراحی به صورت زیر خواهد بود:

طراحی اسلایدر HTML و CSS با دکمه‌های شماره‌ی اسلاید

هدف این است که در کنار اسلایدر، شماره‌هایی برای اسلایدها داشته باشیم که با کلیک کردن روی هر شماره، اسلاید موردبحث نمایان شود. می‌توان به جای شماره‌ها، از عکس بندانگشتی استفاده کرد که اسلایدر زیباتر و جذاب‌تر باشد و خوشبختانه در این اسلایدر هم اثری از جاوااسکریپت وجود نخواهد داشت.

در کد HTML در کنار ۵ اسلایدری که قبلاً در بلوکی با کلاس slider قرار دادیم، ۵ تگ a برای ایجاد لینک به اسلایدها اضافه می‌کنیم و در نهایت تمام لینک‌ها و بلوک اسلایدر را در بلوک جدیدی با کلاس slide-wrap‌ قرار می‌دهیم.

توجه کنید که مقصد لینک‌ها یا تگ a، بلوکی با آی‌دی مشابه خواهد بود. به عنوان مثال در اولین تگ a، از href="#slide-1" استفاده می‌کنیم و در اولین اسلایدر نیز از id="slide-1" استفاده می‌کنیم تا این دو به هم مربوط شوند.

کد نهایی به صورت زیر است:

<div class=”slide-wrap”>
	<a href="#slide-1">1</a>
	<a href="#slide-2">2</a>
	<a href="#slide-3">3</a>
	<a href="#slide-4">4</a>
	<a href="#slide-5">5</a>

	<div class="slider">
		<div class="slide" id="slide-1">1</div>
		<div class="slide" id="slide-2">2</div>
		<div class="slide" id="slide-3">3</div>
		<div class="slide" id="slide-4">4</div>
		<div class="slide" id="slide-5">5</div>
	</div>
</div>

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

همان‌طور که در تصویر متحرک فوق مشاده می‌کنید، سوییچ کردن به اسلاید قبل یا بعد، به صورت آنی انجام شده است، اگر بخواهیم رفتار این اسلایدر نرم و روان باشد، کافی است در کلاس slide یک خط کد دیگر اضافه کنیم:

.slides { ... scroll-behavior: smooth; }

 طراحی اسلایدر با افکت بزرگ و کوچک شدن اسلایدها حین تغییر اسلاید

برای اینکه اسلایدها حین تغییر از یکی به دیگری، کوچک یا بزرگ شوند، می‌توان از انیمیشن‌های CSS و یا target استفاده کرد. در واقع زمانی که روی یکی از لینک‌ها کلیک می‌کنیم، URL مربوط به آن به #hash تبدیل می‌شود و در این حالت است که می‌توان از target برای استایل دادن به آن استفاده کرد.

در فایل CSS کلاس زیر را اضافه کنید که موجب کوچک شدن اسلایدها به اندازه ۸۰ درصد حالت اصلی می‌شود:

.slides > div:target { transform: scale(0.8); }

 نتیجه را تماشا کنید:

برای آزمون و خطا از Codepen استفاده کنید:

css-tricksسیاره‌ی آی‌تی