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

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

آموزش ساخت اسلایدر با جاوا اسکریپت:

ساخت اسلایدر در جاوا اسکریپت اصلا و ابدا سخت نیست. همونطور که می‌دونین اسلایدر یکی از ابزار‌های خوب برای به نمایش گذاشتن محصولات در وب سایت‌ها هست. حالا ما می‌خواهیم نحوه ساخت slider با جاوا اسکریپت را بهتون آموزش بدیم، ابتدا به نوشتن کد‌های html و سپس cssمی‌پردازیم، و در نهایت با جاوا اسکریپت اسلایدر را فعال می‌کنیم.

کد‌های بخش Html اسلایدر

خب بریم سراغ کد‌های اسلاید حرفه‌ای اولین کاری که باید انجام بدیم اینه که کد‌های Html اسلاید مدنظرمون رو بنویسیم طبق عکس زیر عمل می‌کنیم:

<span style="font-size: 12pt؛ ">

<div class="slide-container">

<div class="slide-no" id="slide-no"></div>

<div class="slide fade">

<img

src="http: //abhilashwebdeveloper. com/public/images/codepen/slideshow/images/plane-1. jpg"

alt="image-1"

style="width: 100%"

/>

<div class="caption">Plane one</div>

</div>

<div class="slide fade">

<img

src="http: //abhilashwebdeveloper. com/public/images/codepen/slideshow/images/plane-2. jpg"

alt="image-1"

style="width: 100%"

/>

<div class="caption">Plane two</div>

</div>

<div class="slide fade">

<img

src="http: //abhilashwebdeveloper. com/public/images/codepen/slideshow/images/plane-3. jpg"

alt="image-1"

style="width: 100%"

/>

<div class="caption">Plane three</div>

</div>

<div class="slide fade">

<img

src="http: //abhilashwebdeveloper. com/public/images/codepen/slideshow/images/plane-4. jpg"

alt="image-1"

style="width: 100%"

/>

<div class="caption">Plane four</div>

</div>

<div class="slide fade">

<img

src="http: //abhilashwebdeveloper. com/public/images/codepen/slideshow/images/plane-5. jpg"

alt="image-1"

style="width: 100%"

/>

<div class="caption">Plane five</div>

</div>

<a class="prev" ="changeSlide(-1)">❮</a>

<a class="next" ="changeSlide(1)">❯</a>

</div>

<br />

<div style="text-align: center">

<span class="dot" ="currentSlide(1)"></span>

<span class="dot" ="currentSlide(2)"></span>

<span class="dot" ="currentSlide(3)"></span>

<span class="dot" ="currentSlide(4)"></span>

<span class="dot" ="currentSlide(5)"></span>

</div>

</span>

اما توضیحاتی درمورد کد‌های بخش اچ تی‌ام ال اسلایدر:

طبق عنوان مقالمون یعنی ساخت اسلایدر با جاوا اسکریپت ما باید کد‌های جاوا اسکریپت رو بهتون توضیح بدیم، ولی ممکنه بعضی دوستان تو کد‌های Htmlمشکل داشته باشن، پس یه توضیح کوتاهی براش می‌دیم.

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

بعد از چینش عکس‌های اسلایدر برای backو forwardاسلایدر توسط کاربر دو تا تگ a با class‌های prevو nextدر نظر می‌گیریم برای این دو تگ aرویداد تعریف می‌کنیم، همان طور که می‌دونین این رویداد زمانی اجرا می‌شود که کاربر روی تگ مدنظرمون کلیک بکنه، برای رویداد این تگ‌ها تابع currentSlideرو فراخوانی می‌کنیم و پارامتر‌های 1- و 1 رو بعنوان ورودی به تابع پاس می‌دیم

حال یک تگ div دیگر به عنوان والد باز می‌کنیم و داخل آن برای نمایش عکس کنونی اسلایدر به تعداد 5 تگ spanدر نظر می‌گیریم، همان طور که معلوم است این تگ‌ها با تعداد عکس‌های اسلایدر یکسان می‌باشد برای تگ‌های spanنیز همانند تگ‌های aرویداد تعریف می‌کنیم و هر دفعه که این رویداد رخ بده، تابع currentSlideبا پارامتر‌های متفاوت فراخوانی میشه (تو بخش کد‌های جاوا اسکریپت با عملکرد این تابع آشنا می‌شین)

کد‌های بخش Css اسلایدر

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

<span style="font-size: 12pt؛ ">

. slide-container {

max-width: 1000px؛

margin: 0 auto؛

position: relative؛

}

. slides {

display: none؛

}

. prev،

. next {

cursor: pointer؛

position: absolute؛

top: 50%؛

width: auto؛

margin-top: -22px؛

padding: 16px؛

color: #FFF؛

font-weight: bold؛

font-size: 18px؛

transition: 0.6s ease؛

border-radius: 0 3px 3px 0؛

}

. next {

right: 0؛

border-radius: 3px 0 0 3px؛

}

. prev: hover،

. next: hover {

background-color: rgba(0،0،0،0.8)؛

}

. caption {

color: #FFF؛

font-size: 16px؛

padding: 8px 12px؛

position: absolute؛

bottom: 8px؛

width: 100%؛

text-align: center؛

}

. slide-no {

color: #FFF؛

font-size: 12px؛

padding: 8px 12px؛

position: absolute؛

top: 0؛

}

. dot {

cursor: pointer؛

height: 13px؛

width: 13px؛

margin: 0 2px؛

background-color: #bbb؛

border-radius: 50%؛

display: inline-block؛

transition: background-color 0.6s ease؛

}

. active،

. dot: hover {

background-color: #717171؛

}

@keyframes fade {

0% {

opacity: 0؛

}

100% {

opacity: 1؛

}

}

@-webkit-keyframes slideInDown {

0% {

opacity: 0؛

}

100% {

opacity: 1؛

}

}

. fade {

-webkit-animation-name: fade؛

-moz-animation-name: fade؛

-o-animation-name: fade؛

animation-name: fade؛

-webkit-animation-duration: 1.5s؛

animation-duration: 1.5s؛

}

img {

width: 100%؛

}

</span>

کد‌های جاوا اسکریپت اسلایدر

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

<span style="font-size: 12pt؛ ">

var currentIndex = 1؛

function displaySlide(n) {

currentIndex = n؛

var slides = document. getElementsByClassName("slide")؛

var dots = document. getElementsByClassName("dot")؛

var slno = document. getElementById("slide-no")؛

if (currentIndex > slides. length) {

currentIndex = 1؛

}

if (currentIndex < 1) {

currentIndex = slides. length؛

}

for (var i = 0؛ i< slides. length؛ i++) {

slides[i]. style. display = "none"؛

dots[i]. className = dots[i]. className. replace(" active"، "")؛

}

slides[currentIndex - 1]. style. display = "block"؛

dots[currentIndex - 1]. className = "dot active"؛

slno. innerHTML = currentIndex + "/" + slides. length؛

}

displaySlide(currentIndex)؛

function changeSlide(n) {

currentIndex += n؛

displaySlide(currentIndex)؛

}

function currentSlide(n) {

displaySlide(n)؛

}

</span>

قبل از بررسی نحوه ساخت اسلایدر با جاوا اسکریپت، عملکرد توابع رو براتون توضیح می‌دیم (متغیر currentIndexدر جاوا اسکریپت شماره عکس کنونی اسلایدر رو داخلش نگهمیداره، به این شکل که اگر متغیر این متغیر 1 باشد عکس شماره 1 نشون داده می‌شود، اگر مقدارش 2 باشد عکس شماره 2 نشون داده می‌شود و …)این تابع یک آرگومان دریافت کرده و طبق آن عکس اسلایدر را تغییر می‌دهد،

در اولین مرحله مقدار متغیر currentIndexرا برابر با پارامتر ورودی خودش قرار می‌دهد، سپس 3 متغیر با عنوان‌های slides (برای سلکت کردن هر اسلاید از اسلایدر)، متغیر dots (برای سلکت کردن دایره‌های زیر اسلایدر برای جهت کنترل آن) و متغیر slno (برای نشان دادن شماره عکس در سمت چپ اسلایدر) تعریف کرده‌ایم

همان طور که در کد‌های بخش Htmlاسلایدر مشاهده کردید، 5 عکس وجود داشت، پس طول متغیر slidesبرابر با 5 می‌باشد، حال این رو در نظر بگیرین موقع فراخوانی این تابع ورودی بیشتر از 5 رو بهش پاس بدیم، خب قطعا به مشکل می‌خوریم! برای این منظور در خط 9 مقدار ورودی رو بررسی می‌کنیم که اگر بیشتر از 5 بود مقدار currentIndexرو برابر با 1 قرار بدیم و عکس‌های اسلایدر از اول شروع بشن

و اگر کمتر از 1 باشه مقدار متغیر currentIndexرو برابر با طول آرایه slides قرار می‌دیم(مقدار 5) سپس با یک حلقه تکرار forتمامی عکس‌های اسلایدر رو display: none کرده و کلاس activeرو صورت وجود از تمامی dot‌ها (دایره‌های زیر اسلایدر) می‌گیریم؛ بعد از حلقه forاز آرایه slidesکه عکس‌های اسلایدرمون رو دربر داشت،

ایندکس یکی کمتر از currentIndex (یعنی currentIndex – 1) رو از حالت مخفی درمیاریم و display: block بهش می‌دیم (چون مقدار currentIndexبرابر با 1 می‌باشد و ایندکس‌های آرایه از 0 شروع می‌شوند یک واحد از آن کم کرده و همان ایندکس ار آرایه رو blockکردیم) سپس به همان ایندکس از dots‌ها کلاس activeدادیم

که موقع نمایش دادن عکس کنونی dotمتناسب با آن نیز بک گراند متفاونی داشته باشد(به استایل‌های کلاس activeدر بخش Cssمراجعه کنید) سپس برای نمایش دادن شماره عکس کنونی اسلایدر، خاصیت innerHtmlمتغیر slnoرو برابر با مقدار currentIndex و یک علامت “/” و طول آرایه slidesیا همان تعداد عکس‌ها( عمل concat یا به هم چسباندن)

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

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

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

عملکرد تابع changeSlide

یکی از توابع ساخت اسلایدر با جاوا اسکریپت تابع changeSlideاست. این تابع وابسته به رویداد دکمه‌های nextو prevاسلایدر هست که یک ورودی گرفته و آن را به متغیر currentIndexاضافه کرده و سپس تابع displaySlide رو با ورودی currentIndexفراخوانی می‌کند (با کلید next مقدار 1 به این تابع پاس داده شده و در نتیجه عکس اسلایدر یک واحد افزایش پیدا می‌کند و با کلید prevمقدار 1- به این تابع پاس داده شده و عکس اسلایدر یکم واحد کم شده و به عقب برمیگردد)

عملکرد تابع currentSlide

تابع دیگری که برای ساخت اسلاید در جاوا اسکریپت استفاده می‌شود، currentSlide است. این تابع وابسته به رویداد بخش dotsبوده و با کلیک روی هر dot این تابع با ورودی متفاوتی اجرا شده و سپس تابع displsySlideرا با ورودی خودش فراخوانی می‌کند این تابع هر ورودی که بگیرد، عکس با همان شماره ظاهر می‌شود

منبع:

https: //sabzlearn. ir/build-a-slider/