Chop Slider Responsive

by Rhinokage Rio

HTML

<script src="http://yourjavascript.com/47151141530/jquery-chopslider-2-2-0.js"></script>
<script src="http://yourjavascript.com/11061142943/jquery-cstransitions-1-2.js"></script>
<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='http://4.bp.blogspot.com/-lbRuHW4f0cI/UtHLvA_gGfI/AAAAAAAAABE/0zEFpFBIDa8/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='http://4.bp.blogspot.com/-lbRuHW4f0cI/UtHLvA_gGfI/AAAAAAAAABE/0zEFpFBIDa8/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='http://3.bp.blogspot.com/-Jqi3i20Puq4/UtHLYQyWJMI/AAAAAAAAAAk/PKhcyaKi7zA/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='http://4.bp.blogspot.com/-HpeqiB1hM7o/UtHLeI4SBHI/AAAAAAAAAAs/DfOBqqPO25s/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='http://1.bp.blogspot.com/-tvCPB1JojJk/UtHLh379FkI/AAAAAAAAAA0/lYJQ33e2D_Q/s1600/Hydrangeas.jpg' title="Thumbnail 4"/></a></div>
    </div>
<div class='slide-descriptions'>
<div class='sl-descr'>Blog Dunia Blanter, Adminnya Ganteng Banget.</div>
<div class='sl-descr'>Tutorial Blog, sampai Tempe Goreng juga Ada.</div>
<div class='sl-descr'>Dulunya Blog asal-asalan sekarang jadi keren-keren'an</div>
    <div class='sl-descr'>Memberi banyak manfaat untuk pengunjung.</div>
</div>
<div class='caption'></div>
</div><div style='clear:both'></div>

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(http://3.bp.blogspot.com/-vjIXs1ktYSs/T-JaYVBdLzI/AAAAAAAACe8/fvZJeayf9ew/s1600/arrow_left.png) no-repeat center;z-index:4}
#slide-next{right:10px;background:#FFF url(http://3.bp.blogspot.com/-2G1xuDOoAlM/T-JaYnZkpFI/AAAAAAAACfI/-jnzqF3ogS8/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}

JavaScript

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(){}
    })
})