برنامه نویسی | اسلایدر چیست و چگونه با Css نمایشگر عکس ساخت - جدید
اسلایدر چیست و چگونه با Css نمایشگر عکس ساخت - جدید
  • علیرضا
  • ۱۳۹۸-۰۲-۲۸
  • ۴۰۷

اسلایدر چیست و چگونه با Css نمایشگر عکس ساخت - جدید


Slideshow / Carousel

slider css js how

یکی از قسمت هایی که زیبایی سایت و کارایی سایت رو بیشتر به نمایش میزاره اسلایدر ها هستن. با استفاده از اسلایدر ها در سایت میتوان فضای زیادی از سایت را اشغال و برای نمایش پست های بخصوصی تبلیغ کرد.

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


قدم اول: برای سایت اسلایدر اضافه کردن HTML است.

 
<!-- Slideshow container -->
<div class="slideshow-container">

  <!-- کل عرض عکس ها با اعداد و کپشن آن -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="img1.jpg" style="width:100%">
    <div class="text">توضیحات اول</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="img2.jpg" style="width:100%">
    <div class="text">توضیحات دوم</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="img3.jpg" style="width:100%">
    <div class="text">توضیحات سوم</div>
  </div>

  <!-- قسمت دکمه های بعدی و قبلی -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<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>
</div>

قدم بعدی اضافه کردن استایل ها با CSS

* {box-sizing:border-box}

/* Slideshow container */
.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 {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.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;
}

/* The dots/bullets/indicators */
.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;
}

/* Fading animation */
.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}
}

مرحله سوم اضافه کردن کد های جاوا اسکریپت

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

اتوماتیک کردن اسیلادر

این قسمت برای این است که اسلایدر به صورت اتوماتیک عکس ها را تغیر دهد

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // عوض شدن عکس ها بعد از هر دو ثانیه
}

نمایش اسلایدر چندگانه

var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex[no]-1].style.display = "block";
}

علیرضا

Alireza.kh

نظر شما در مورد این پست چیه؟!