Ditulis oleh: Ditulis pada: 10/11/2014
Memodifikasi Chop Slider Menjadi Responsive - Setelah kemarin saya memodifikasi image slider menjadi responsive yang hanya menggunakan CSS saja dengan efek slide ketika thumbnail di hover, kini saya memodifikasi chop slider yang memiliki efek-efek transisi gambarnya yang cukup menarik.
Tentunya chop slider ini menggunakan jquery untuk menampilkan efek-efek yang lebih mengagumkan pada transisi atau pergantian gambarnya.
Dengan memodifikasi chop slider ini menjadi responsive, maka tampilannya akan semakin bagus ketika diakses berbagai perangkat baik komputer, laptop, ataupun handphone. Perubahan yang dilakukan hanya sedikit pada kode CSS dengan penambahan background gambar pada wrapper-nya untuk menjaga tinggi wrapper ketika efek transisinya sedang berjalan.
Demonya silahkan coba pada link di bawah ini, silahkan geser-geser kolomnya kemudian klik Run agar efek pada responsivenya terlihat.
Nah bagi yang tertarik untuk mencobanya silahkan gunakan kode-kode di bawah ini.
Kode CSS
.wrapper{position:relative;margin:0 auto;width:100%;height:auto;padding:0;z-index:2;}
.slide-background img{opacity:.5;width:100%;height:auto;z-index:1;margin-bottom:-4px}
#slide-prev,#slide-next{padding:15px;bottom:10px;right:10px;position:absolute;z-index:4}
#slide-prev{right:45px;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFIopa2LprBLGzFynJ25jg_rbVFWldtXS7h38oQk4k1lRBodcatuPC2UbbjhKwZDqEoSnT5V6jhS8mFJgNK9W2Lb4ZuvMnqCbGw33Q3GL5CgZdWSJvzZf1zx5_pnGhUtuL4-EwDJNiuz4/s1600/arrow_left.png) no-repeat center;z-index:4}
#slide-next{right:10px;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0taTdYezaSH6RpOS6osUlLu0XfcoQz7WA3s__Q0CH9PqXtYKk1J1UjqWXAkSyBpHRnMmCDMCDvWLAjDPiybEN8q3MgkZLPqGMUoCy4pe35gbL7OCSs9Hph-sHpG7Ixu1NvAVmGVhtwo0/s1600/arrow_right.png) no-repeat center;z-index:4}
#slider{width:100%;height:auto;margin:0 auto;position:absolute;top:0;left:0;z-index:2;display:block}
#slider img{width:100%;height:auto}
.slide{display:none}
.cs-activeSlide{display:block}
.cs-activeSlide img{width:100%;height:auto;margin-bottom:-4px}
.slide-descriptions{display:none}
.caption{background:rgba(238,238,238,0.83);color:#333;display:none;padding:10px;position:absolute;width:30%;left:4%;top:5%;z-index:3;font:bold 16px/20px Arial,sans-serif}
Kode Javascript
<script type="text/javascript" src="http://yourjavascript.com/47151141530/jquery-chopslider-2-2-0.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/11061142943/jquery-cstransitions-1-2.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,
autoplayDelay : 3000,
t3D : csTransitions['3DFlips']['random'],
t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
noCSS3 : csTransitions['noCSS3']['random'],
mobile : csTransitions['mobile']['random'],
onStart: function(){},
onEnd: function(){}
})
})
</script>
Kode HTML
<div class='wrapper'>
<a href='#' id='slide-next' title="Next"></a>
<a href='#' id='slide-prev' title="Prev"></a>
<div class='slide-background'>
<img alt="background slider" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzqpoSUIBr_wSCXCFsXvot76J_f3TVpn0cz0_msiXTQVof1-KEtgx5dOj_7XW-3-haClTfzsaQrp7o00f-QZx9TisPO4l67q0tMx8rgPXc_AmdFf5HOkAWxB-AMO0h2UDVdBxz44TAUk3/s1600/Tulips.jpg' title="Background Slider"/></div>
<div id='slider'>
<div class='slide cs-activeSlide'><a href='#' title="Thumbnail 1"><img alt="thumbnail 1" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzqpoSUIBr_wSCXCFsXvot76J_f3TVpn0cz0_msiXTQVof1-KEtgx5dOj_7XW-3-haClTfzsaQrp7o00f-QZx9TisPO4l67q0tMx8rgPXc_AmdFf5HOkAWxB-AMO0h2UDVdBxz44TAUk3/s1600/Tulips.jpg' title="Thumbnail 1"/></a></div>
<div class='slide'><a href='#' title="Thumbnail 2"><img alt="thumbnail 2" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7a6VYEcpolyhBgl5cOb4qGeBm-D-w_HUSx7-Xk8jPDziUhnprxcGpFhnxrvGi6DDpkvUQaff2C2x36CPYK_Jpp6JQyquuRAE4H_DHGUwDd_CYIHDMOawbE78hWfAP3YbIdgx3ZOV1b6R/s1600/Chrysanthemum.jpg' title="Thumnail 2"/></a></div>
<div class='slide'><a href='#' title="Thumbnail 3"><img alt="thumbnail 3" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ZSC15lLYvcyM9fLJ6d-N8HBe-Ye30LOw2piZeTTR-dg_AZUxhlBvZfVefc1Nt6KP_YwwoA3vvemETbjTZrCsnjnu4nouvZyIuhn-5ZqZ8Gwg1Yv1O1v6DZzKts5M0AC0qdlRw_QqMNmL/s1600/Desert.jpg' title="Thumbnail 3"/></a></div>
<div class='slide'><a href='#' title="Thumbnail 4"><img alt="thumbnail 4" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidj2r6jZX2l9adVvAqjVPDBg1-WV0uAHAMMZ2V4ysUj-_gSt4TUWsWAyZvACcs-zy1vvsqX8S3x3Y2XFtd6NEZHKoAOTijNOGzaSugphLi0w6xi3Lh4NwFmkgvZPSezWmMIlT2EG0vx-fH/s1600/Hydrangeas.jpg' title="Thumbnail 4"/></a></div>
</div>
<div class='slide-descriptions'>
<div class='sl-descr'>The Walking Dead Season 2 Episode 2 PC Games Full Version</div>
<div class='sl-descr'>Free Download Call Of Juarez The Gunslinger Pc Games Highly Compressed</div>
<div class='sl-descr'>The Walking Dead Season 2 Episode 2 PC Games Full Version</div>
<div class='sl-descr'>Download Prototype 2 Highly Compressed Full Version</div>
</div>
<div class='caption'></div>
</div><div style='clear:both'></div>
Image pada
<div class='slide-background'> adalah gambar background untuk slidernya agar ketinggian wrapper tetap terjaga, silahkan gunakan pakai gambar apa saja.
Silahkan ganti URL gambar dengan URL gambar yang ingin Anda tampilkan, dan silahkan sesuaikan alt dan title tag-nya, begitu pun dengan tinggi dan lebarnya. Sebagai saran, gunakan dimensi gambar (lebar dan tinggi) yang sama untuk semua gambarnya, begitu pun dengan gambar background slider-nya.
Untuk deskripsi gambar pada
Sumber Kode: http://www.seocips.com/2014/06/cara-membuat-chop-slider-otomatis-di.html
<div class='slide-descriptions'> ini, deskripsi paling atas adalah untuk deskripsi gambar pertama, begitu seterusnya.
Demo on blog untuk Responsive Chop Slider ini saya pasang di blog sahabat saya yang masih belum jadi hehehehe.... Saya pasang sebagai slider full width. Silahkan lihat DI SINI.