محتوای داینامیک – نمایش محتوا به صورت اسلایدی

<head>
<script type=”text/javascript” src=”contentslider.js”></script>
<link href=”contentslider.css” rel=”stylesheet” type=”text/css”>
</head>

<body>
<!– =================== نمونه ۱ ==================== –>
<div align=”center”>

<div id=”slider1″ class=”sliderwrapper”>
<div class=”contentdiv”>
محتوای شماره ۱
<p></p><a href=”javascript:featuredcontentslider.jumpTo(‘slider1’, 3)”>Go to 3rd slide</a></p>
</div>

<div class=”contentdiv”>
محتوای شماره ۲
</div>

<div class=”contentdiv”>
محتوای شماره ۳
</div>

</div>
<div id=”paginate-slider1″ class=”pagination”>

</div>
<script type=”text/javascript”>

featuredcontentslider.init({
id: “slider1”, //id of main slider DIV
contentsource: [“inline”, “”], //Valid values: [“inline”, “”] or [“ajax”, “path_to_file”]
toc: “#increment”, //Valid values: “#increment”, “markup”, [“label1”, “label2”, etc]
nextprev: [“Previous”, “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.2], //[true/false, fadedegree]
autorotate: [true, 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>
<!– ———————————- انتهای کد نمونه ۱ —————————— –>

<!– =================== نمونه ۲ ==================== –>

<div id=”slider2″ class=”sliderwrapper”>

<div class=”contentdiv”>
محتوای شماره ۱
</div>

<div class=”contentdiv”>
محتوای شماره ۲ <br />
<p></p><a href=”javascript:featuredcontentslider.jumpTo(‘slider2’, 1)”>Go back to 1st slide</a></p>
</div>

<div class=”contentdiv”>
محتوای شماره ۳
</div>

</div>

<div id=”paginate-slider2″ class=”pagination”>

<a href=”#” class=”toc”>page 1</a> <a href=”#” class=”toc anotherclass”>page 2</a> <a href=”#” class=”toc”>page 3</a> <a href=”#” class=”prev” style=”margin-left: 10px”><strong><</strong></a> <a href=”#” class=”next”><strong>></strong></a></div>

<script type=”text/javascript”>
featuredcontentslider.init({
id: “slider2”, //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: [“Previous”, “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.2], //[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>
</div>
</body>