Slider Image Atas

Slider dengan Button left-right

Dalam pertemuan ini saya akan berbagi informasi tentang slider Image untuk bagian atas, dengan sliding imag secara vertikal dan horizontal Untuk dapat membangun slidernya kita membutuhkan tag css, html, dan Javascript. mari kita langsung saja menuju TKP. 

Tag HTML nya

<div id="wrslider"> <div id="mover" style="width: 2880px; left: 0px;"> <div id="slide-1" class="slide"> <h1> Judul 1</h1> <p> tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba. </p> <a href="#"> <img alt="learn more" src="image_1.png" style="top: 20px;"> </img> </a> </div> <div class="slide"> <h1> Judul 2</h1> <p> tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba. </p> <a href="#"> <img alt="learn more" src="image_2.png" style="top: 20px;"> </img> </a> </div> <div class="slide"> <h1> Judul 3</h1> <p> tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba. </p> <a href="#"> <img alt="learn more" src="image_3.png" style="top: 20px;"> </img> </a> </div> </div> </div>

Tag CSSnya

<style> #wrslider { background: white url(background.jpg); height: 227px; width:70%; overflow: hidden; float:center; position: relative; } #mover { width: 2880px; position: relative; } .slide { padding: 40px 30px; width: 900px; float: left; position: relative; } .slide h1 { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px; color: #ac0000; } .slide p { color: #999; font-size: 12px; line-height: 22px; width: 300px; } .slide img { position: absolute; top: 20px; left: 400px; } #slider-stopper { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white; padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; } </style>

Javascript

<script src="https://takim.googlecode.com/svn/branches/a.js" type="text/javascript"> </script> <script src="https://takim.googlecode.com/svn/branches/c.js" type="text/javascript"> </script>

File nya dapat dilihat hasilnya  dan dapat diunduh berikut ini :

Demo                                  Unduh