Chop slider css3 transition

Hemm walau internetan jarang tapi sekarang aku mau bagi - bagi slider nemu dari DUMAY nih emm slider ini edan efeknya itu Lo gila banget yah maklum namanya juga Css3 dan jquery dan yang kali ini efeknya menggunakan transition pokoknya kalau browser anda mendukung css3 liat deh sampe puas banyak efek aneh bin ajib.

DEMO

Dalam gambar di atas adalah salah satu efek transitionnya, hemmm pokoknya puas banget aku melihat slider ini bekerja Fyuhhhh mari langsung Comot slidernya.

1. Masukan css di bawah ini di atas ]]></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/AVvXsEghXYhYlkl43fTeFqnBP28llrDg6NLojgQlit4iBdC6hv8GBP9p6KsZrIaHLWnJYLc1ak_vuvg2knN536Kg65C3PaOk9SXN8U5V1AUwyXprjjAJ2ADscO6le1l3Qua2_XsvMIXJBdIN3mM/s1600/arrow_left.png) no-repeat center
    }
#slide-next {
    right: 20px;
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg1wHtDcYxo6Rex-hERugW7VmvAnZjZxy9jD9Lv0wVz47oT7MemROEShhdTJWFt9OO7kIczYSJl7IiuEofgI7PAMwC3MD67CaB_IV1G4fdJnkYXHjgmY6bZDZY1hmwq3dV3ddTHhWBrJ0/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
    }

2. Masukan script di bawah ini di atas </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>

3. Masukan kode html di bawah ini dalam Gadget HTML/Javascript

<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>

Ganti urlnya dengan url gambar anda, jangan lupa ganti juga deskripsinya. untuk pagination yang bundar - bundar itu sengaja gak aku masukan 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 kasi pinjem url gambar.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiif4yG9_lBkjYmsVWD1JaEGG0cX9nL6_Dmor0jxwFowwpTngkAEMj5zLPdbksbOA-YQW0pXjcUKvteFvvpq4YTMxnfQ_IrKk51WMO276LAwHrxrYjZZDXvVGAUyYpiJ2iFlpEcszqA2NQ/s1600/chop1.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjK64nT2CZLYDyLQMqQqItvWxuBsPNBGrDjIHVRfqT5N9-Vg1n7aHwjWCGK6GcqAMB_z8gUZBU8xMgnDWSDtEHOMmbIRDPWb8KYnv7mhxG_-1h_z2S6DQv3f9tnCC223vlI5GV2Er6g1U/s1600/chop2.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8wHifdm1cxJTt1qNqWr4B5wRXyXSRriYe_yE8ZmN4aLC4QOfz07fyyuG6roscfzhL-DJUdDRv5VxbswYpyWJHFmyjtfKyhDDbO7dk0oEHPoTHay8wJd3O4mvP0R4mhKauPUjz3pPblo/s1600/chop3.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7WGxROlUciGqw3adrj-AHRqyYrDLbeMmPCq72vNiZK03LpShLRS8zowZE3nPLyVnFda0YlYJCGJrxAD0QjI2_ssHGL8K2JendcQETbxZZKHe3K4WJV5_iPrLHNXFaBAiJxiiqqVG2Wro/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