JavaScript Slider

Javascript image slider without using any plugin or jQuery. Pure javascript Image slider

by Prasanna Brabourame

HTML

<div class="Prod-dialog">
  <div class="Prod-container">
    <div class="Prod-invoice-sec">

      <div class="Prod-header">
        <h2>Slider</h2>
      </div>
      <div class="Prod-container-body">
        <div class="Prod-Gallery">

          <div class="Prod-Gallery-body">

            <!--Wrapper to contain interchanging content-->
            <div class="Prod-tabs-wrapper">

              <div id="ProdSliderContent" class="Prod-tab-content current">
                <div class="Prod-slider-view">
                  <img id="sliderImgTag">
                  <div class="Prod_Arrow left"></div>
                  <div class="Prod_Arrow right"></div>
                </div>
                <div class="Prod_slider">
                  <ul class="Prod-grid-group" id="Prod-grid-slider"> </ul>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
    <div class="Prod-footer">
      <p>Prasanna Brabourame</p>
      <p>Open Source Enthusiasts</p>
      <p>Place:
        <a> Puducherry,Pondicherry,INDIA</a>
      </p>
      <p>Email:
        <a href="mailto:[email protected]">[email protected]</a>
      </p>
    </div>
  </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700');
/* font-family: 'Nunito', sans-serif; */

:after,
:before,
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*::selection {
  background: transparent;
}

.Prod-dialog * {
  font-family: 'Nunito', sans-serif;
}

.Prodclear {
  clear: both;
}

.Prod-pull-right {
  float: right !important;
}

.Prod-pulk-left {
  float: left !important;
}

.Prod-col-4 {
  width: 45%;
  float: left;
  padding: 0px 15px;
}

.Prod-col-8 {
  width: 55%;
  float: left;
  padding: 0px 15px 0px 30px;
}

/* dialog start */

.Prod-dialog.active {
  visibility: visible;
  position: fixed;
  background: rgb(33, 32, 32);
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  transition: all 0.5s;
  padding: 30px;
  z-index: 99999;
}

.Prod-container {
  max-width: 1440px;
  background: #fff;
  margin: auto;
  /* box-shadow: 0px 0px 15px #ffffff; */
  padding: 0px;
  margin-top: 50px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: linear-gradient(to right, white 44%, #f9fafb 44%);
}

.Prod-Gallery-footer .Prod-col-8 {
  padding-right: 0px;
}

/* width */

.Prod-container::-webkit-scrollbar,
.Prod_slider::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */

.Prod-container::-webkit-scrollbar-track,
.Prod_slider::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */

.Prod-container::-webkit-scrollbar-thumb,
.Prod_slider::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* Handle on hover */

.Prod-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.Prod-scroll-hidden {
  overflow: hidden;
}

#Prod-dialog-close {
  position: absolute;
  right: 40px;
  top: 15px;
  width: 40px;
  height: 40px;
  opacity: 1;
  background: #fff;
  border-radius: 50%;
}

#Prod-dialog-close:hover {
  opacity: 1;
}

#Prod-dialog-close:before,
#Prod-dialog-close:after {
  position: absolute;
  left: 19px;
  content: '...

JavaScript

var _imgPath = {
   "imageDetails": [{
       "Id": "F0001",
       "Name": "figure1.jpg",
       "Src": 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png'
     },
     {
       "Id": "F0002",
       "Name": "figure2.jpg",
       "Src": 'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png'
     },
     {
       "Id": "F0003",
       "Name": "figure3.jpg",
       "Src": 'https://homepages.cae.wisc.edu/~ece533/images/baboon.png'
     },
     {
       "Id": "F0004",
       "Name": "figure4.jpg",
       "Src": 'https://homepages.cae.wisc.edu/~ece533/images/barbara.png'
     },
     {
       "Id": "F0005",
       "Name": "figure5.jpg",
       "Src": 'https://homepages.cae.wisc.edu/~ece533/images/boat.png'
     },
     {
       "Id": "F0006",
       "Name": "figure6.jpg",
       "Src": 'https://homepages.cae.wisc.edu/~ece533/images/cat.png'
     },
     {
       "Id": "F0007",
       "Name": "figure7.jpg",
       "Src": 'https://homepages.cae.wisc.edu/~ece533/images/fruits.png'
     },
     {
       "Id": "F0008",
       "Name": "figure8.jpg",
       "Src": 'https://homepages.cae.wisc.edu/~ece533/images/frymire.png'
     },
     {
       "Id": "F0009",
       "Name": "figure9.jpg",
       "Src": 'https://homepages.cae.wisc.edu/~ece533/images/girl.png'
     },
     {
       "Id": "F00010",
       "Name": "figure10.jpg",
       "Src": 'https://homepages.cae.wisc.edu/~ece533/images/monarch.png'
     }
   ]
 }
 var currentImage, LastImage;

 function initLoader(arg_imgPath) {
   if (arg_imgPath.imageDetails.length > 0) {
     sliderImgTag.src = arg_imgPath.imageDetails[0]['Src'];
     sliderImgTag.setAttribute('cid', arg_imgPath.imageDetails[0]['Id']);
     sliderImgTag.setAttribute('alt', arg_imgPath.imageDetails[0]['name']);
     currentImage = 0;
     document.querySelector('.Prod_Arrow.left').style.visibility = "hidden"
   }
   document.querySelector('.Prod_Arrow.right').addEventListener('click', function() {
     btnArrowShift((currentImage + 1),...