Edit in JSFiddle

var totalSlides = 0;
        var currentSlide = 1;
        var contentSlides = "";

        $(document).ready(function () {
            $("#slideshow-previous").click(showPreviousSlide);
            $("#slideshow-next").click(showNextSlide);
            updateNumericSelector();

            $('.control').click(function () {
                currentSlide = $(this).val();
                updateContentHolder();
                updateButtons();
                updateNumericSelector();
            });

            var totalWidth = 0;
            contentSlides = $(".slideshow-content");
            contentSlides.each(function (i) {
                totalWidth += this.clientWidth;
                totalSlides++;
            });
            $("#slideshow-holder").width(totalWidth);
            $("#slideshow-scroller").attr({ scrollLeft: 0 });
            updateButtons();
        });

        function showPreviousSlide() {
            currentSlide--;
            updateContentHolder();
            updateButtons();
            updateNumericSelector();
        }

        function showNextSlide() {
            currentSlide++;
            updateContentHolder();
            updateButtons();
            updateNumericSelector();
        }

        function updateContentHolder() {
            var scrollAmount = 0;
            contentSlides.each(function (i) {
                if (currentSlide - 1 > i) {
                    scrollAmount += this.clientWidth;
                }
            });
            $("#slideshow-scroller").animate({ scrollLeft: scrollAmount }, 1000);
        }

        function updateButtons() {
            if (currentSlide < totalSlides) {
                $("#slideshow-next").show();
            } else {
                $("#slideshow-next").hide();
            }
            if (currentSlide > 1) {
                $("#slideshow-previous").show();
            } else {
                $("#slideshow-previous").hide();
            }
        }

        function updateNumericSelector() {
            $(".control").each(function () {
                var self = $(this);
                if (self.val() == currentSlide) {
                    self.addClass('selected');                    
                }else{
                    self.removeClass('selected');
                }
            });
        }

<div id="slideshow-area">
  <div id="slideshow-scroller">
    <div id="slideshow-holder">
      <div class="slideshow-content">
          <img src="http://tech.pro/_sotc/sites/default/files/467/images/eureka_small.jpg" style="height:100%; width:100%;" />
      </div>
      <div class="slideshow-content">
        <img src="http://tech.pro/_sotc/sites/default/files/467/images/wallace_gromit_small.jpg" style="height:100%; width:100%;" />
      </div>
      <div class="slideshow-content">
        <img src="http://www.desktopwallpaperhd.net/wallpapers/3/c/nature-coasts-background-beaches-wallpaper-39180.jpg" style="height:100%; width:100%;" />
      </div>
    </div>
  </div>
  <div id="slideshow-previous"></div>
  <div id="slideshow-next"></div>
</div>
<ol id="controls">
    <li id="controls1" class="control" value="1">1</li>
    <li id="controls2" class="control" value="2">2</li>
    <li id="controls3" class="control" value="3">3</li>
</ol></br>
<p><font size="3"><b>Source for this<a  target="_blank"href="http://jqfaq.com/how-to-combine-a-numeric-selector-with-a-jquery-slider/"</a> JQFaq Question<b/><font/><p/>
<iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%; height:115px; border:none;"
/>

#slideshow-area, #slideshow-scroller {
  width: 400px;
  height:250px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

#slideshow-area {
  border: 1px solid #000;
}

#slideshow-holder {
  height: 300px;
}

#slideshow-previous, #slideshow-next {
  width: 50px;
  height: 50px;
  position: absolute;
  background: 
    transparent 
    url("http://tech.pro/_sotc/sites/default/files/467/images/arrow_left.png") 
    no-repeat 50% 50%;
  top: 125px;
  display: none;
  cursor: pointer;
  cursor: hand;
}

#slideshow-next {
  display: block;
  background: 
    transparent 
    url("http://tech.pro/_sotc/sites/default/files/467/images/arrow_right.png") 
    no-repeat 50% 50%;
  top: 125px;
  right: 0;
}

.slideshow-content {
  float: left;
     width: 400px;
  height:250px;
}
ol#controls li {
margin: 0 10px 0 0;
padding: 0;
float: left;
list-style: none;
height: 28px;
    width:28px;
line-height: 28px; 
    border:1px solid gray;
    background-color:rgb(218,243,248);
    text-align:center;
}
.selected{
     background-color:rgb(93,201,225) !important;
}