<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>