Quake slider gambar keren

Abis jalan - jalan dari sini langsung posting lagi tentang slider ckckckck soalnya belum nemu trik - trik baru nih jadi ya tentang slider lagi aku bahas, nah pada slider ini efeknya tuh keren abis dan gak kalah kerennya ya Caption nya itu ada 4 macam bisa di sebelah kiri, kanan, atas, bawah, tapi yang saya ambil cuma 2 yaitu di sebelah bawah dan kanan karena jika semuanya di pakai maka banyak juga kode yang anda harus pakai jadi saya ambil 2 saja.

DEMO

1. Masukan css di bawah ini di atas kode ]]></b:skin>

.quake-slider-wrapper {
    margin: 0 auto;
    padding: 5px;
    }

.quake-slider {
    width: 800px;
    height: 350px;
    margin: 0;
    position: relative;
    overflow: hidden;
    -moz-box-shadow: 0 0 8px #90989e;
    -webkit-box-shadow: 0 0 8px #90989e;
    box-shadow: 0 0 8px #90989e;
    background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8JjW6O8YrfjcycrLye6Y70QxMR8ADDlnUoVygQudLH1OV1yokwZNlID3Z8VkXs29gXx5Emm0fc0bsv8YQlmzxbVDe6OEAGObH9EQnyHIP9kkgsGE53A8bB0VxahF-49xqpahqPuwmjh0/s1600/loading.gif) no-repeat center
    }

.quake-nav a {
    position: absolute;
    top: 45%;
    text-decoration: none;
    width: 37px;
    height: 38px;
    background-repeat: no-repeat;
    z-index: 10000;
    cursor: pointer;
    text-indent: -9999px;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none
    }

.quake-prev {
    left: 0;
    margin-left: 2px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ko0FNtXuzHBV6Gu8AWE2c2OJsB99n0g5-qL9kDikXNtLSyyLHmLQbwJoWc3gH2pX4XdztXkacFZuUW-M_YCn3HRly3eW3L6riWw_ohJbhO9DZTcErlOAcBF2573LF9db1khQ3Y4w040/s1600/nav.png)
    }

.quake-next {
    right: 0;
    margin-right: 2px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ko0FNtXuzHBV6Gu8AWE2c2OJsB99n0g5-qL9kDikXNtLSyyLHmLQbwJoWc3gH2pX4XdztXkacFZuUW-M_YCn3HRly3eW3L6riWw_ohJbhO9DZTcErlOAcBF2573LF9db1khQ3Y4w040/s1600/nav.png) right
    }
.quake-slider-caption-container-right {
 background-color: #1889F1;
 position: absolute;
 z-index: 101;
 padding: 5px;
 width: 200px;
 right: 0;
 top: 0;
 bottom: 0;
}

.quake-slider-caption-right {
 color: white;
 font: bold 13px/20px Arial,sans-serif;
 width: 200px;
 position: absolute;
 z-index: 102;
 right: 0;
 top: 0;
 bottom: 0;
 padding: 5px;
 margin: 0;
}
.quake-slider-caption-container-bottom {
 background-color: black;
 position: absolute;
 z-index: 101;
 padding: 15px;
 bottom: 0;
 left: 0;
 right: 0;
}

.quake-slider-caption-bottom {
 color: white;
 font: bold 13px/20px Arial,sans-serif;
 position: absolute;
 z-index: 102;
 bottom: 5px;
 padding: 0 10px;
}
.quake-nav-wrapper {
    position: relative;
    z-index: 1000;
    }

.quake-nav-container {
    margin: 10px auto 0;
    }

.quake-nav-control {
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: inline-block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-XQEExLHBaHtRgB0FuUFC8c7E3_hfpsBSnEGS7AfgNnEGLHyHGe6Oh0AnMSIlKFsEQ7iokvUUpD8KtH-tGrg5FIfhNJBZ5u-GeiScfkTVJZ2E-6Iupf-YocgEhPU45dQW6kJOaWkHEik/s1600/circle.png) no-repeat;
    text-indent: -99999px;
    border: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none;
    outline: none
    }

.quake-nav-control.active {
    /*background-position: 0px -22px;*/
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6a00DjMMZ_SkBBG5RjpZ3s_CJeV5HUCy3RurmA-YYzaiRkg4hKeph33n-kgxsPLXsfY7CCVOBHfRTy3Cfup8GHOib3Q1hAFLQUab6JIfoL5493wwfcuJ7QAjh9bwWijTY3JPUpCBsOlo/s1600/circle-active.png)
    }

.quake-slider-caption a {
    color: Yellow
    }

.quake-link {
    position: absolute;
    z-index: 101
    }

2. Masukan script di bawah ini di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://system-svn.googlecode.com/svn/trunk/quake.slider-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
 $('.quake-slider').quake({
 thumbnails     : false,
 captionOpacity : '0.7',
 hasNextPrev    : true,
 frameWidth     : 800,
 frameHeight    : 350,
 captionsSetup  : [{
 "orientation"  : "bottom",
 "slides"       : [0,3],
 "callback": captionAnimateCallback
 }]
 });
 function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
 captionWrapper.css({
 bottom: '-990px'
 }).stop(true, true).animate({
 bottom: 0
 }, 500);
 captionContainer.css({
 left: '-990px'
 }).stop(true, true).animate({
 left: 0
 }, 500);
 }
 });
</script>

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

<div class="quake-slider">
<div class="quake-slider-images">
<a target="_blank" href="#"><img src="url1.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url2.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url3.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url4.jpg" alt="judul gambar" /></a>
</div><!-- Kode penutup quake-slider-images -->
<div class="quake-slider-captions">
<div class="quake-slider-caption">Deskripsi gambar 1</div>
<div class="quake-slider-caption">Deskripsi gambar 2 dengan <a href='#'>Link</a></div>
<div class="quake-slider-caption">Deskripsi gambar 3</div>
<div class="quake-slider-caption">Deskripsi gambar 4</div>
</div><!-- Kode penutup quake-slider-captions -->
</div><!-- Kode penutup quake-slider -->

Nah jika gambar anda ada lima atau enam maka deskripsi gambarnya harus anda tambahkan dengan cara menambah kode seperti ini,

<div class="quake-slider-caption">Deskripsi gambar 3</div>

Baris kode seperti itu bisa anda tambahkan sebelum kode penutup quake-slider-captions jadi seperti ini

<div class="quake-slider">
<div class="quake-slider-images">
<a target="_blank" href="#"><img src="1.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="2.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="3.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="4.jpg" alt="judul gambar" /></a>
</div><!-- Kode penutup quake-slider-images -->
<div class="quake-slider-captions">
<div class="quake-slider-caption">Deskripsi gambar 1</div>
<div class="quake-slider-caption">Deskripsi gambar 2 dengan <a href='#'>Link</a></div>
<div class="quake-slider-caption">Deskripsi gambar 3</div>
<div class="quake-slider-caption">Deskripsi gambar 4</div>
<div class="quake-slider-caption">Deskripsi gambar 5</div>
</div><!-- Kode penutup quake-slider-captions -->
</div><!-- Kode penutup quake-slider -->

Nah begitu seterusnya, kode gambarnya juga anda bisa tambahkan baris kodenya seperti ini,

<a target="_blank" href="#"><img src="1.jpg" alt="judul gambar" /></a>

Anda bisa tambahkan sebelum kode penutup quake-slider-images.

Pengaturan - pengaturan slider

1. Perhatikan kode width: 800px; Dan height: 350px; pada kode css jika kode tersebut anda ganti maka kode width: 800px; Dan height: 350px; pada kode js juga anda harus ganti jadi harus sesuai.

2. Perhatikan kode "slides" : [0,3], pada kode js, 0,3 artinya gambar nomor 1 dan nomor 4 caption nya atau deskripsi gambarnya akan berada di bawah sedangkan gambar nomor 2 dan 3 akan berada di kanan. gambar di hitung mulai dari 0 jadi gambar nomor 1 adalah 0 dan nomor 2 adalah 1 dan seterusnya, jadi jika anda ingin caption gambar nomor 1,2 dan 3 berada di bawah maka kodenya nya menjadi "slides" : [0,1,2], jadi gambar nomor 4 caption nya akan berada di kanan, bisa juga jika anda ingin acak misalnya slider gambar 1 captionnya di kanan terus gambar 2 captionnya di bawah bisa anda tinggal rubah nomornya saja pada pengaturan "slides".

3. Ukuran gambar, jika anda menggunakan slider ini ukuran gambar harus sama semua, saya ambil contoh dari blog demo, di blog demo tersebut ukuran gambar slidernya 800 x 350 dan semua ukuran gambarnya sama, dan kode width: 800px; Dan height: 350px; pada kode css juga harus sama seperti ukuran gambar pada kode js juga. kenapa seperti itu..? agar slider ini terlihat rapi dan juga keren tentunya, anda pasti gak mau donk kalau slidernya kelihatan berantakan.

Mungkin hanya itu semoga sukses wassalam.......