PDA

View Full Version : Dynamic Drive Content Slider Navigation



element059
08-08-2011, 06:06 AM
Hi all,

I am trying out Dynamic Drive's Content Slider Script:
http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

And everything works great except I can't figure out a way to fine tune the navigation.

1) I'd like to remove the number links and just have prev and next buttons present

2) I'd like to have the prev and next buttons as my own images so is there a way to call next and back via a Javascript command outside of the pagination div?

Any help would be much appriciated.

thanks,

El

jscheuer1
08-08-2011, 08:55 AM
See:

http://www.dynamicdrive.com/dynamicindex17/contentslider_suppliment.htm

scroll down to the second section titled:

http://www.dynamicdrive.com/ddincludes/orangecircle.gif toc: "markup"

It explains how to set the pagination to manual and how to supply your own markup. You may include just the next and previous controls and style them however you like. No need to use javascript, just put them in your manual pagination division and give them the class names of 'next' and 'prev' respectively.

Something like this for the markup:


<div id="paginate-slider4" style="background:white">
<a href="#" class="prev"><img src="prev.gif" alt="" /></a>
<a href="#" class="next"><img src="next.gif" alt="" /></a>
</div>

Something like, in the init:


<script type="text/javascript">

featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>

element059
08-08-2011, 01:41 PM
Thanks - things seem to make more sense when it's not 5am :)