ایجاد اسلایدر با js

سلاااااااااااااااااااااااااااااااااااااااااام پر انرژی. دوباره برگشتم تا با کد هام حالتونو بگیرم :دی

منظورم اینه که یه حالی بهتون بدم.

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

خب ، بریم سر وقت کد زنی

اول کد های HTML رو مینویسم:

<!-- lباکس اصلی اسلایدر ما  -->
<div class=&quotslideshow-container&quot>

  <!-- اسم و آدرس و شماره مربوط به تصاویر -->
  <div class=&quotmySlides fade&quot>
  <div class=&quotnumbertext&quot>1 / 3</div>
  <img src=&quotآدرس تصویر دلخواه&quot style=&quotwidth:100%&quot>
  <div class=&quottext&quot>تیتر اولt</div>
  </div>

  <div class=&quotmySlides fade&quot>
  <div class=&quotnumbertext&quot>2 / 3</div>
  <img src=&quotآدرس تصویر دلخواه&quot style=&quotwidth:100%&quot>
  <div class=&quottext&quot>تیتر دوم</div>
  </div>

  <div class=&quotmySlides fade&quot>
  <div class=&quotnumbertext&quot>3 / 3</div>
  <img src=&quotآدرس تصویر دلخواه&quot style=&quotwidth:100%&quot>
  <div class=&quottext&quot>تیتر سوم</div>
  </div>

  <!-- ایجاد دکمه های قبل و بعد -->
  <a class=&quotprev&quot =&quotplusSlides(-1)&quot>❮</a>
  <a class=&quotnext&quot =&quotplusSlides(1)&quot>❯</a>
</div>
<br>

<!-- دکمه های دایره ای اسلایدر -->
<div style=&quottext-align:center&quot>
  <span class=&quotdot&quot =&quotcurrentSlide(1)&quot></span>
  <span class=&quotdot&quot =&quotcurrentSlide(2)&quot></span>
  <span class=&quotdot&quot =&quotcurrentSlide(3)&quot></span>
</div>

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

بریم سر وقت کد های CSS:

* {box-sizing:border-box}

/* باکس اصلی اسلایدر */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* پنهان کردن پیش فرض تصاویر */
.mySlides {
  display: none;
}

/* استایل دکمه های قبل و بعد */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* مکان دکمه .next  */
/* دهید .prev  اگر سیستم تان راست چین است، باید این ویژگی را به  */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* تغییرات بر اثر آمدن روی دکمه ها */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* تیتر های تصاویر */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* شماره های تصاویر */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/*دکمه های دایره ای اسلایدر */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* سیستم محو شدن */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
/* یک سری کار مربوط به انیمیشن */
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

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

خب اینم از این.

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

و اما کدهای JS :

var slideIndex = 1;
showSlides(slideIndex);

// دکمه های قبل و بعد
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// مشخص کردن لینک در تصاویر
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName(&quotmySlides&quot);
  var dots = document.getElementsByClassName(&quotdot&quot);
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = &quotnone"
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(&quot active&quot, &quot&quot);
  }
  slides[slideIndex-1].style.display = &quotblock"
  dots[slideIndex-1].className += &quot active"
}

خدا رو شکر بالاخره تموم شد :دی

اگه کد ها مشکلی داشت بگید لطفا. ما رو از نظراتتون دریغ نکنید. ممنون از همتون .............................

اگر کد یا مثال لازم دارید یا دنبال آموزش هستید، Nima Hassani رو تو sololearn دنبال کنید، از همینجا بپرسید، یا به این ایمیل: pigy3p@gmail.com ... پیام بدید. موفق باشید.