Membuat Content Slider dengan Slidedeck

Template Landing Page untuk Blogspot

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.

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.

Baca Juga:  Introducing Web Platform Docs

Demo Download

Tags

slider,membuat slider dengan jquery,div pada html,membuat content slider,membuat content slider dengan php,content slider,slidedeck,membuat slideshow dengan codeigniter,membuat image gallery dengan jquery,membuat slideshow di codeigniter,membuat slider vertikal di web,post slider css php,cara membuat slider pada codeigniter,membuat image slider dengan bootstrap 4,membuat content slider dengan jquery,membuat berita slide,tutorial web design content slider

Komentar

comments

Arif Widipratomo

CSS Ninja, jQuery addict dan seorang pecinta Open Source.

grain storage kocaeli escort
%d bloggers like this: