Membuat Chop Slider Responsive Di Blog

Dengan Widget Chop Slider Responsive ini, tampilannya bagus ketika diakses berbagai perangkat baik komputer, laptop, tablet, ataupun handphone.
Tentunya chop slider ini menggunakan jquery untuk menampilkan efek-efek yang lebih mengagumkan pada transisi atau pergantian gambarnya.

DEMO

Bagi yang tertarik untuk mencobanya silahkan ikuti tutorial di bawah ini :

Kode CSS Silahkan sobat letakan di atas ]]></b:skin> atau </style>

/* CHOP SLIDER RESPONSIVE */ .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/AVvXsEivpTb6Kx908Mn8zQU-KFS6KPuMeCtXaQByf8lrcEluGDyxTzLmW6ltzoCnqjFwvzA10bI1Zv8dIYtHzSwXgumUYdrCbIjT79Vj3LgmySPcwehMdj0BYu_bELqI7TEHh4pFrrTUBfmL3Tg/s1600/arrow_left.png) no-repeat center;z-index:4} #slide-next{right:10px;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdJS_o7tEb3eGK-NrbWAkghChiIugg9JQF-UkdXSW2GhlWG61-KS0HVeedi4vS-v80z-94whAafhHga_l1UrJpfoEcGsBgTzAlovzxZT13PnAq22K0pOwtDx_tNoI29VOiU3e2Afk6wc/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 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/AVvXsEi_BxhgnqICGqntFZMiMWyXumzwHCFFzOdWb5ITDkijx639j9GX9_9BmED23hMZbiEtZp0_b_ZuIb_uwSUUWuUrJhebpz6A401HshA_44M3HrpvlODNrHirD-Zy91HrPkc6OFYxHyxfGuID/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/AVvXsEi_BxhgnqICGqntFZMiMWyXumzwHCFFzOdWb5ITDkijx639j9GX9_9BmED23hMZbiEtZp0_b_ZuIb_uwSUUWuUrJhebpz6A401HshA_44M3HrpvlODNrHirD-Zy91HrPkc6OFYxHyxfGuID/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/AVvXsEhO3WXpP5bnWysun72HFFrXufhrajrvzN9blgvniPjxUmdDJHvlqCgoQJfzUN4VuJFZJ00MB1KaIf-barNEOP6gVemDzxvUSOaMPmJUkwD0uE6U-wpWQXoitAtIJ1x_l24Wnvy8vKoCeuCg/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/AVvXsEjzCgMyfHF34R8JEhuMdpDsyFsV-JgMkOsQdxBk0g-eP3mkHVelPD416rCT6Ee5d00bQpqWT1QxqdVNQc5oU_N_fl-XoktVux7tNXu7yNsQ9pee8ZtX0Lg244TRGypHNjkkP9xPZVys9Xa_/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/AVvXsEismMbt1Ye4U3TfpcHZLaW4aGZu1NeThVEP8fwAc4qxSGcfqAejy1_4Nv2wRY0jVYrg_5vIzmAWhMpzICDgP_qJBVIz3t_uRIWi_vI_z1J3K9jIghn5PVqbrPdNdAb5LS6OBujtbEl0vrah/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>

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>Image pada <div class='slide-background'> adalah gambar background untuk slidernya agar ketinggianwrapper 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 <div class='slide-descriptions'> ini, deskripsi paling atas adalah untuk deskripsi gambar pertama, begitu seterusnya.

Artikel Dikutip Dari http://blanter-forever.blogspot.com/2014/10/membuat-widget-chop-slider-responsive-di-blog.html