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

agi 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/AVvXsEiOdU88_IlDI2kySrdqanyRFnGnLtkBuaJ5hY-M4ncUDTEHlJeZXdq_JZoI1hKftm-LM325YjG7tx5qpMAPndAfHaxUUjjyDov5IANGm7btaCGJK3zIcIvvRLsUZ1B0TQgmyZN2W7JnEho/s1600/arrow_left.png) no-repeat center;
  z-index: 4;
}

#slide-next {
  right: 10px;
  background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy88Fz7KFq7iJs0AyOd5vHyajlc2-K6DzH4GPlA26f874Eyv1ydrXS055M6BshQiF-wPuNPvDy65m2LSr_X6o3qTi_I_hKBxvebTw5HUuqvFcWyYlvskTXx94Oas4R9Vnz0-FVMfj5bhM/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/AVvXsEg7LxSNn0VaMGmePq55dFx2mzqgjGFgb-TFFFi4MGP-Sp1f73lUwO3BYwefUpfa9i9S8uXxvc_C0GBZoMSLNxVmbnmouaiTSPe5kcMB2d8GQ9muIIoNddF8F4QnOTezhEWrP3hQXCGFWEbE/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/AVvXsEg7LxSNn0VaMGmePq55dFx2mzqgjGFgb-TFFFi4MGP-Sp1f73lUwO3BYwefUpfa9i9S8uXxvc_C0GBZoMSLNxVmbnmouaiTSPe5kcMB2d8GQ9muIIoNddF8F4QnOTezhEWrP3hQXCGFWEbE/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/AVvXsEj2B3-hOkt4b9U0aBuXqn_KA8C5TXp8gmFMA6ALedUDmRfPf6uCY7Nix1QyBfiHjXDThNYuLl9wMlvxcvUnTbfLcXh7JUjIbWSjN8GbzmD0DqkhqUt9wsUoashykWci-424sBk-PmNBaG0e/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/AVvXsEh32XeQAZ-17H-KqeoszhzsmiDtJ3VLGpEhIxpSPLQS3AhigOlBNjZw_CZVyi1-YQDCjUP_voKFOSmNQ0nbfZzzKavnnwvqAAjEBiLg_C3_ctA226xowsBaIBTcqvRpdnJUppyeWRiPWHBv/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/AVvXsEg2vbCHSX7atCwRNFhsqZEYQ20Ry1oIPRMUEncWniLu5C0cUuv3Qo_4e3WyumWhJSCoxprZKKSmxgBZ0B9mTuXrUwWOyzUs4Ax8xSJ07WMP2Qz-RY538LLTiyzvXYnHovxYWWdmsVZrh3U5/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'>

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>