adding navigation bullets in my existing slider with next / previous button

Question

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.

Which brings me here for a greeting with y'all.

Here is my pathetic effort to show what I did:-

HTML

<div class="container row full-content" style="position: relative  !important; top: -180px !important;">


      <div class="right-side full-content col-xs-3 down">
    <div class="slide-box">


        <div class="example1" id="start1">

          <video  id="video1" class="example1" width="240" height="134" controls autoplay true>
                <source src="./files/videos/video-1.mp4" type="video/mp4">
          </video>
          <div style="clear:float ;height: 10px;"></div>
          <span class="presented">Presented by: </span>
          <a href="#" class="presenter black">First Presenter</a>
          <span class="slide-count">Slide <strong>1 of 6</strong></span> 
        </div>




      <div class="example1">
            <video  class="example1" width="240" height="134" controls  false>
              <source src="./files/videos/video-3.mp4" type="video/mp4">
            </video>

        <div style="clear:float ;height: 10px;"></div><span class="presented">Presented by: </span><a href="#" class="presenter black">Presentation 2</a>
        <span class="slide-count">Slide <strong>2 of 6</strong></span> 
      </div>

      <div class="example1">
            <video  class="example1" width="240" height="134" controls  false>
              <source src="./files/videos/presenter-4.mp4" type="video/mp4">
            </video>

        <div style="clear:float ;height: 10px;"></div><span class="presented">Presented by: </span><a href="#" class="presenter black">Presenter Name</a>
        <span class="slide-count">Slide <strong>3 of 6</strong></span> 
      </div>

      <div class="example1">
            <video  class="example1" width="240" height="134" controls  false>
              <source src="./files/videos/presenter-5.mp4" type="video/mp4">
            </video>

        <div style="clear:float ;height: 10px;"></div><span class="presented">Presented by: </span><a href="#" class="presenter black">Presenter Name</a>
        <span class="slide-count">Slide <strong>4 of 6</strong></span> 
      </div>

      <div class="example1">
            <video  class="example1" width="240" height="134" controls  false>
              <source src="./files/videos/presenter-6.mp4" type="video/mp4">
            </video>

        <div style="clear:float ;height: 10px;"></div><span class="presented">Presented by: </span><a href="#" class="presenter black">Presenter Name</a>
        <span class="slide-count">Slide <strong>5 of 6</strong></span> 
      </div>


      <div class="example1">
            <video  class="example1" width="240" height="134" controls  false>
              <source src="./files/videos/presenter-7.mp4" type="video/mp4">
            </video>

        <div style="clear:float ;height: 10px;"></div><span class="presented">Presented by: </span><a href="#" class="presenter black">Presenter Name</a>
        <span class="slide-count">Slide <strong>6 of 6</strong></span> 
      </div>


          <br/>
          <ul class="pagination vertical" style="position: relative; top: -30px;">
        <a href="#" class="back">
            <li class="float-left"><img src="./images/previous-button.png"/></li>
            </a> <a href="#" class="forward">
            <li class="float-right"><img src="./images/next-button.png"/></li>
            </a>
      </ul>
        </div>
    <a class="presentation-buttons down select" href="#" data-toggle="modal" data-target="#myModal">Select presentation slide</a> 

<a class="presentation-buttons down select" href="#" data-toggle="modal" data-target="#myModal2">View presentation menu</a> 


 </div>

</div>

JQuery

$(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 < 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 < 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 > 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 > 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'});


      });


    });

Answer 1

This is how I did it.

enter link description here

Best.

function showSlide(id){ // id is the variable name of what we will be calling which will be passed
    stopLoop(); // call function that we have declared above so that the interval is cleared and restarted

        if(id > count){
            id = 1; // if id = more than the count of images then set back to 1
        }else if(id < 1){
            id = count; // if id = less than count of list then set back to 4 or whatever number of images
        }

        $('.quickslider > img').fadeOut(300); // fadeout all images
        $('.quickslider > img#'+id).fadeIn(300); // use sliderNext to calculate the next slider id

        $('.nav-thumbs > a#'+id).addClass('active');

        sliderInt = id; // update so that the current slide = 2 as set globally
        sliderNext = id + 1; // calculate the next image
        startSlider(); // start the slider process again, as it was stopped before
}