title: adding navigation bullets in my existing slider with next / previous button
body: <p>I have a simple video slider with next/previous button. As it turns out the individual bullets navigation for each video-slide is also needed.</p>
  
  <p>Which brings me here for a greeting with y'all. </p>
  
  <p>Here is my pathetic effort to show what I did:-</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="container row full-content" style="position: relative  !important; top: -180px !important;"&gt;
  
  
        &lt;div class="right-side full-content col-xs-3 down"&gt;
      &lt;div class="slide-box"&gt;
  
  
          &lt;div class="example1" id="start1"&gt;
  
            &lt;video  id="video1" class="example1" width="240" height="134" controls autoplay true&gt;
                  &lt;source src="./files/videos/video-1.mp4" type="video/mp4"&gt;
            &lt;/video&gt;
            &lt;div style="clear:float ;height: 10px;"&gt;&lt;/div&gt;
            &lt;span class="presented"&gt;Presented by: &lt;/span&gt;
            &lt;a href="#" class="presenter black"&gt;First Presenter&lt;/a&gt;
            &lt;span class="slide-count"&gt;Slide &lt;strong&gt;1 of 6&lt;/strong&gt;&lt;/span&gt; 
          &lt;/div&gt;
  
  
  
  
        &lt;div class="example1"&gt;
              &lt;video  class="example1" width="240" height="134" controls  false&gt;
                &lt;source src="./files/videos/video-3.mp4" type="video/mp4"&gt;
              &lt;/video&gt;
  
          &lt;div style="clear:float ;height: 10px;"&gt;&lt;/div&gt;&lt;span class="presented"&gt;Presented by: &lt;/span&gt;&lt;a href="#" class="presenter black"&gt;Presentation 2&lt;/a&gt;
          &lt;span class="slide-count"&gt;Slide &lt;strong&gt;2 of 6&lt;/strong&gt;&lt;/span&gt; 
        &lt;/div&gt;
  
        &lt;div class="example1"&gt;
              &lt;video  class="example1" width="240" height="134" controls  false&gt;
                &lt;source src="./files/videos/presenter-4.mp4" type="video/mp4"&gt;
              &lt;/video&gt;
  
          &lt;div style="clear:float ;height: 10px;"&gt;&lt;/div&gt;&lt;span class="presented"&gt;Presented by: &lt;/span&gt;&lt;a href="#" class="presenter black"&gt;Presenter Name&lt;/a&gt;
          &lt;span class="slide-count"&gt;Slide &lt;strong&gt;3 of 6&lt;/strong&gt;&lt;/span&gt; 
        &lt;/div&gt;
  
        &lt;div class="example1"&gt;
              &lt;video  class="example1" width="240" height="134" controls  false&gt;
                &lt;source src="./files/videos/presenter-5.mp4" type="video/mp4"&gt;
              &lt;/video&gt;
  
          &lt;div style="clear:float ;height: 10px;"&gt;&lt;/div&gt;&lt;span class="presented"&gt;Presented by: &lt;/span&gt;&lt;a href="#" class="presenter black"&gt;Presenter Name&lt;/a&gt;
          &lt;span class="slide-count"&gt;Slide &lt;strong&gt;4 of 6&lt;/strong&gt;&lt;/span&gt; 
        &lt;/div&gt;
  
        &lt;div class="example1"&gt;
              &lt;video  class="example1" width="240" height="134" controls  false&gt;
                &lt;source src="./files/videos/presenter-6.mp4" type="video/mp4"&gt;
              &lt;/video&gt;
  
          &lt;div style="clear:float ;height: 10px;"&gt;&lt;/div&gt;&lt;span class="presented"&gt;Presented by: &lt;/span&gt;&lt;a href="#" class="presenter black"&gt;Presenter Name&lt;/a&gt;
          &lt;span class="slide-count"&gt;Slide &lt;strong&gt;5 of 6&lt;/strong&gt;&lt;/span&gt; 
        &lt;/div&gt;
  
  
        &lt;div class="example1"&gt;
              &lt;video  class="example1" width="240" height="134" controls  false&gt;
                &lt;source src="./files/videos/presenter-7.mp4" type="video/mp4"&gt;
              &lt;/video&gt;
  
          &lt;div style="clear:float ;height: 10px;"&gt;&lt;/div&gt;&lt;span class="presented"&gt;Presented by: &lt;/span&gt;&lt;a href="#" class="presenter black"&gt;Presenter Name&lt;/a&gt;
          &lt;span class="slide-count"&gt;Slide &lt;strong&gt;6 of 6&lt;/strong&gt;&lt;/span&gt; 
        &lt;/div&gt;
  
  
            &lt;br/&gt;
            &lt;ul class="pagination vertical" style="position: relative; top: -30px;"&gt;
          &lt;a href="#" class="back"&gt;
              &lt;li class="float-left"&gt;&lt;img src="./images/previous-button.png"/&gt;&lt;/li&gt;
              &lt;/a&gt; &lt;a href="#" class="forward"&gt;
              &lt;li class="float-right"&gt;&lt;img src="./images/next-button.png"/&gt;&lt;/li&gt;
              &lt;/a&gt;
        &lt;/ul&gt;
          &lt;/div&gt;
      &lt;a class="presentation-buttons down select" href="#" data-toggle="modal" data-target="#myModal"&gt;Select presentation slide&lt;/a&gt; 
  
  &lt;a class="presentation-buttons down select" href="#" data-toggle="modal" data-target="#myModal2"&gt;View presentation menu&lt;/a&gt; 
  
  
   &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <h2>JQuery</h2>
  
  <pre><code>$(document).ready(function(e) {
  
  
      var $curr = $( "#start" );
  
      var slide_index = 1;
      var max_slides = $("div.slide-image").children("div.example").length;
  
      /* Video Navigation JS */
  
      var $curr1 = $( "#start1" );
      $curr1.css(  "height" , "" );
  
      var video_index = 1;
      var max_videos = $("div.slide-box").children("div.example1").length;
  
      next_img = './sites/all/themes/basic/images/next-button.png';
      ds_next_img = './sites/all/themes/basic/images/disabled-next.png';
  
      previous_img = './sites/all/themes/basic/images/previous-button.png';
      ds_previous_img = './sites/all/themes/basic/images/disabled-previous.png';
  
  
       $('li.float-left img').attr("src", ds_previous_img);
      //alert(max_videos);
  
      $( ".back" ).click(function() {
  
        if (video_index - 1 &lt; 1) {
           $('li.float-left img').attr("src", ds_previous_img);
          return;
        }
  
        $('li.float-right img').attr("src", next_img);
  
  
        $curr1.children('video.example1').get(0).pause();
        $curr1 = $curr1.prev();
  
        video_index --;
  
        if (video_index - 1 &lt; 1) {
          $('li.float-left img').attr("src", ds_previous_img);
        }
  
  
        var styles = {
            display: "block"
          };
  
          var default_styles = {
            display: "none"
          };
        $( "div.example1" ).css( default_styles );
        $curr1.css( styles );
  
        $curr1.children('video.example1').get(0).play();
      });
  
  
      $( ".forward" ).click(function() {
  
  
        if (video_index +1 &gt; max_videos) {
  
          $('li.float-right img').attr("src", ds_next_img);
          return;
        }
  
        $('li.float-left img').attr("src", previous_img);
  
        $curr1.children('video.example1').get(0).pause();
  
        $curr1 = $curr1.next();
  
        video_index ++;
  
        if (video_index +1 &gt; max_videos) {
          $('li.float-right img').attr("src", ds_next_img);
        }
  
  
  
        var styles = {
              display: "block"
            };
  
            var default_styles = {
              display: "none"
            };
          $( "div.example1" ).css( default_styles );
          $curr1.css( styles );
  
          //$curr1.children('video').play();
          $curr1.children('video.example1').get(0).play();
          //$curr1.children('video').attr({'autoplay':'true'});
  
  
        });
  
  
      });
  </code></pre>