ساخت اسلایدر با جاوا اسکریپت_ ارائه تکنیکی ساده و کارآمد برای ساخت اسلایدر سایت

ساخت اسلایدر یکی از دغدغه های همیشگی طراحان تازه کار و مبتدی میباشد در این مقاله قصد داریم ساخت اسلایدر با جاوا اسکریپت به صورت حرفه ای (در حدی که کارتون رو راه بندازه) رو یاد بگیریم  ساخت اسلایدر در جاوا اسکریپت نیاز به آشنایی با این زبان برنامه نویسی داره؛ اگرچه لازم نیست حتما یه برنامه نویس جاوا اسکریپت حرفه ای باشید.

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

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

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

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

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

    

<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" onclick="changeSlide(-1)">❮</a>
      <a class="next" onclick="changeSlide(1)">❯</a>
    </div>
    <br />
    <div style="text-align: center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onClick="currentSlide(3)"></span>
      <span class="dot" onClick="currentSlide(4)"></span>
      <span class="dot" onClick="currentSlide(5)"></span>
    </div>

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

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

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

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

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

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

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

.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%;
}

خب اینم از کدهای بخش Css ساخت اسلایدر در جاوا اسکریپت، چون تو این بخش خبری از کد جاوا اسکریپتی نیست توضیح خاصی براش نمیدم(اگه جاوا اسکریپت کار میکنین باید Css رو خوب بلد باشین) برای یادگیری زبان Css می تونین از دوره های رایگان آموزش جامع Css در سایت سبزلرن استفاده کنید.

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

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

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);
}

 قبل از بررسی نحوه ساخت اسلایدر با جاوا اسکریپت، عملکرد توابع رو براتون توضیح میدیم (متغیر 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 است. این تابع وابسته به رویداد onclick دکمه های next و prev اسلایدر هست که یک ورودی گرفته و آن را به متغیر currentIndex اضافه کرده و سپس تابع displaySlide رو با ورودی currentIndex فراخوانی می کند (با کلید next مقدار 1 به این تابع پاس داده شده و در نتیجه عکس اسلایدر یک واحد افزایش پیدا میکند و با کلید prev مقدار 1- به این تابع پاس داده شده و عکس اسلایدر یکم واحد کم شده و به عقب برمیگردد)

عملکرد تابع currentSlide

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

سخن پایانی

مقاله آموزش ساخت اسلایدر با جاوا اسکریپت هم به سررسید کلاغه به خونش نرسید 🙂 همونطور که دیدید نحوه ساخت اسلایدر با جاوا اسکریپت خیلی راحته و به سادگی با داشتن دانش کافی از سه زبان برنامه نویسی html، Css و جاوا اسکریپت می تونین اسلایدرهای حرفه ای بسازید. دوره های آموزشی این سه زبان را هم توی سایت سبزلرن برای شما قرار دادیم تا بتونید به صورت رایگان استفاده کنید.

خب امیدواریم این مقاله براتون مفید بوده باشه و بتونید یک اسلایدر در جاوا اسکریپت طراحی کنید. هر نظری انتقادی پیشنهادی سوالی و … داشتین حتما تو بخش کامنت ها برامون بنویسین میتونین موضوع مقاله بعدی رو هم تو کامنت ها پیشنهاد بدین 😉

تا یه مقاله دیگه شما رو به خدا میسپریم.