jQuery Tiny Carousel

Dengan jQuery Tiny Carousel ( http://baijs.nl/tinycarousel/ ) kita dapat membuat tampilan carousel dengan mudah. Untuk mempermudah kita belajar kita dapat mendownload file contohnya di http://baijs.nl/tinycarousel/example.zip dan kemudian mengekstrak ke dalam folder komputer kita.

Perhatikan default file yaitu index.html dan silahkan melihat pada bagian:
    <script type=”text/javascript”>
        $(document).ready(function(){
            $(‘#slider1’).tinycarousel();    
        });
    </script>    
dan

    <div id=”slider1″>
        <a class=”buttons prev” href=”#”>left</a>
        <div class=”viewport”>
            <ul class=”overview”>
                <li><img src=”images/picture6.jpg” /></li>
                <li><img src=”images/picture5.jpg” /></li>
                <li><img src=”images/picture4.jpg” /></li>                                    
                <li><img src=”images/picture3.jpg” /></li>
                <li><img src=”images/picture2.jpg” /></li>
                <li><img src=”images/picture1.jpg” /></li>
            </ul>
        </div>
        <a class=”buttons next” href=”#”>right</a>
    </div>

Ini akan membuat seperti sebuah tampilan slideshow 1 gambar. Bagaimana kalau kita ingin mengubah menjadi 3 image per slideshow ?
Kita harus mengubah scriptnya menjadi        
$(document).ready(function(){
            $(‘#slider1’).tinycarousel({ display: 2 });
});

Dan cssnya yaitu css/websites.css mengubah width .viewport dari 240 px menjadi 720 px seperti di bawah ini:
#slider1 .viewport { float: left; width: 720px; height: 125px; overflow: hidden; position: relative; }

Bagaimana kalau kita ingin membuat pagination ? Kita dapat menambahkan coding untuk pagination.
Untuk index.html pengubahan menjadi:
    <div id=”slider1″>
        <a class=”buttons prev” href=”#”>left</a>
        <div class=”viewport”>
            <ul class=”overview”>
                <li><img src=”images/picture6.jpg” /></li>
                <li><img src=”images/picture5.jpg” /></li>
                <li><img src=”images/picture4.jpg” /></li>                                    
                <li><img src=”images/picture3.jpg” /></li>
                <li><img src=”images/picture2.jpg” /></li>
                <li><img src=”images/picture1.jpg” /></li>
            </ul>
        </div>
        <a class=”buttons next” href=”#”>right</a>
         <ul class=”pager”>
            <li><a rel=”0″ class=”pagenum” href=”#”>1</a></li>
            <li><a rel=”1″ class=”pagenum” href=”#”>2</a></li>
        </ul>
    </div>

Kemudian tambahkan css yaitu di css/website.css nya :
#slider1 .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }
#slider1 .pager li { float: left; }
#slider1 .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 5px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
#slider1 .active { color: #fff; background-color:  #555555; }

Pada scriptnya diubah menjadi:
        $(document).ready(function(){
            $(‘#slider1’).tinycarousel({ display: 2,pager:true });
        });

Demo dapat dilihat di http://aris.proweb.asia/tinycarousel/index.html dengan tampilan seperti gambar di bawah ini:

Kunjungi www.proweb.co.id untuk menambah wawasan anda.