Membuat Content Slider dengan Slidedeck

Slidedeck adalah sebuah plugin untuk jQuery yang berfungsi untuk membuat content slider. Slidedeck memiliki banyak sekali features yang sangat menarik. salah satunya adalah slider mode.

Slider mode menghilangkan vertical title bars, berarti navigasinya pun hilang. Kali ini saya akan menjelaskan bagaimana membuat navigasi slider dengan bantuan Slidedeck API.

HTML Markup

<html>
<head>
    <title>Slidedeck Content Slider</title>

    <!-- Stylesheet skin untuk slidedeck -->
    <link rel="stylesheet" type="text/css" href="css/slidedeck.skin.css" >
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

    <div id="wrapper">
        <div id="slidedeck_frame" class="skin-slidedeck">
            <!-- slider yang akan muncul -->
            <dl class="slidedeck">
                <dt>Slide 1</dt>
                <dd>Slide Content 1</dd>
                <dt>Slide 2</dt>
                <dd>Slide Content 2</dd>
                <dt>Slide 3</dt>
                <dd>Slide Content 3</dd>
                <dt>Slide 4</dt>
                <dd>Slide Content 4</dd>
                <dt>Slide 5</dt>
                <dd>Slide Content 5</dd>
            </dl>

            <!-- Navigasi untuk slider -->
            <div class="slide-nav"></div>

        </div>
    </div>

    <!-- Include script jquery lalu script slidedeck -->
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="js/slidedeck.jquery.lite.pack.js"></script>
    <script type="text/javascript" src="js/script.js"></script>

</body>
</html>

Kode CSS

#wrapper {
    width:960px;
    margin:0 auto
}
#slidedeck_frame {
    /* Tinggi dan lebar container harus ditentukan agar slidedeck dapat
       tampil dengan baik */
    width: 901px;
    height: 300px;
    padding-bottom:40px
}
.slide-nav {
    overflow:hidden;
    position:absolute;
    margin-top:10px
}
.nav-link {
    float:left;
    background:url(../images/slider-nav.png) no-repeat;
    width:17px;
    height:17px;
    text-indent:-9999px;
    margin:0 5px 0 0
}
.nav-link.active {
    background:url(../images/slider-nav-active.png) no-repeat
}

Tidak ada yang spesial pada kode CSS dan HTML. Skin untuk slidedeck sudah ada didalam file yang di download dari slidedeck. Untuk skin tambahan dapat di download dari slidedeck skin gallery.

Baca Juga:  CSS3 Buttons : Simpel CSS3 Framework untuk Membuat Link Tombol Gaya GitHub

Kode Javascript

$(document).ready(function(){
    // Jalankan plugin slidedeck
    $('.slidedeck').slidedeck();
});

Sebenarnya sampai sini slider sudah dapat digunakan tapi, saya akan menghilangkan vertical title bars(spine) dan menggantinya dengan navigasi horizontal.

$(document).ready(function(){
    var slideFrame      = $('#slidedeck_frame'),
        slideFrameWidth = slideFrame.width(),

        // Set hideSpine options menjadi true untuk menghilangkan vertical
        // title bars
        slidedeckOpt    = { autoplay: false,
                            hideSpines: true },
        slidedeck       = $('.slidedeck').slidedeck(slidedeckOpt),
        slideLength     = slidedeck.slides.length, // Banyak slide
        slideNav        = $('.slide-nav');

    // Looping untuk menambahkan navigasi sebanyak slide yang ada
    for(var i=1; i &lt;= slideLength; i++) {
        var navLink = $('&lt;a&gt;',{
            href : '#',
            title : 'Slide ' + i,
            class : 'nav-link',
            text  : i,
        });
        navLink.appendTo(slideNav);
    }

    // Event klik pada navigasi slider
    $('.nav-link:first').addClass('active'); // tambahkan class active pada navigasi yang pertama

    // Iterating pada navigasi slider
    $('.nav-link').each(function(i){
        $(this).click(function(e){
            $('.nav-link').removeClass('active');
            $(this).addClass('active');

            // Gunakan slidedeck API untuk menuju slide yang lain sesuai
            // parameter yang dimasukkan
            slidedeck.goTo(i+1);
            e.preventDefault();
        });
    });

    // Membuat posisi navigasi berada di tengah
    var slideNavWidth   = slideNav.width(),
        slideNavPos     = (slideFrameWidth / 2) - (slideNavWidth / 2);
    slideNav.css("left",slideNavPos);
});

Yap content slider sekarang sudah selesai. Semoga bermanfaat dan jika ada pertanyaan jangan sungkan untuk bertanya ya.

Demo Download

Komentar

comments

Arif Widipratomo

CSS Ninja, jQuery addict dan seorang pecinta Open Source.

grain storage instagram türk takipçi satın al