Cara Membuat Featured Content Slider
Featured Content Slider ini memungkinkan menampilkan slideshow dari konten pada halaman Anda. Pengguna dapat secara manual memilih konten untuk melihatnya atau dengan rotasi otomatis. Setiap konten didefinisikan sebagai HTML biasa, dapat menggunakan sebuah file eksternal tunggal dan mengambilnya melalui Ajax.
Contoh 1:
SuckerTree Horizontal Menu is a CSS and DOM hybrid menu that's list based and supports multiple levels of sub menus.
We named this CSS tab menu "Half Moon" based on its look. The menu uses a transparent background image for each tab item to create a right round edge.
This is an elegant CSS menu bar that uses a transparent "slanted" image to act as a divider and separate each menu item.
- Auto display mode (until you click on a pagination link).
- Contents defined inline on the page.
- Fade effect disabled.
- Pagination links automatically generated as sequential numbers.
- Manual Mode
- Contents defined inline on the page.
- Pagination links automatically generated, with each label user
defined. - "Previous" button hidden.
- Fade transition slowed down.
- Reload page and have
the 2nd slide loaded by default using a URL parameter
- Manual Mode
- Contents fetched via Ajax from an external file (fcs.htm).
- Pagination links created using HTML markup within pagination
DIV.
- Auto display mode (until you mouse over pagination links or click on
the slider) - Pagination links created using HTML markup within pagination
DIV. - Contents revealed "
mouseover" instead of the default "click".
Cara Memasang Featured Content Slider
- Langkah Pertama:
<link href='https://sites.google.com/site/archivesiugi/javascr/contentslider.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/archivesiugi/javascr/contentslider.js' type='text/javascript'>
/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
Atau download script tersebut dibawah ini:<script src='https://sites.google.com/site/archivesiugi/javascr/contentslider.js' type='text/javascript'>
/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
Jangan lupa untuk menempatkannya diatas kode </head>. Lihat cara pemasangannya disini
- Langkah Kedua:
<h2>Example 1</h2>
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>
<div class="contentdiv">
Content 2 Here.
</div>
<div class="contentdiv">
Content 3 Here.
</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="slider1" class="sliderwrapper">
<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>
<div class="contentdiv">
Content 2 Here.
</div>
<div class="contentdiv">
Content 3 Here.
</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>
sumber: dynamicdrive
makasih banyak buat infonya gan,, nice post..
ReplyDeletehttp://goo.gl/dYTOFc