Slider Transition "Chop Slider" Keren Ala Sin1aja

Slider Transition "Chop Slider" Keren Ala Sin1aja © AR-IPTEK™ → Assalamualaikum wr wb!! Tidak sia-sia saya Googling berjam-jam saya menemukan slider transisi yang cucok deh menurut saya. Namanya Chop Slider Slider Transition Ala Sin1aja, katanya mas zhinto sih dia juga nemu cuma dari DUMAY sih, emm slider ini edan efeknya itu loh gila banget yah maklum namanya juga Css3 dan jquery dan yang kali ini efeknya menggunakan transition. Pastinya kalau browser anda mendukung css3 liat deh sampe puas banyak efek aneh bin ajib. Mantab!! Langsung saja sob lihat demo-nya

Live Demo 

Gimana gan? Ajib banget tuh, langsung saja pasang slider ini di blog sobat.

→ Masukkan kode css berikut diatas kode ]]></b:skin>

 .wrapper {

    position: relative;

    margin: 0 auto 15px;

    width: 600px;

    height: 350px;

    display: block;

    padding: 5px;

    background: #FFF;

    z-index: 2

    }

#slide-prev, #slide-next {

    -moz-border-radius: 100px;

    -webkit-border-radius: 100px;

    border-radius: 100px;

    padding: 15px;

    bottom: 50%;

    position: absolute;

    z-index: 4

    }

#slide-prev {

    left: 20px;

    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCCBnilxyHaTau3UaT5wdT3ONWM490n5SLj2sz8hN7vxuhMTTd-t-ydQBrhmnoXA9haw-Z7SlVdMFnea5x-GUaDLoeH-CAtTnIEebmfd3X1za-gCdNOhX0n6NUauQXhdaJX2S8rqefjRc/s1600/arrow_left.png) no-repeat center

    }

#slide-next {

    right: 20px;

    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmBhDRduAdEaJN7LjV_rD_PkjwrIyBO0tgCEgr73F_rw8cXOTK8-hiilgCuvQ4kEfWnnzu0hGxnBWWN95CXgDhpA48_qSaVxqhmXZw6XIF8Ap7hiVvdQGbYi5fnXTqvZiF11quBN6UnIU/s1600/arrow_right.png) no-repeat center

    }

#slider {

    width: 600px;

    height: 350px;

    margin-left: auto;

    margin-right: auto;

    position: relative;

    z-index: 2;

    display: block

    }

#slider img {

    width: 100%;

    height: 100%

    }

.slide {

    display: none

    }

.cs-activeSlide {

    display: block

    }

.slide-descriptions {

    display: none

    }

.caption {

    background: rgba(238, 238, 238, 0.83);

    color: #333;

    display: none;

    padding: 5px 10px;

    position: absolute;

    left: 0;

    right: 0;

    bottom: 5px;

    z-index: 3;

    font: normal 13px/20px Arial, sans-serif

    }

→ Masukkan kode script berikut dibawah kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="http://system-svn.googlecode.com/svn/trunk/jquery.id.chopslider-2.2.0.free.min.js"></script>

<script src="http://system-svn.googlecode.com/svn/trunk/jquery.id.cstransitions-1.2.min.js"></script>

<script>

jQuery(function(){

    $("#slider").chopSlider({

        slide : ".slide",

        nextTrigger : "a#slide-next",

        prevTrigger : "a#slide-prev",

        hideTriggers : true,

        sliderPagination : ".slider-pagination",

        useCaptions : true,

        everyCaptionIn : ".sl-descr",

        showCaptionIn : ".caption",

        captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",

        autoplay : true, // slidernya otomatis bermain, "false" jika tidak otomatis

        autoplayDelay : 3000, // waktu penundaan gambar

        t3D : csTransitions['3DFlips']['random'],

     t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],

        noCSS3 : csTransitions['noCSS3']['random'],

        mobile : csTransitions['mobile']['random'],

        onStart: function(){},

        onEnd: function(){}

    })

})

</script>

 → Kemudian tinggal masukkan kode pemnaggilnya berikut

<div class="wrapper">

<a id="slide-next" href="#"></a>

<a id="slide-prev" href="#"></a>

<div id="slider">

<div class="slide cs-activeSlide"><img src="url gambar1.jpg"/></div>

<div class="slide"><img src="url gambar2.jpg"/></div>

<div class="slide"><img src="url gambar3.jpg"/></div>

<div class="slide"><img src="url gambar4.jpg"/></div>

</div>

<div class="slide-descriptions">

<div class="sl-descr">Ini beneran gak ya my Friend...? ngeri juga kalau sampe di caplok</div>

<div class="sl-descr">Walpaper Gothic 1</div>

<div class="sl-descr">Walpaper Gothic 2</div>

<div class="sl-descr">Walpaper Gothic 3</div> 

</div>

<div class="caption"></div>

</div>

Jangan lupa untuk ganti urlnya dengan url gambar anda, jangan lupa ganti juga deskripsinya. untuk pagination yang bundar - bundar itu sengaja gak di masukan Sin1aja karena penambahan bundar - bundar nya (pagination) nya itu secara manual jadi jika gambar anda ada 10 maka anda harus menambah kode paginationnya sebanyak 10 kali. hemmm yah abis itu simpan ya. kalau belum punya URL gambarnya ni aku kasih url gambarnya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxErRZ2UVmm09M_KFazbsWe0iIF67hcJwV1T2bo3tOc7Y4QRoEHj2gY_ELzYzbqlMlr0Hq-AzYLfw1IV2qHAVrg-xU8X1vDenZWAxjLB1WM51c66A5AKdsh5yte7uK4HU2FiOpZEVnSvA/s1600/chop1.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtw99xbiPKxOG8dtkytUsGK8fF3aypXBouBMMSdkt_-dmF9ABjZS1STqisUAneZYVBKDj3_P1N75zZHjpth_0HOBLHDY_vz59w_8aEIC6RmLVqcySsAW_KAAG18ZBh_p8gnlIHy0oQCHk/s1600/chop2.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhE4YTiIa9n5s5P5uX6UJ6D7y6g-w7HojIN1jPslKhnCYHUH7IMchOTGw1gCnXmOlrkrgAf-2sceoGbtat9f3NBzj4YbTO4u68a6-C2EbzyZUwTuUclht5yOJLenbvQtEnI0fhIlDwaGw/s1600/chop3.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzMX1hTKV7VbuRzHeMFoYFkbF6lvXmGj7_8tYDeZTj-caa5B9H3HmFotv1ZzAU6YKSKI9ls9jDHDQtSaVrHSFU5RTQqN61TRgf3e-DtTV1aCxoQ9871EX4Mu9pQJ0cEFv728eYMAo1jbI/s1600/chop4.jpg

Perhatikan .wrapper dan #slider jika pada .wrapper anda rubah kode width atau height nya maka pada #slider juga harus anda rubah agar sesuai dan rapi. nah selamat mencoba kawan-kawan!!

Sekian Slider Transition "Chop Slider" Keren Ala Sin1aja , jangan sampai artikel yang sobat blogger buat tidak SEO Friendly, baca Menulis Artikel Berkualitas SEO , juga download Game PES 2013 Untuk PC Full Version Gratis, Wassalamualaikum wr wb!!