<script src="/js/jquery.scrollTo.js"></script>
<script src="/js/jquery.localscroll.js"></script>
<script src="/js/scripts.js"></script>

#slideshow {
  width: 918px;
  height: 546px;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: 100px auto 50px auto;
  box-shadow: 0px 0px 80px #000;
  -moz-box-shadow: 0px 0px 80px #000;
  -webkit-box-shadow: 0px 0px 80px #000;
}
#slideshow ul {
  width: 4590px;
  list-style: none;
}
#slideshow ul li {
  float: left;
}
#slideshow-nav {
  width: 300px;
  margin: 0 auto 200px auto;
  visibility: hidden;
}
#slideshow-nav ul {
  list-style: none;
}
#slideshow-nav ul li {
  float: left;
}
#slideshow-nav ul li a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin: 0 10px;
  background-color: #fff;
  text-indent: -9999px;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  box-shadow: 0px 0px 30px #000;
  -moz-box-shadow: 0px 0px 30px #000;
  -webkit-box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
  background-color: #a89d8a;
}
a {
  outline: none;
}
a:focus {
  background-color: #a89d8a;
}

<div id="slideshow">
<ul>
<li id="img1">
<a>
<img src="Ссылка на картинку 1" />
</a>
</li>
<li id="img2">
<a>
<img src="Ссылка на картинку 2" />
</a>
</li>
<li id="img3">
<a>
<img src="Ссылка на картинку 3" />
</a>
</li>
<li id="img4">
<a>
<img src="Ссылка на картинку 4" />
</a>
</li>
<li id="img5">
<a>
<img src="Ссылка на картинку 5" />
</a>
</li>
</ul>
</div>

<div id="slideshow-nav">
<ul>
<li><a href="#img1">Пункт 1</a></li>
<li><a href="#img2">Пункт 2</a></li>
<li><a href="#img3">Пункт 3</a></li>
<li><a href="#img4">Пункт 4</a></li>
<li><a href="#img5">Пункт 5</a></li>
</ul>
</div>