آموزش ساخت اسلایدر با jQuery

بدون اضافه کاری آموزش ایجاد اسلایدر با استفاده از jQuery را شروع می کنیم.
مرحله اول :
کدهای html را من به صورت زیر ایجاد کردم شما می تونید به سلیقه خودتون هر کدی قرار دهید،مهم چارچوب کار است؛ div اصلی با کلاس slides تمام اسلایدهای ما درون این div قرار دارد. من دراینجا از <ul> استفاده کردم شما می توانید از چند div برای اسلایدهای خود استفاده کنید.

<div class="container">
    <div id="slides">
      <ul class="slides-control">
        <li class="slide">
          <span>0</span>
          <img class="img-slide" src="images/slide-1.jpg" alt="">
        </li>
        <li class="slide">
          <span>1</span>
          <img class="img-slide" src="images/slide-2.jpg" alt="">
        </li>
        <li class="slide">
          <span>2</span>
          <img class="img-slide" src="images/slide-3.jpg" alt="">
        </li>
      </ul>
      <a href="#" class="next"><i class="fa fa-angle-left"></i></a>
      <a href="#" class="prev"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>

مرحله دوم :
خب نوبت به استایل دهی میرسه. به نظر من نیاز به توضیح نداره و کدها ساده هستند شما می توانید با توجه به ایده خود افکت های زبیا ایجاد کنید. تمرکز اصلی روی کدهای jQuery است.

* {
  box-sizing: border-box;
}
.container {
  margin: 50px 100px;
}
#slides {
  overflow: hidden;
  margin: 0 auto;
  width: 800px;
  height: 600px;
  position: relative;
}
ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  
}

ul li img {
  width: 800px;
  height: 600px;
}
.next,
.prev {
  position: absolute;
  top: 50%;
  font-size: 3rem;
  color: rgb(195,195,195);
  display: inline-block;
  padding: 5px 15px;
  background: rgb(41,41,41);
  opacity: .7;
}
.prev{
  right: 0;
}

مرحله سوم :
خط به خط کدهای jquery  را توضیح می دهم. که مهم ترین بخش آموزش است.
اولین کاری که انجام می دهیم باید تعداد اسلایدها را پیدا کینم و در یک آرایه ای از objectها قرار دهیم. خط دوم به ما آرایه ای از تگ هایی با کلاس slide را به ما می دهد.
یک شمارنده هم لازم داریم برای نمایش اسلایدها، که اینجا slideIndex نام دارد.
وظیفه اصلی حرکت دادن اسلایدها بر عهده تابع slider است.
خط اول تابع display همه divهایی که کلاس slide دارند را برابر none قرار می هد.
خط بعد چک می کند که slideIndex از تعداد اسلایدها بیشتر نباشد که اگر بود برابر صفر قرار بگیرد.در این مثال ما 3 اسلاید داریم. و اینکه چرا طول آرایه را  منهای 1 کردیم به این خاطر است که آرایه ها از صفر شماره گذاری می شوند.
خط بعدی display اسلاید مربوطه را برابر block قرار می دهد.در مرحله اول slideIndex=0 است و اولین اسلاید نماش داده می شود.
و در نهایت یک واحد به slideIndex اضافه می شود.
یک بار تابع را فراخوانی می کنیم تا اجرا شود. 
تابع setInterval مهمترین کار را برای ما انجام می دهد، اگه این تابع نبود اسلایدری هم نبود؛ وظیفه این تابع این است که هر x ثانیه تابع مربوطه که به عنوان آرگومان قبول کرده را دوباره فراخوانی می کند.
یک نکته مهم راجع به setInterval این است که این متد یک عدد برمیگرداند که این عدد را ما برای متوقف کردن این متد لازم داریم.
تا اینجا اسلایدر شروع به کار می کند ولی بدون کنترل، یعنی کلیک عقب و جلو ندارد و نمی توان به صورت دستی اسلایدها را نمایش داد.
مرحله پایانی ایجاد کلیک های next و prev است.
خب event کلیک را برای تگ a با کلاس prev فراخوانی میکنیم، اول از همه e.preventDefault() را فراخوانی میکینم.چرا؟ برای اینکه وقتی روی تگ a کلیک کردیم صفحه refresh نشه. این دستور از حالت پیش فرضی کلیک کردن روی تگ a اتفاق می افتد جلوگیری میکند.
بعد تابع clearInterval را با آرگومان cInterval (شما میتونید هر اسمی انتخاب کنید)فراخوانی می کنیم تا به کار setInterval پایان دهیم، خط بعدی 2 واحد از slideIndex کم می کنیم، چرا؟ به این خاطر که تابع slider در پایان کارش یک واحد به slideIndex اضافه می کند تا بتواند اسلاید بعدی را نمایش دهد ما می خواهیم اسلاید قبلی نمایش داده شود پس اگر یک واحد کم کنیم با کلیک کردن روی prev همان اسلایدی که در حال نماش هست نشان داده می شود و اگر 2 واحد کم کنیم اسلاید قبلی نشان داده می شود و در پایان دوباره setInterval را صدا می زنیم تا دوباره به کار خودش ادامه دهد.
برای next هم به همین صورت است. ولی ساده تر.
امیدوم این آموزش به کارتون بیاد.

$(document).ready(function () {
  var slides = $('.slide');
  var slideIndex = 0;

  function slider () {
    $('.slide').css('display', 'none');

    if (slideIndex > slides.length - 1) { slideIndex = 0; }
    $('.slide').eq(slideIndex).css('display', 'block');
    slideIndex++;
  }

  slider();
  var cInterval = setInterval(slider, 3000);
  
  $('.prev').click(function (e) {
    e.preventDefault();
    clearInterval(cInterval);
    slideIndex-=2;
    if (slideIndex < 0) { slideIndex = slides.length-1; }
    slider();
    cInterval = setInterval(slider, 3000);
  });

  $('.next').click(function(e) {
    e.preventDefault();
    clearInterval(cInterval);
    slider();
    cInterval = setInterval(slider, 3000);
  });
  
});