Here’s the code
/*header*/
#header2{
background-repeat:repeat-x;
height:250px;
width:70%;
margin-left:15%;
}
#window_sidebar{
height:250px;
width:200px;
background-color: #C3F;
z-index: 100; /*--Assures the paging stays on the top layer--*/
display: static;
float:left;
}
.transition{
height:250px;
width:auto;
background-color: #0F0;
z-index: 100; /*--Assures the paging stays on the top layer--*/
position: relative;
float:none;
left:auto;
background-repeat: repeat-x;
margin-right:303px;
margin-left:200px;
}
/*--Main Container--*/
.main_view {
float: right;
position: relative;
overflow: hidden;
}
/*--Window/Masking Styles--*/
.window {
height:200px; width: 300px;
/*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background-color: #999;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
<div id="header2">
<div id="window_sidebar"></div>
<div class="transition"></div>
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#1"><img src="https://www.sketchygrid.com/index/wp-content/themes/blackneon/slides/reel_2.png" alt="" /></a>
<a href="#2"><img src="https://www.sketchygrid.com/index/wp-content/themes/blackneon/slides/reel_1.png" alt="" /></a>
<a href="#3"><img src="https://www.sketchygrid.com/index/wp-content/themes/blackneon/slides/reel_3.png" alt="" /></a>
<a href="#4"><img src="https://www.sketchygrid.com/index/wp-content/themes/blackneon/slides/reel_4.png" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#1" rel="1">1</a>
<a href="#2" rel="2">2</a>
<a href="#3" rel="3">3</a>
<a href="#4" rel="4">4</a>
</div>
</div>
