Memodifikasi Chop Slider Menjadi Responsive

Memodifikasi Chop Slider Menjadi Responsive - Setelah kemarin saya memodifikasi image slider menjadi responsive yang hanya memakai CSS saja dengan imbas slide dikala thumbnail di hover, sekarang saya memodifikasi chop slider yang mempunyai efek-efek transisi gambarnya yang cukup menarik.

Baca juga: Membuat Responsive Image Slider Post Dengan CSS

Tentunya chop slider ini memakai jquery untuk menampilkan efek-efek yang lebih mengagumkan pada transisi atau pergantian gambarnya.

Dengan memodifikasi chop slider ini menjadi responsive, maka tampilannya akan semakin anggun dikala diakses banyak sekali perangkat baik komputer, laptop, ataupun handphone. Perubahan yang dilakukan hanya sedikit pada instruksi CSS dengan penambahan background gambar pada wrapper-nya untuk menjaga tinggi wrapper dikala imbas transisinya sedang berjalan.

Demonya silahkan coba pada link di bawah ini, silahkan geser-geser kolomnya lalu klik Run biar imbas pada responsivenya terlihat.

DEMO

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/AVvXsEgImro03EnWf8lvzqQSu6gPUxYoxMJSdbThkzW-pl8zp_hkfXx4Q_tiCcGWZF_Uqx0NfhWl00iAKBaSJhJlM6DVmqqEe4hBL_VEU0CHdhU0928fTKGjcMOo7FyA-9ADAzP_PiDzwhddD0g/s1600/arrow_left.png) no-repeat center;z-index:4}
 #slide-next{right:10px;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizVjYYW21KAHBEsWBnPau5mN3rDZ-1AOo9Fsyi3Mb7HAcEQFUmONkXPbzCgUF3_HXCvPAbG9I8TzNQMWNdrj5nCgZ-3aNp9IeOk7JFelcIgymCYk6KfFlZLB_h_wxSJvlVuaXQLVv0IMI/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="Memodifikasi Chop Slider Menjadi Responsive"></a>
 <a href='#' id='slide-prev' title="Memodifikasi Chop Slider Menjadi Responsive"></a>
 <div class='slide-background'>
 <img alt="Memodifikasi Chop Slider Menjadi Responsive Memodifikasi Chop Slider Menjadi Responsive" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbWin1eKRo3fbiEHc1S6T0iWEU2BuELvKmCRwG8zk6p8FCQ3DkAqenmQcfKgtvz7DQQaVRGBUjxfwg-TJ1q8fq1mezng2SfmwC2GPMkDxSmdhKqpPE53p18RgWSkOU5xxfbDK4z8i14sq/s1600/Tulips.jpg' title="Memodifikasi Chop Slider Menjadi Responsive"/></div>
 <div id='slider'>
 <div class='slide cs-activeSlide'><a href='#' title="Memodifikasi Chop Slider Menjadi Responsive"><img alt="Memodifikasi Chop Slider Menjadi Responsive Memodifikasi Chop Slider Menjadi Responsive" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbWin1eKRo3fbiEHc1S6T0iWEU2BuELvKmCRwG8zk6p8FCQ3DkAqenmQcfKgtvz7DQQaVRGBUjxfwg-TJ1q8fq1mezng2SfmwC2GPMkDxSmdhKqpPE53p18RgWSkOU5xxfbDK4z8i14sq/s1600/Tulips.jpg' title="Memodifikasi Chop Slider Menjadi Responsive"/></a></div>
 <div class='slide'><a href='#' title="Memodifikasi Chop Slider Menjadi Responsive"><img alt="Memodifikasi Chop Slider Menjadi Responsive Memodifikasi Chop Slider Menjadi Responsive" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo3Tl5U-pYUfPIbZ-i-_FMimJVey1NzMBn0K7tlR4BWoUQ8dOVKY88NL-iFhgmRLOW9FluLYCDybfk6JVm1bZOPqWJCVig7IcyLLfkmdSr90X_NJ3nHJLP6loaU-PvYxTriuZ0_64cIpQi/s1600/Chrysanthemum.jpg' title="Memodifikasi Chop Slider Menjadi Responsive"/></a></div>
 <div class='slide'><a href='#' title="Memodifikasi Chop Slider Menjadi Responsive"><img alt="Memodifikasi Chop Slider Menjadi Responsive Memodifikasi Chop Slider Menjadi Responsive" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswt5U8Z8aQosVFUNHFLDV2Z4SYJ0BBD60bQjSK16rNvPFBLISdHMHpAs9V93p2mkySKFHxZmObuJTDoDcfJnv7ZvYc9nN9kYurv83x4oCiukHZX87AiTIZo5ekWjaAtFmyW0OLqyB_7_W/s1600/Desert.jpg' title="Memodifikasi Chop Slider Menjadi Responsive"/></a></div>
 <div class='slide'><a href='#' title="Memodifikasi Chop Slider Menjadi Responsive"><img alt="Memodifikasi Chop Slider Menjadi Responsive Memodifikasi Chop Slider Menjadi Responsive" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8ZyzmU1fkNxEUDFPGHDdFZMo9h63HX5b25BhN-SLM_We3eyDc-pdEkfVbbi5elD4PDUcZRWb-LTcfhA68jxPvQgTlpsomf_k-dH2IYSq9ZydBUdZqTLUsq_47qDkbKrBHhvxPWHs1qFy/s1600/Hydrangeas.jpg' title="Memodifikasi Chop Slider Menjadi Responsive"/></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'> ialah gambar background untuk slidernya biar 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 <div class='slide-descriptions'> ini, deskripsi paling atas ialah untuk deskripsi gambar pertama, begitu seterusnya.

Demo on blog untuk Responsive Chop Slider ini saya pasang di blog sobat saya yang masih belum jadi hehehehe.... Saya pasang sebagai slider full width. Silahkan lihat DI SINI.

Sumber Kode: https://komporajaibku.blogspot.com//search?q=membuat-responsive-image-slider-post

Sumber https://www.kompiajaib.com/

Share this post