How to Create Effective Image Slider Easily in Html

/*  Note: First of all create an external css (say chlImageSlider.css) and javascript page/file (say chlImageSlider.js) and save both the file in the same directory/folder(say ImageSlider) where we will create or save an html slider page/file(say chlImageSlider.html) in any hard drive of the computer system. Now we create a new image/picture folder (say Image) where we store several images/pictures to run/appear in the slides.Now the css code is -  */


*{
   box-sizing:border-box;
 }

body{
      font-family: Verdana,sans-serif;
      margin:0;
    }

.mySlides{
           display:none;
         }

.slideshow-container{
                      max-width: 1000px; /*To give the maximum width of slide show container*/
                      position: relative;
                      margin: auto;
                    }

  /* code for next & previous buttons */
 .prev,.next{
                cursor: pointer;   /*Make the cursor as hand symbol*/
                position: absolute;
                top: 50%;       /*To give the position from top*/
                width: auto;
                padding: 16px;    /*To increase the width of button using paddding*/
                margin-top: -42px;
                color: red;    /*You can change the color from red to white*/
                font-weight: bold;
                font-size: 18px;
                transition: 0.6s ease;
                border-radius: 0 3px 3px 0;                
            }

  .prev{
          left: 0;
       }
            
  .next          /* Position the "next button symbol" to the right */
       {
          right: 0;   /*To give the position of next button to the right since next button 
                        situtated above the previous button*/
          border-radius: 3px 0 0 3px;  /*Top right and bottom right will be round with 3px 
                                         border*/
       }

            /* 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;   /*To give the color of number text*/
                font-size: 12px;   /*Font size of numbertext*/
                padding: 8px 12px;    /*Set the position of numbertext*/
                position: absolute;
                top: 0;  /*Position from top of number text*/
            }

      /* The dots/bullets/indicators */
  .dot
      {
                cursor:pointer;  /*make the hand symbol*/
                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;
                     }

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

        /* On smaller screens, decrease text size */
   @media only screen and (max-width: 300px){
                                               .prev,.next,text {font-size: 11px}
                                            }


/*  NB: Save the above css page code as chlImageSlider.css in same folder/directory where html page/file is saved. Now write java script code -  */


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

var slideIndex1 = 0;
showSlides1();

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

    slides[slideIndex1-1].style.display = "block";
    dots[slideIndex1-1].className += " active";

    setTimeout(showSlides1, 2000); // Here 2000 milliseconds changes slides image every 2 
                                      seconds.
}


/* NB: Now Save the above java script code/page as chlImageSlider.js in same folder/directory where html page/file is saved. Now finally write html page code where image slider will appear. The html page code is -   */


<html>
    <head>  
        <title>Codershelpline.com</title>

              <!--  Calling of external css chlImageSlider.css to take effect in image slider, 
                    which is already saved in same folder where html page is saved  -->

        <link rel="stylesheet" type="text/css" href="chlImageSlider.css">        
    </head>

    <body>
        <form name="form1">
            <center>				
		<div style="width: 950px; height: 588px; border: none; margin-top: 30px;">
               	    

                    <div class="slideshow-container">                 		
                 	
                        <div class="mySlides fade" style="display: block;">
                	    <div class="numbertext">Put a Caption Name or 1 / 7 here </div>
                	    <img src="Image/img1.jpg" style="width:100%; height: 550px">
             		</div>

            		<div class="mySlides fade" style="display: none;">
                	    <div class="numbertext">2 / 7</div>
                	    <img src="Image/img2.jpg" style="width:100%; height: 550px">
            		</div>

            		<div class="mySlides fade" style="display: none;">
                	    <div class="numbertext">3 / 7</div>
                	    <img src="Image/img3.png" style="width:100%; height: 550px">
            		</div>

            		<div class="mySlides fade" style="display: none;">
                	    <div class="numbertext">4 / 7</div>
                	    <img src="Image/img4.jpg" style="width:100%; height:550px">
            		</div>

            	        <div class="mySlides fade" style="display: none;">
                	    <div class="numbertext">5 / 7</div>
                	    <img src="Image/img5.bmp" style="width:100%; height: 550px">
            		</div>

            		<div class="mySlides fade" style="display: none;">
                	    <div class="numbertext">6 / 7</div>
                	    <img src="Image/img6.jpg" style="width:100%; height: 550px">
            		</div>

            		<div class="mySlides fade" style="display: none;">
                	    <div class="numbertext">7 / 7</div>
                	    <img src="Image/img7.png" style="width:100%; height: 550px">
            		</div>

		        <a class="prev" onclick="plusSlides(-1)"> ❮ </a>
		        <a class="next" onclick="plusSlides(1)"> ❯ </a>
        	    </div> 
                    <br>

        	<div style="text-align:center">
            		<span class="dot active" 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>
            		<span class="dot" onclick="currentSlide(6)"></span> 
            		<span class="dot" onclick="currentSlide(7)"></span>  
        	</div>
                      <!--   Call of external javascript file chlImageSlider.js to take effect 
                             in html slider page, already saved in same folder where html 
                             slider page is saved.  -->

        	<script type="text/javascript" src="chlImageSlider.js"></script>           
    	    </div>                
         </center>
      </form>
   </body>
</html>

<!--  NB: Now finally Save the above html page code as chlImageSlider.html in a 
          folder/directory say ImageSlider in any hard drive.Now run the html slider page. -->

 348 total views,  1 views today

Categories: HTML

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.