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

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html و جاوا اسكريپت Slideshow ایجاد کنیم.

قسمت اول :  ايجاد Slideshow در وب سایت

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

                                    
                


                  
                  

                    
1 / 3
                    
                    
Caption Text
                  

                  

                    
2 / 3
                    
                    
Caption Two
                  

                  

                    
3 / 3
                    
                    
Caption Three
                  

                    
                  ❮
                  ❯
                
                


                                    
                

                  
                  
                  
                
                

قدم دوم :   کد CSS را اضافه کنید.
مثال :

                             * {box-sizing:border-box}

                /* Slideshow container */
                .slideshow-container {
                  max-width: 1000px;
                  position: relative;
                  margin: auto;
                }

                /* Hide the images by default */
                .mySlides {
                  display: none;
                }

                /* Next & previous buttons */
                .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;
                }

                /* Position the "next button" to the right */
                .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;
                }

                /* Number text (1/3 etc) */
                .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";
                }
                

نمونه Slideshow  

قسمت دوم :  ايجاد Automatic Slideshow در وب سایت

کد جاوا اسکریپت را اضافه کنید.

مثال :

                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); // Change image every 2 seconds
                }
                

<div class="slideshow-container">

<div class="mySlides fade">

  <div class="numbertext">1 / 3</div>

  <img src="http://articles.tahlildadeh.com/image.axd?picture=1_15.jpg" style="width:100%">

  <div class="text">متن زیرنویس</div>

</div>

<div class="mySlides fade">

  <div class="numbertext">2 / 3</div>

  <img src="http://articles.tahlildadeh.com/image.axd?picture=4_8.jpg" style="width:100%">

  <div class="text">متن زیرنویس دوم</div>

</div>

<div class="mySlides fade">

  <div class="numbertext">3 / 3</div>

  <img src="http://articles.tahlildadeh.com/image.axd?picture=3_7.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>

<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>

<script>

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("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";

}

</script>

قسمت سوم :  ايجاد Multiple Slideshow در وب سایت

کد جاوا اسکریپت را اضافه کنید.

مثال :

                                /* 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";
                }
                

<h2 style="text-align:center">Multiple Slideshows</h2>

<p>اسلايدشو اول</p>

<div class="slideshow-container">

  <div class="mySlides1">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=1_15.jpg" style="width:100%">

  </div>

  <div class="mySlides1">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=4_8.jpg" style="width:100%">

  </div>

  <div class="mySlides1">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=3_7.jpg" style="width:100%">

  </div>

  <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>

  <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>

</div>

<p>اسلايدشو دوم</p>

<div class="slideshow-container">

  <div class="mySlides2">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=2_9.jpg" style="width:100%">

  </div>

  <div class="mySlides2">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=3_7.jpg" style="width:100%">

  </div>

  <div class="mySlides2">

    <img src="http://articles.tahlildadeh.com/image.axd?picture=4_8.jpg" style="width:100%">

  </div>

  <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>

  <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>

</div>

<script>

var slideIndex = [1,1];

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";  

}

</script>

نمونه Multiple Slideshow چندین نمایش اسلاید