Well, generally speaking, you can construct the pagination links any way you when you specify the "toc" parameter in you initialization code to "markup":
Code:
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
"
"
When you do this, you manually specify the pagination links' HTML, as long as they are links and contained inside a DIV with ID "sliderid-paginate". So to create a "menu" look, your pagination links may look something like:
Code:
<div id="paginate-slider1" class="pagination">
<ul class="markermenu">
<li><a href="#" class="toc">Page 1</a></li>
<li><a href="#" class="toc">Page 2</a></li>
<li><a href="#" class="toc">Page 3</a></li>
<li><a href="#" class="next">Next</a></li>
</ul>
</div>
And the CSS for the menu may look like:
Code:
<style type="text/css">
.markermenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
}
.markermenu li a{
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}
* html .markermenu li a{ /*IE only. Actual menu width minus left padding of LINK (20px) */
width: 150px;
}
.markermenu li a:visited, .markermenu li a:active{
color: #00014e;
}
.markermenu li a:hover{
color: black;
background-color: #ffffcb;
}
</style>
Bookmarks