title: How to Create Image-Video Thumbnail Slider With Previous and Next Button dynamically using Javascript only?
body: <p>I want to make Thumbnail Image-Video Slider dynamic using javascript only, here i created a container in which i added some images through javascript, but now i want to slide this images with Next and Previous Buttons and also on swipe mouse slider should slide.</p>
  
  <p>This is the Latest Code whatever i did now i am getting problem in NEXT &amp; PREVIOUS Buttons. i want <strong>onclick</strong> of <strong>NEXT</strong> &amp; <strong>PREVIOUS</strong> image slider should slide Backward and Forward</p>
  
  <p><a href="https://i.stack.imgur.com/1iOsk.jpg" rel="nofollow noreferrer">This is the Output what i am getting from this code</a></p>
  
  <p>and images should come in only one <strong>Row</strong> </p>
  
  <p>Please Help me !!</p>
  
  <pre><code>$(document).ready(function ()
  {
      function PhotoGallery()
      {
          this.index = 0;
          this.holder = [];
  
  
          var container = document.getElementById('thumbs_container');
          var nextButton = document.createElement('button');
          nextButton.className = 'next';
          nextButton.innerHTML = '&amp;#10095;';
          container.appendChild(nextButton);
  
  
  
  
  
          var prevButton = document.createElement('button');
          prevButton.className = 'previous'; 
          prevButton.innerHTML = '&amp;#10094;';
          container.appendChild(prevButton);
  
          container = $(window).width();
          nextButton.addEventListener('click', this.next);
          prevButton.addEventListener('click', this.previous);
  
          this.create = function (name, src) {
              var container = document.getElementById('thumbs_container');
              var img = document.createElement('img');
              img.src = src;
              img.alt = name;
              img.className = 'thumb';
              img.style.width = '300px';
              img.style.height = '150px;';
              container.appendChild(img);
  
              this.holder.push({
                  index: ++this.index,
                  ele: img
              })
          }
  
          this.next = function () {
              this.holder[this.index].ele.style.display = 'none';
              this.holder[++this.index].ele.style.display = block;
  
          }
  
          this.previous = function () {
              this.holder[this.index].ele.style.display = 'none';
              this.holder[--this.index].ele.style.display = 'block';
  
          }
      }
  
      var photoGallery = new PhotoGallery();
      photoGallery.create('1', 'img/1.jpg');
      photoGallery.create('2', 'img/2.jpg');
      photoGallery.create('3', 'img/3.jpg');
      photoGallery.create('4', 'img/4.jpg');
      photoGallery.create('5', 'img/5.jpg');
      photoGallery.create('6', 'img/6.jpg');
      photoGallery.create('7', 'img/7.jpg');
      photoGallery.create('8', 'img/8.jpg');
      photoGallery.create('9', 'img/9.jpg');
      photoGallery.create('10','img/10.jpg');
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#thumbs_container {
      margin: 400px auto; /*center-aligned*/
      width: 100%; /*width:400px;*/
      padding: 4px 40px; /*Gives room for arrow buttons*/
      box-sizing: border-box;
      position: relative;
      background-color: red;
      -webkit-user-select: none;
      user-select: none;
      /*max-width: 1600px;
      max-height: 600px;*/
      overflow:hidden;
  }
  
  .thumb{
      margin-right: 1px;
  }
  
  
  
  .previous {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 10px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      position: absolute;
      margin-left: -33px;
      margin-top: 63px;
  }
  
  .next {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 10px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      position: absolute;
      margin-left: 1822px;
      margin-top: 63px;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id='thumbs_container'&gt;&lt;/div&gt;
  </code></pre>