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

۵۴۷۲ بازدید
آخرین به‌روزرسانی: ۲۵ اردیبهشت ۱۴۰۲
زمان مطالعه: ۱۵ دقیقه
ساخت اسلایدر با جاوا اسکریپت — آموزش کامل و رایگان + کد

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

فهرست مطالب این نوشته
997696

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

به منظور ساخت اسلایدر با جاوا اسکریپت به یک کد ادیتور برای کدنویسی، مرورگر وب برای نمایش نتیجه خروجی و تسلط نسبی به جاوا اسکریپت و 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 آن‌ هم با پس‌زمینه زرد کم رنگ قابل‌ مشاهده است. در بخش بعدی از مطلب ساخت اسلایدر با جاوا اسکریپت تصاویری به پروژه اضافه شده‌اند تا در اسلایدر به نمایش گذاشته شوند.

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

چند راه برای ایجاد اسلایدر تصویر در جاوا اسکریپت وجود دارد. یکی این است که تصاویر با استفاده از ویژگی پس‌زمینه 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 به اسلایدر جاوا اسکریپت

«راهنمای کاربری» (خرده نشان| Breadcrumb) در جاوا اسکریپت برای ارائه عملکرد راهنمای کاربری و همچنین ایجاد حالت واکنش گرایی در صفحه‌های کوچک‌تر استفاده می‌شود. برای این کار باید کد HTML اسلایدر را به‌ صورت زیر به‌روز کرد.

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 class="slider__nav">
9      <div class="slider__navlink active"></div>
10      <div class="slider__navlink"></div>
11      <div class="slider__navlink"></div>
12      <div class="slider__navlink"></div>
13    </div>
14  </div>
15  </div>
16</div>

اکنون با به‌روز کردن قطعه HTML عنصری به نام slider__nav  وجود دارد که شامل چهار divs slider__navlink  است. همچنین برای هر کدام یک کلاس فعال نیز برای اسلایدر تعریف شده است که می‌توان از آن برای متمایز کردن Breadcrumb فعال از بقیه استفاده کرد. در زیر موقعیت چهار Breadcrumb در صفحه به صورت زیر تعیین شده است.

1.slider__nav {
2    position: absolute;
3    bottom: 3%;
4    left: 50%;
5    transform: translateX(-50%);
6    text-align: center;
7}

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

1.slider__navlink {
2    display: inline-block;
3    height: 20px;
4    width: 20px;
5    border-radius: 50%;
6    border: 1px #fff solid;
7    background-color: #333;
8    opacity: .8;
9    margin: 0 10px 0 10px;
10    cursor: pointer;
11}
12
13.slider__navlink.active {
14    background-color: #fff;
15    border: 1px #333 solid;
16}

خروجی به‌ صورت شکل زیر خواهد بود:

ساخت اسلایدر با javascript

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

متحرک سازی اسلایدر با جاوا اسکریپت

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

1let slides = document.getElementsByClassName("slider__slide");
2let navlinks = document.getElementsByClassName("slider__navlink");

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

1let currentSlide = 0;

آرایه در جاوا اسکریپت از صفر اندیس‌گذاری می‌شود، بنابراین تصویر اول در slides[0]  ، تصویر دوم در slides[1]  ، تصویر سوم در slides[2]   و تصویر آخر در slides[3]  قرار خواهند گرفت.

اکنون باید «شنونده رویداد» (Event Listener) را به هر یک از دکمه‌ها اضافه کرد. Event Listener رویه‌ای در جاوا اسکریپت است که منتظر وقوع یک رویداد می‌ماند و بعد از وقوع آن، کاری را انجام می‌دهد. مثال ساده از رویداد در جاوا اسکریپت، کلیک کاربر بر روی ماوس یا فشار دادن یک کلید روی صفحه‌ کلید است. این کار برای این پروژه به صورت زیر قابل انجام خواهد بود:

1document.getElementById("nav-button--next").addEventListener("click", () => {
2    changeSlide(currentSlide + 1)
3});
4document.getElementById("nav-button--prev").addEventListener("click", () => {
5    changeSlide(currentSlide - 1)
6});

هنگامی ‌که کاربر روی یکی از این دکمه‌ها کلیک می‌کند، کد جاوا اسکریپت مربوطه، تابعی به نام changeSlide  را فراخوانی خواهد کرد و یک آرگومان ارسال می‌کند که به این منظور currentSlide + 1  برای دکمه عکس بعدی و currentSlide - 1  برای عکس قبلی به کار می‌روند. این به برنامه این امکان را می‌دهد تا بداند که کاربر در تلاش است به کدام اسلاید حرکت کند، بنابراین می‌توان کلاس فعال را در آن اسلاید قرار داد و آن را از اسلاید فعلی خارج کرد.

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

1document.getElementById("nav-button--next").addEventListener("click", changeSlide(currentSlide + 1));

برای این منظور، باید فراخوانی تابع در بلوک () => { }  قرار بگیرد. برای دست‌یابی به این هدف، به تابع جاوا اسکریپت مربوط به تغییر اسلاید نیاز خواهیم داشت که در اینجا تابع changeSlide()  ‎این وظیفه را انجام می‌دهد.

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

1function changeSlide(moveTo) {
2    if (moveTo >= slides.length) {moveTo = 0;}
3    if (moveTo < 0) {moveTo = slides.length - 1;}
4    
5    slides[currentSlide].classList.toggle("active");
6    navlinks[currentSlide].classList.toggle("active");
7    slides[moveTo].classList.toggle("active");
8    navlinks[moveTo].classList.toggle("active");
9    
10    currentSlide = moveTo;
11}

تحلیل تابع تغییر اسلاید در ساخت اسلایدر با جاوا اسکریپت در ادامه انجام شده است.

  1. changeSlide آرگومانی را دریافت می‌کند که moveTo  نام دارد. این آرگومان تعیین کننده تعداد اسلایدهای تغییر یافته است.
  2. خط اول بررسی می‌کند که moveTo برابر یا بزرگ‌تر از length  است یا خیر. این بدان معنی است که کاربر در اسلاید نهایی قرار دارد و سعی می‌کند روبه به جلو برود. در این حالت، moveTo روی صفر قرار داده خواهد شد که با این کار، کاربر به اسلاید اول برمی‌گردد.
  3. اگر کاربر بخواهد از اسلاید اول به عقب برود، خط بعدی همین کار را انجام می‌دهد.
  4. چهار خط بعدی از اسلایدها و آرایه‌های navlinks  استفاده می‌کنند که قبلاً ایجاد شده بودند. با استفاده از toggle("active")  ، برنامه کلاس فعال را از اسلاید فعلی حذف خواهد کرد و آن را به اسلایدی که کاربر می‌خواهد به آن منتقل شود اضافه می‌کند.
  5. درنهایت، currentSlide  برابر moveTo  قرار داده می‌شود، زیرا اسلاید فعال در حال حاضر این اسلاید است.
  6. همچنین در بالا، transition: 1s  به عنصر slider__slides  اضافه شده است؛ این یعنی تغییر در شفافیت که هنگام اضافه کردن یا حذف کلاس فعال ایجاد می‌شود، یک ثانیه طول می‌کشد تا کامل شود که این کار جلوه نمایشی جذابی را ایجاد می‌کند.

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

 

ساختن Breadcrumb قابل کلیک با جاوا اسکریپت

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

1document.querySelectorAll('.slider__navlink').forEach((bullet, bulletIndex) => {
2    bullet.addEventListener('click', () => {
3        if (currentSlide !== bulletIndex) {
4            changeSlide(bulletIndex);
5        }
6    })
7})

در این قطعه کد، از querySelectorAll  برای دریافت تمام عناصر slider__navlink  استفاده‌ شده است و سپس از حلقه ForEach در جاوا اسکریپت برای پیمایش آن‌ها استفاده‌ خواهد شد که به صورت زیر عمل خواهند کرد.

  • در حلقه اول، bullet  به اسلاید اول اشاره می‌کند و bulletIndex  برابر با صفر خواهد بود.
  • در حلقه بعدی، bullet به اسلاید دوم اشاره می‌کند و bulletIndex برابر با یک خواهد بود.

ایده این است که اگر کاربر روی دکمه‌ای کلیک کنند، bulletIndex اسلاید را برای آن تغییر خواهد داد، بنابراین می‌توان آن مقدار را با changeSlide(bulletIndex)  به تابع تغییر اسلاید منتقل کرد. همچنین در این قطعه کد، دستور If تضمین می‌کند که کاربر به اسلاید تکراری یا همان اسلاید فعلی هدایت نمی‌شود و به همین خاطر اگر currentSlide  با bulletIndex برابر نباشد، درنتیجه اسلاید تغییر می‌کند.

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

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

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

قطعه کد کامل HTML برای ساخت اسلایدر با جاوا اسکریپت در ادامه ارائه شده است.

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="src/style.css">
7  </head>
8  <body>
9    <h1 id="header"></h1>
10<div class="container">
11  <div class="slider">
12    <div class="slider__slides">
13      <div class="slider__slide active">
14         <img src="https://images.kojaro.com/2020/7/60db5236-ec19-4a9d-ac7a-adb508d43608.jpg" alt="damavand" />
15      </div>
16      <div class="slider__slide">
17        <img src="https://images.kojaro.com/2018/4/0645f8a6-1d2d-455c-9820-72add8edf3de-840x560.jpg" alt="taraghe" />
18      </div>
19      <div class="slider__slide">
20        <img src="https://www.eligasht.com/Blog/wp-content/uploads/2017/05/historical-takhte-jamshyd.jpg" alt="taxht-jamshid" />
21      </div>
22      <div class="slider__slide">
23        <img src="https://shahrvandonline.ir/wp-content/uploads/2021/10/%D8%A2%D8%B1%D8%A7%D9%85%DA%AF%D8%A7%D9%87-%DA%A9%D9%88%D8%B1%D9%88%D8%B4-%DA%A9%D8%A8%DB%8C%D8%B1-7-750x430.jpg" alt="korosh" />
24      </div>
25    </div>
26    <div id="nav-button--prev" class="slider__nav-button"></div>
27    <div id="nav-button--next" class="slider__nav-button"></div>
28    <div class="slider__nav">
29      <div class="slider__navlink active"></div>
30      <div class="slider__navlink"></div>
31      <div class="slider__navlink"></div>
32      <div class="slider__navlink"></div>
33    </div>
34  </div>
35</div>
36    <script src="src/script.js"></script>
37  </body>
38</html>

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

قطعه کد کامل CSS مربوط به ساخت اسلایدر با جاوا اسکریپت در ادامه آمده است.

1* {
2/*     box-sizing: border-box; */
3}
4body {
5    background: #3206FF;
6    background: linear-gradient(45deg, #3206FF, #F9839B);
7    min-height: 100vh;
8}
9
10.container {
11    display: flex;
12    align-items: center;
13    justify-content: center;
14}
15
16.slider {
17    display: block;
18    position: relative;
19    width: 100%;
20    max-width: 900px;
21    margin: 10px;
22    background-color: white;
23    overflow: hidden;
24}
25
26.slider__slides {
27  width: 100%;
28  padding-top: 66%;
29}
30
31.slider__slide {
32    position: absolute;
33    display: flex;
34    align-items: center;
35    justify-content: center;
36    font-size: 50px;
37    font-weight: bold;   
38    top: 0;
39    left: 0;
40    width: 100%;
41    height: 100%;
42    background-color: lemonchiffon;
43    transition: 1s;
44    opacity: 0;
45}
46
47.slider__slide.active {
48    opacity: 1;
49}
50
51.slider__slide img {
52  width: 100%;
53}
54
55.slider__nav-button {
56    position: absolute;
57    height: 70px;
58    width: 70px;
59    background-color: #333;
60    opacity: .8;
61    cursor: pointer;
62}
63
64#nav-button--prev {
65    top: 50%;
66    left: 0;
67    transform: translateY(-50%);
68}
69
70#nav-button--next {
71    top: 50%;
72    right: 0;
73    transform: translateY(-50%);
74}
75
76#nav-button--prev::after,
77#nav-button--next::after {
78    content: "";
79    position: absolute;
80    border: solid white;
81    border-width: 0 4px 4px 0;
82    display: inline-block;
83    padding: 3px;
84    width: 40%;
85    height: 40%;
86}
87
88#nav-button--next::after{
89    top: 50%;
90    right: 50%;
91    transform: translate(25%, -50%) rotate(-45deg);
92}
93
94#nav-button--prev::after {
95    top: 50%;
96    right: 50%;
97    transform: translate(75%, -50%) rotate(135deg);
98}
99
100.slider__nav {
101    position: absolute;
102    bottom: 3%;
103    left: 50%;
104    transform: translateX(-50%);
105    text-align: center;
106}
107
108.slider__navlink {
109    display: inline-block;
110    height: 20px;
111    width: 20px;
112    border-radius: 50%;
113    border: 1px #fff solid;
114    background-color: #333;
115    opacity: 1;
116    margin: 0 10px 0 10px;
117    cursor: pointer;
118}
119
120.slider__navlink.active {
121    background-color: #fff;
122    border: 1px #333 solid;
123}
124
125
126@media screen and (max-width: 640px) {
127  .slider__nav-button {
128    height: 40px;
129    width: 40px;
130  }
131  .slider__navlink {
132    height: 12px;
133    width: 12px;
134  }
135}

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

قطع‌i کد کامل جاوا اسکریپت برای پروژه ساخت اسلایدر به صورت زیر است.

1const message = 'ساخت اسلایدر با جاوا اسکریپت - فرادرس' // Try edit me
2
3// Update header text
4document.querySelector('#header').innerHTML = message
5let slides = document.getElementsByClassName("slider__slide");
6let navlinks = document.getElementsByClassName("slider__navlink");
7let currentSlide = 0;
8
9document.getElementById("nav-button--next").addEventListener("click", () => {
10    changeSlide(currentSlide + 1)
11});
12document.getElementById("nav-button--prev").addEventListener("click", () => {
13    changeSlide(currentSlide - 1)
14});
15
16function changeSlide(moveTo) {
17    if (moveTo >= slides.length) {moveTo = 0;}
18    if (moveTo < 0) {moveTo = slides.length - 1;}
19    
20    slides[currentSlide].classList.toggle("active");
21    navlinks[currentSlide].classList.toggle("active");
22    slides[moveTo].classList.toggle("active");
23    navlinks[moveTo].classList.toggle("active");
24    
25    currentSlide = moveTo;
26}
27
28document.querySelectorAll('.slider__navlink').forEach((bullet, bulletIndex) => {
29    bullet.addEventListener('click', () => {
30        if (currentSlide !== bulletIndex) {
31            changeSlide(bulletIndex);
32        }
33    })
34})
35// Log to console
36console.log(message)

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

خروجی نهایی ساخت اسلایدر با جاوا اسکریپت به صورت تصویر متحرک زیر است:

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

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

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

مرحله اول ساخت اسلایدر خودکار با جاوا اسکریپت

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

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="src/style.css">
7  </head>
8  <body>
9    <h1 id="header"></h1>
10<!--HTML Code-->
11<!-- Slideshow Container Div -->
12<div class="container">
13
14<!-- Full-width images with caption text -->
15<div class="image-sliderfade fade">
16	<img src="https://faradars.org/wp-content/uploads/2015/05/faradars-400x253.jpg" style="width:100%">
17	<div class="text">پلتفرم فرادرس</div>
18</div>
19
20<div class="image-sliderfade fade">
21	<img src="https://digiato.com/wp-content/uploads/2022/04/python-developer-910x600.jpg" style="width:100%">
22	<div class="text">یادگیری برنامه نویسی</div>
23</div>
24
25<div class="image-sliderfade fade">
26	<img src="https://digiato.com/wp-content/uploads/2022/04/coding-languages-image.jpg" style="width:100%">
27	<div class="text">فیلم های آموزشی فرادرس</div>
28</div>
29
30<div class="image-sliderfade fade">
31	<img src="https://diacobin.com/wp-content/uploads/2019/07/programming-languages.jpg" style="width:100%">
32	<div class="text">آموزش برنامه نویسی</div>
33</div>
34
35</div>
36<br>
37
38<!-- The dots/circles -->
39<div style="text-align:center">
40<span class="dot"></span>
41<span class="dot"></span>
42<span class="dot"></span>
43</div>
44
45    <script src="src/script.js"></script>
46  </body>
47</html>

مرحله دوم ساخت اسلایدر خودکار با جاوا اسکریپت

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

1// CSS code
2*
3{
4box-sizing: border-box;
5}
6body
7{
8font-family: Verdana, sans-serif;
9}
10
11.image-sliderfade
12{
13display: none;
14}
15
16img
17{
18vertical-align: middle;
19}
20
21/* Slideshow container */
22.container
23{
24max-width: 1000px;
25position: relative;
26margin: auto;
27}
28
29/* Caption text */
30.text
31{
32color: #f2f2f2;
33font-size: 15px;
34padding: 20px 15px;
35position: absolute;
36right: 10px;
37bottom: 10px;
38width: 40%;
39background: rgba(0, 0, 0, .7);
40text-align: left;
41}
42
43/* The dots/bullets/indicators */
44.dot
45{
46height: 15px;
47width: 15px;
48margin: 0 2px;
49background-color: transparent;
50border-color: #ddd;
51border-width: 5 px;
52border-style: solid;
53border-radius: 50%;
54display: inline-block;
55transition: border-color 0.6s ease;
56}
57
58.active
59{
60border-color: #666;
61}
62
63/* Animation */
64.fade
65{
66-webkit-animation-name: fade-image;
67-webkit-animation-duration: 1.5s;
68animation-name: fade-image;
69animation-duration: 1.5s;
70}
71
72@-webkit-keyframes fade-image
73{
74from {opacity: .4}
75to {opacity: 1}
76}
77
78@keyframes fade-image
79{
80from {opacity: .4}
81to {opacity: 1}
82}
83
84/* On smaller screens, decrease text size */
85@media only screen and (max-width: 300px)
86{
87.text {font-size: 11px}
88}

مرحله سوم ساخت اسلایدر خودکار با جاوا اسکریپت

پس از افزودن ساختار و استایل به اسلایدر، آخرین کاری که باید انجام شود، پیاده‌سازی قابلیت تغییر خودکار اسلایدر است که این کار با استفاده از جاوا اسکریپت ممکن خواهد شد. در قطعه کد زیر، در همان ابتدا، همه عناصر div  با نام کلاس ‘image-sliderfade’  در یک آرایه قرار دارند و همین کار را برای div  با نام کلاس ‘dots’  با استفاده از شنونده getElementByClassName()‎  انجام خواهد شد. پس از آن، نمایشگری برای همه Div-ها، حاوی تصاویر تنظیم می‌شود. تابع setTimeout  برای فراخوانی تابع showlides()  ‎در فاصله زمانی 2 ثانیه استفاده شده است. در ادامه تمام کدهای جاوا اسکریپت برای ساخت این اسلایدر آمده است.

1const message = 'نمونه اسلایدر' // Try edit me
2
3// Update header text
4document.querySelector('#header').innerHTML = message
5var slideIndex = 0;
6showSlides(); // call showslide method
7
8function showSlides()
9{
10	var i;
11
12	// get the array of divs' with classname image-sliderfade
13	var slides = document.getElementsByClassName("image-sliderfade");
14	
15	// get the array of divs' with classname dot
16	var dots = document.getElementsByClassName("dot");
17
18	for (i = 0; i < slides.length; i++) {
19		// initially set the display to
20		// none for every image.
21		slides[i].style.display = "none";
22	}
23
24	// increase by 1, Global variable
25	slideIndex++;
26
27	// check for boundary
28	if (slideIndex > slides.length)
29	{
30		slideIndex = 1;
31	}
32
33	for (i = 0; i < dots.length; i++) {
34		dots[i].className = dots[i].className.
35							replace(" active", "");
36	}
37
38	slides[slideIndex - 1].style.display = "block";
39	dots[slideIndex - 1].className += " active";
40
41	// Change image every 2 seconds
42	setTimeout(showSlides, 2000);
43}
44
45// Log to console
46console.log(message)

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

خروجی ساخت این نوع اسلایدر با جاوا اسکریپت به صورت تصویر متحرک زیر خواهد بود:

آموزش های رایگان جاوا اسکریپت

سخن پایانی

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

بر اساس رای ۲۶ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
alvarotrigogeeksforgeeks
۱ دیدگاه برای «ساخت اسلایدر با جاوا اسکریپت — آموزش کامل و رایگان + کد»

سلام، عالی بود. لطفا از این پست های کاربردی بیشر بزارین. فقط تئوری نباشه. این خوبه

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *