برنامه نویسی و طراحی سایت

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

  • ارسال شده توسط author-avatar
ساخت اسلایدر با جاوا اسکریپت — آموزش کامل و رایگان + کد
19 مهر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سخن پایانی

faradars mobile

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

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

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

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

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

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

container

 عنصری حاوی نمایش اسلاید تصاویر است. این container

می‌تواند هر بخشی از سایت باشد، اما در این پروژه فقط یک Flexbox

 ساده برای این کار انتخاب‌ شده است.

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.slider {
    display: block;
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 10px;
    background-color: white;
    overflow: hidden;
}

اندازه اسلایدر را می‌توان به دلخواه سفارشی و شناور کرد، فقط لازم است در هر صورت، ویژگی position

 برای آن به کار گرفته شود. همچنین برای تکمیل این بخش به کانتینر div

 برای اسلایدها، slider__slides

 و 4 عنصر slider__slide

 نیاز خواهد بود که این کار به وسیله قطعه کد زیر قابل انجام است. 

.slider__slides {
  width: 100%;
  padding-top: 66%;
}

.slider__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    font-weight: bold;   
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lemonchiffon;
    transition: 1s;
    opacity: 0;
}

.slider__slide.active {
    opacity: 1;
}

در این قسمت باید دقت کرد که padding-top

 برای slider__slides

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

 است، به‌ طور کامل پُر می‌کند.

همچنین با این کار چهار اسلاید مستقیماً روی‌ هم قرار می‌گیرند. باید به این نکته توجه داشت که در اینجا شفافیت (opacity) هر اسلاید روی صفر تنظیم‌شده است. قسمت slider__slide.active

 به این معنی است که هر عنصری که هم کلاس slider__slide

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

آموزش های کاربردی جاوا اسکریپت

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

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

کلیک کنید

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

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

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


     damavand

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

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

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

علاوه بر کلاس slider__nav-button

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

.slider__nav-button {
    position: absolute;
    height: 70px;
    width: 70px;
    background-color: #333;
    opacity: .8;
    cursor: pointer;
}

در قطعه کد بالا Opacity

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

#nav-button--prev {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#nav-button--next {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

با تنظیم top

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

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

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

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

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

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

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

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

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

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

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

#nav-button--prev::after,
#nav-button--next::after {
    content: "";
    position: absolute;
    border: solid white;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 3px;
    width: 40%;
    height: 40%;
}

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

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

#nav-button--next::after{
    top: 50%;
    right: 50%;
    transform: translate(25%, -50%) rotate(-45deg);
}

#nav-button--prev::after {
    top: 50%;
    right: 50%;
    transform: translate(75%, -50%) rotate(135deg);
}

همچنین باید عنصری به نام media query

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

@media screen and (max-width: 640px) {
  .slider__nav-button {
    height: 40px;
    width: 40px;
  }
}

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

کاربردهای جاوا اسکریپت در طراحی سایت

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

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

اکنون با به‌روز کردن قطعه HTML عنصری به نام slider__nav

 وجود دارد که شامل چهار divs slider__navlink

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

.slider__nav {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

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

.slider__navlink {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px #fff solid;
    background-color: #333;
    opacity: .8;
    margin: 0 10px 0 10px;
    cursor: pointer;
}

.slider__navlink.active {
    background-color: #fff;
    border: 1px #333 solid;
}

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

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

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

آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت
فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در تم آف

کلیک کنید

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

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

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

خط اول هر عنصری به نام slider__slide

 را پیدا می‌کند و یک اشاره‌گر به آن را در آرایه‌ای به نام slides

 ذخیره می‌کند. خط بعدی همین کار را برای عناصر breadcrumb

 انجام می‌دهد، این بار آن‌ها را در آرایه‌ای به نام navlinks

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

 ایجاد شود. 

let currentSlide = 0;

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

 ، تصویر دوم در slides[1]

 ، تصویر سوم در slides[2]

  و تصویر آخر در slides[3]

 قرار خواهند گرفت.

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

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

هنگامی ‌که کاربر روی یکی از این دکمه‌ها کلیک می‌کند، کد جاوا اسکریپت مربوطه، تابعی به نام changeSlide

 را فراخوانی خواهد کرد و یک آرگومان ارسال می‌کند که به این منظور currentSlide + 1

 برای دکمه عکس بعدی و currentSlide – 1

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

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

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

برای این منظور، باید فراخوانی تابع در بلوک () => { }

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

 ‎این وظیفه را انجام می‌دهد.

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

function changeSlide(moveTo) {
    if (moveTo >= slides.length) {moveTo = 0;}
    if (moveTo

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

  1. changeSlide

    آرگومانی را دریافت می‌کند که moveTo

     نام دارد. این آرگومان تعیین کننده تعداد اسلایدهای تغییر یافته است.

  2. خط اول بررسی می‌کند که moveTo

    برابر یا بزرگ‌تر از length

     است یا خیر. این بدان معنی است که کاربر در اسلاید نهایی قرار دارد و سعی می‌کند روبه به جلو برود. در این حالت، moveTo

    روی صفر قرار داده خواهد شد که با این کار، کاربر به اسلاید اول برمی‌گردد.

  3. اگر کاربر بخواهد از اسلاید اول به عقب برود، خط بعدی همین کار را انجام می‌دهد.
  4. چهار خط بعدی از اسلایدها و آرایه‌های navlinks

     استفاده می‌کنند که قبلاً ایجاد شده بودند. با استفاده از toggle(“active”)

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

  5. درنهایت، currentSlide

     برابر moveTo

     قرار داده می‌شود، زیرا اسلاید فعال در حال حاضر این اسلاید است.

  6. همچنین در بالا، transition: 1s

     به عنصر slider__slides

     اضافه شده است؛ این یعنی تغییر در شفافیت که هنگام اضافه کردن یا حذف کلاس فعال ایجاد می‌شود، یک ثانیه طول می‌کشد تا کامل شود که این کار جلوه نمایشی جذابی را ایجاد می‌کند.

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

مطلب پیشنهادی:

مقدمه‌ ای بر رویدادها در جاوا اسکریپت — راهنمای کاربردی

شروع مطالعه

 

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

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

document.querySelectorAll('.slider__navlink').forEach((bullet, bulletIndex) => {
    bullet.addEventListener('click', () => {
        if (currentSlide !== bulletIndex) {
            changeSlide(bulletIndex);
        }
    })
})

در این قطعه کد، از querySelectorAll

 برای دریافت تمام عناصر slider__navlink

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

  • در حلقه اول، bullet

     به اسلاید اول اشاره می‌کند و bulletIndex

     برابر با صفر خواهد بود.

  • در حلقه بعدی، bullet

    به اسلاید دوم اشاره می‌کند و bulletIndex

    برابر با یک خواهد بود.

ایده این است که اگر کاربر روی دکمه‌ای کلیک کنند، bulletIndex

اسلاید را برای آن تغییر خواهد داد، بنابراین می‌توان آن مقدار را با changeSlide(bulletIndex)

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

 با bulletIndex

برابر نباشد، درنتیجه اسلاید تغییر می‌کند.

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

کلیک کنید

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

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

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

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



  
    
    
    
  
  
    



  

    

      

         damavand
      

      

        taraghe
      

      

        taxht-jamshid
      

      

        korosh

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

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

* {
/*     box-sizing: border-box; */
}
body {
    background: #3206FF;
    background: linear-gradient(45deg, #3206FF, #F9839B);
    min-height: 100vh;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider {
    display: block;
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 10px;
    background-color: white;
    overflow: hidden;
}

.slider__slides {
  width: 100%;
  padding-top: 66%;
}

.slider__slide {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    font-weight: bold;   
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lemonchiffon;
    transition: 1s;
    opacity: 0;
}

.slider__slide.active {
    opacity: 1;
}

.slider__slide img {
  width: 100%;
}

.slider__nav-button {
    position: absolute;
    height: 70px;
    width: 70px;
    background-color: #333;
    opacity: .8;
    cursor: pointer;
}

#nav-button--prev {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#nav-button--next {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

#nav-button--prev::after,
#nav-button--next::after {
    content: "";
    position: absolute;
    border: solid white;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 3px;
    width: 40%;
    height: 40%;
}

#nav-button--next::after{
    top: 50%;
    right: 50%;
    transform: translate(25%, -50%) rotate(-45deg);
}

#nav-button--prev::after {
    top: 50%;
    right: 50%;
    transform: translate(75%, -50%) rotate(135deg);
}

.slider__nav {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.slider__navlink {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px #fff solid;
    background-color: #333;
    opacity: 1;
    margin: 0 10px 0 10px;
    cursor: pointer;
}

.slider__navlink.active {
    background-color: #fff;
    border: 1px #333 solid;
}


@media screen and (max-width: 640px) {
  .slider__nav-button {
    height: 40px;
    width: 40px;
  }
  .slider__navlink {
    height: 12px;
    width: 12px;
  }
}

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

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

const message = 'ساخت اسلایدر با جاوا اسکریپت - تم آف' // Try edit me

// Update header text
document.querySelector('#header').innerHTML = message
let slides = document.getElementsByClassName("slider__slide");
let navlinks = document.getElementsByClassName("slider__navlink");
let currentSlide = 0;

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

function changeSlide(moveTo) {
    if (moveTo >= slides.length) {moveTo = 0;}
    if (moveTo  {
    bullet.addEventListener('click', () => {
        if (currentSlide !== bulletIndex) {
            changeSlide(bulletIndex);
        }
    })
})
// Log to console
console.log(message)

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

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

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

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

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

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

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



  
    
    
    
  
  
    









	
	
پلتفرم تم آف






	
	
یادگیری برنامه نویسی






	
	
فیلم های آموزشی تم آف






	
	
آموزش برنامه نویسی

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

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

// CSS code
*
{
box-sizing: border-box;
}
body
{
font-family: Verdana, sans-serif;
}

.image-sliderfade
{
display: none;
}

img
{
vertical-align: middle;
}

/* Slideshow container */
.container
{
max-width: 1000px;
position: relative;
margin: auto;
}

/* Caption text */
.text
{
color: #f2f2f2;
font-size: 15px;
padding: 20px 15px;
position: absolute;
right: 10px;
bottom: 10px;
width: 40%;
background: rgba(0, 0, 0, .7);
text-align: left;
}

/* The dots/bullets/indicators */
.dot
{
height: 15px;
width: 15px;
margin: 0 2px;
background-color: transparent;
border-color: #ddd;
border-width: 5 px;
border-style: solid;
border-radius: 50%;
display: inline-block;
transition: border-color 0.6s ease;
}

.active
{
border-color: #666;
}

/* Animation */
.fade
{
-webkit-animation-name: fade-image;
-webkit-animation-duration: 1.5s;
animation-name: fade-image;
animation-duration: 1.5s;
}

@-webkit-keyframes fade-image
{
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade-image
{
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px)
{
.text {font-size: 11px}
}
آموزش پروژه محور پی اچ پی PHP و MySQL – ساخت وبسایت شعر
فیلم آموزش پروژه محور پی اچ پی PHP و MySQL – ساخت وبسایت شعر در تم آف

کلیک کنید

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

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

 با نام کلاس ‘image-sliderfade’

 در یک آرایه قرار دارند و همین کار را برای div

 با نام کلاس ‘dots’

 با استفاده از شنونده getElementByClassName()‎

 انجام خواهد شد. پس از آن، نمایشگری برای همه Div-ها، حاوی تصاویر تنظیم می‌شود. تابع setTimeout

 برای فراخوانی تابع showlides()

 ‎در فاصله زمانی 2 ثانیه استفاده شده است. در ادامه تمام کدهای جاوا اسکریپت برای ساخت این اسلایدر آمده است. 

const message = 'نمونه اسلایدر' // Try edit me

// Update header text
document.querySelector('#header').innerHTML = message
var slideIndex = 0;
showSlides(); // call showslide method

function showSlides()
{
	var i;

	// get the array of divs' with classname image-sliderfade
	var slides = document.getElementsByClassName("image-sliderfade");
	
	// get the array of divs' with classname dot
	var dots = document.getElementsByClassName("dot");

	for (i = 0; i  slides.length)
	{
		slideIndex = 1;
	}

	for (i = 0; i

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

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

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

سخن پایانی

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

جدیدتر تفاوت لیست و دیکشنری در پایتون — به زبان ساده
بازگشت به لیست
قدیمی‌تر برنامه نویسی اندروید چیست؟ — هر آنچه باید بدانید

دیدگاهتان را بنویسید

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.