ساخت اسلایدر با جاوا اسکریپت — آموزش کامل و رایگان + کد

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

پیش نیاز های ساخت اسلایدر با جاوا اسکریپت چیست؟

به منظور ساخت اسلایدر با جاوا اسکریپت به یک کد ادیتور برای کدنویسی، مرورگر وب برای نمایش نتیجه خروجی و تسلط نسبی به جاوا اسکریپت و HTML و CSS نیاز است. همچنین برای شروع کار با این پروژه، به ۳ فایل برای جداسازی کدهای CSS ،HTML و جاوا اسکریپت نیاز خواهیم داشت.

1. Index با پسوند HTML
2.  Style با پسوند CSS
3. Script با پسوند JS

همچنین به پیوند یا URL چند تصویر دلخواه در اینترنت نیاز است تا در اسلایدر ساخته شده با جاوا اسکریپت به نمایش گذاشته شوند.

ساختار اسلایدر جاوا اسکریپت

به منظور ساخت اسلایدر با جاوا اسکریپت، ابتدا باید ساختار اصلی اسلایدر ایجاد شود. این کار با استفاده از HTML قابل انجام است و قطعه کد ساختار اولیه آن به صورت زیر خواهد بود:

1<div class="container">
2  <div class="slider">
3    <div class="slider__slides">
4      <div class="slider__slide active"></div>
5      <div class="slider__slide"></div>
6      <div class="slider__slide"></div>
7      <div class="slider__slide"></div>
8    </div>
9  </div>
10</div>

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

1.container {
2    display: flex;
3    align-items: center;
4    justify-content: center;
5}

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

1.slider {
2    display: block;
3    position: relative;
4    width: 100%;
5    max-width: 900px;
6    margin: 10px;
7    background-color: white;
8    overflow: hidden;
9}

اندازه اسلایدر را می‌توان به دلخواه سفارشی و شناور کرد، فقط لازم است در هر صورت، ویژگیposition برای آن به کار گرفته شود. همچنین برای تکمیل این بخش به کانتینرdiv برای اسلایدها، slider__slides و 4 عنصر slider__slide نیاز خواهد بود که این کار به وسیله قطعه کد زیر قابل انجام است.

1.slider__slides {
2  width: 100%;
3  padding-top: 66%;
4}
5
6.slider__slide {
7    display: flex;
8    align-items: center;
9    justify-content: center;
10    font-size: 50px;
11    font-weight: bold;   
12    position: absolute;
13    top: 0;
14    left: 0;
15    width: 100%;
16    height: 100%;
17    background-color: lemonchiffon;
18    transition: 1s;
19    opacity: 0;
20}
21
22.slider__slide.active {
23    opacity: 1;
24}

در این قسمت باید دقت کرد که padding-top برایslider__slides به خوبی تنظیم شود. برای این منظور، مقدار بالا و سمت چپ برای هر دو برابر با صفر است و عرض و ارتفاع هر دو 100٪ هستند. این یعنی هر تصویری که قرار است اضافه شود، اسلایدر را که دارای ویژگیposition است، به‌ طور کامل پُر می‌کند.

همچنین با این کار چهار اسلاید مستقیماً روی‌ هم قرار می‌گیرند. باید به این نکته توجه داشت که در اینجا شفافیت (opacity) هر اسلاید روی صفر تنظیم‌شده است. قسمتslider__slide.active به این معنی است که هر عنصری که هم کلاس slider__slide و هم‌کلاس‌های فعال را داشته باشد، شفافیت آن برابر با یک خواهد بود؛ این کار تنها اسلاید فعال را قابل‌ مشاهده می‌کند. خروجی کار ساخت اسلایدر با جاوا اسکریپت تا به اینجا به‌ صورت زیر است:

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

قرار دادن تصاویر در اسلایدر جاوا اسکریپت به چه صورت است؟

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

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

1<div class="slider__slide active">
2     <img src="https://images.kojaro.com/2020/7/60db5236-ec19-4a9d-ac7a-adb508d43608.jpg" alt="damavand" />
3  </div>

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

ساخت عناصر پیمایش اسلایدر در جاوا اسکریپت

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

1<div class="container">
2  <div class="slider">
3    <div class="slider__slides">
4      <!-- our slides go here -->
5    </div>
6    <div id="nav-button--prev" class="slider__nav-button"></div>
7    <div id="nav-button--next" class="slider__nav-button"></div>
8  </div>
9</div>

علاوه بر کلاس slider__nav-button ، هر دکمه یک شناسه منحصر‌به‌فرد دارد. در ساخت اسلایدر با جاوا اسکریپت، به این شناسه‌ها برای انتخاب عناصر اسلایدر نیاز است. با جود اینکه دکمه‌ها را می‌توان کاملاً سفارشی‌سازی کرد، اما در این آموزش به صورت ساده این دکمه‌ها فعلاً در قالب جعبه‌های خاکستری در نظر گرفته شده‌اند.

1.slider__nav-button {
2    position: absolute;
3    height: 70px;
4    width: 70px;
5    background-color: #333;
6    opacity: .8;
7    cursor: pointer;
8}

در قطعه کد بالا Opacity روی 0.8 تنظیم‌شده است، بنابراین دکمه‌ها کمی شفاف خواهند بود. همچنین از آنجایی که باید این دکمه‌ها قابل کلیک باشند، به نشانگر مکان‌نما نیاز است تا کاربر بفهمد که می‌تواند روی آن‌ها کلیک کند. همچنین به دلیل اینکه این دو دکمه در دو طرف اسلایدر قرار دارند، برای قرار دادن هرکدام از آن‌ها در طرفین باید به‌ صورت قطعه کد زیر عمل کرد.

1#nav-button--prev {
2    top: 50%;
3    left: 0;
4    transform: translateY(-50%);
5}
6
7#nav-button--next {
8    top: 50%;
9    right: 0;
10    transform: translateY(-50%);
11}

با تنظیم top روی 50 درصد، قسمت بالای عنصر تا نیمه پایین می‌آید. بنابراین عناصر دکمه کاملاً به‌ صورت عمودی در مرکز قرار نخواهد گرفت و کمی پایین‌تر خواهند رفت. همچنین در اینجا لازم است از ویژگی translateY برای جابه‌جایی عناصر نسبت به اندازه استفاده شود. در ادامه نحوه اضافه کردن آیکن پیکان به دکمه‌ های پیمایش با CSS آموزش داده شده است، اما پیش از آن به معرفی مجموعه دوره‌های آموزش جاوا اسکریپت پرداخته شده است.

معرفی فیلم های آموزش جاوا اسکریپت

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

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

• آموزش پروژه محور جاوا اسکریپت
• آموزش انواع فریمورک جاوا اسکریپت
• آموزش طراحی سایت با جاوا اسکریپت
• آموزش مبتدی جاوا اسکریپت
• آموزش رایگان جاوا اسکریپت
• سایر موارد

در تصویر بالا تنها تعداد کمی از دوره‌های موجود در مجموعه آموزش جاوا اسکریپت به‌ عنوان نمونه آمده‌اند.

• برای مشاهده فیلم های آموزش جاوا اسکریپت فرادرس و دسترسی به تمام دوره‌های این مجموعه آموزشی + اینجا کلیک کنید.

اضافه کردن آیکن پیکان به دکمه‌ های پیمایش با CSS

در حال حاضر دکمه‌های پیمایش اسلایدر فقط جعبه‌های خاکستری هستند و باید به کاربر نشان داده شود که این عناصر به نحوی برای پیمایش استفاده می‌شوند. راه‌های زیادی برای انجام این کار وجود دارد. مثلاً می‌توان از تصویر یک فِلِش یا پیکان استفاده کرد یا می‌توان متنی را با عنوان «عکس بعدی» و «عکس قبلی» قرار داد. قطعه کد مربوط به اضافه کردن آیکن پیکان به دکمه‌ های پیمایش با استفاده از CSS در ادامه آمده است:

1#nav-button--prev::after,
2#nav-button--next::after {
3    content: "";
4    position: absolute;
5    border: solid white;
6    border-width: 0 4px 4px 0;
7    display: inline-block;
8    padding: 3px;
9    width: 40%;
10    height: 40%;
11}

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

1#nav-button--next::after{
2    top: 50%;
3    right: 50%;
4    transform: translate(25%, -50%) rotate(-45deg);
5}
6
7#nav-button--prev::after {
8    top: 50%;
9    right: 50%;
10    transform: translate(75%, -50%) rotate(135deg);
11}

همچنین باید عنصری به نامmedia query هم اضافه شود تا این دکمه‌ها در صفحه‌های مختلف واکنش‌گرا شوند؛ قطعه کد زیر برای انجام این کار استفاده می‌شود:

1@media screen and (max-width: 640px) {
2  .slider__nav-button {
3    height: 40px;
4    width: 40px;
5  }
6}

خروجی این مرحله به ‌صورت زیر است.

اضافه کردن Breadcrumb به اسلایدر جاوا اسکریپت