Geekly Articles each Day
⬆️ ⬇️

Chop Slider 2 - the best jQuery slider



Good day. A few days ago there was a need to use a slide show on your site, but it had to be non-standard in order to attract the attention of users. I searched for the day and could not find anything normal, there were more or less suitable “sliders”, but the soul wanted strawberries. After I climbed the whole runet, I switched to “foreign” friends and ... good luck! Looking ahead, I want to say: this review was made because there is no mention of this slide show in runet, hence the logic.



Chop Slider 2



Chop Slider includes 152 effects (transitions), of which:



At the same time, all transitions are divided into the following groups:





According to the developers, it’s very easy to start using this miracle, I’ll add from myself that it’s not just very easy, but incredibly easy, they provide the ready start code.

First of all we connect libraries



<script src="scripts/jquery-1.7.min.js"></script> <script src="scripts/jquery.id.chopslider-2.0.5.free.min.js"></script> <script src="scripts/jquery.id.cstransitions-1.0.min.js"></script> <script src="scripts/our-settings.js"></script>




html code:


 <a id="slide-next" href="#"></a> <a id="slide-prev" href="#"></a> <div id="slider"> <div class="slide cs-activeSlide"> <img src="1.jpg" /> </div> <!--    --> <div class="slide"> <a href="http://www.idangero.us"><img src="2.jpg" /></a> </ div> <div class="slide"> <img src="3.jpg" /> </div> </div> <!--       --> <div class="slide-captions"> <div class="sl-descr"> <!--     html- --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="sl-descr"> <p>Caption text for second slide</p> </div> <!--  --> <div class="sl-descr"></div> </div> <div class="caption"></div> <!--   --> <div class="pagination"> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> </div>




CSS code


 #slide-prev { /*      */ } #slide-next { /*      */ } #slider { /*  width, height  position:relative */ width:900px; height:300px; position:relative; } /*        */ .slide { display:none; } /*   "cs-activeSlide"    */ .slide.activeSlide { display:block; } /*    ,    */ .slide-descriptions { display:none; } /*       */ .caption { /*     */ } /*    */ .pagination { /*    */ } .slider-pagination { /*     */ } /*       */ .cs-active-pagination { /*      */ }


')

Java script code


 jQuery(function(){ $("#slider").chopSlider({ /* Slide Element */ slide : ".slide", /* Controlers */ nextTrigger : "a#slide-next", prevTrigger : "a#slide-prev", hideTriggers : true, sliderPagination : ".slider-pagination", /* Captions */ useCaptions : true, everyCaptionIn : ".sl-descr", showCaptionIn : ".caption", captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)", /* Autoplay */ autoplay : true, autoplayDelay : 6000, /* Default Parameters */ defaultParameters : { type: "vertical", xOffset: -100, yOffset: 20, hPieces : 10, vPieces: 20, rotate : 10 , rotateSymmetric: false, scaleX:0.5, scaleY:-0.5, translateX:10, translateY:10, ease1:"ease", ease2:"ease", origin:"center center", dur1: 1000, dur2 :600, dur3: 1000, pieceDelay : 50, xFadeDelay :0, prevTransition : !{ rotate:-10, xOffset:10, startFrom:10 } }, /*    */ mobile: { disableCSS3:true, dur1:1200, dur2:1200, dur3:1200, hPieces:4, vPieces:4, pieceDelay:120, rotate:0, yOffset:0, scaleX:1, scaleY:1 }, /*    */ noCSS3:{ dur1:1200, dur2:1200, dur3:1200, hPieces:4, vPieces:4, pieceDelay:120, xFadeDelay :200 }, onStart: function(){ /* Do Something*/ }, onEnd: function(){ /* Do Something*/ } }) })


The developers described all the Java Script properties in the documentation (link below), so there should be no problems with setting up the animation, in extreme cases you can return to the stock animation, the code of which I cited. It makes no sense to describe all the settings, since you can read about them in the documentation, but I will write a few settings for completeness review



To select the transitions presented on the site, it is necessary to add this line to the code:

t2D: csTransitions ['half'] ['3'] , where 'half' is the name of the transition, 3 is the number of the transition.

For example, I use Chop Slider with these settings: 



 jQuery(function(){ $("#slider").chopSlider({ slide:".slide", nextTrigger:"a#slide-next", prevTrigger:"a#slide-prev", hideTriggers:false, sliderPagination:".slider-pagination", hidePagination:false, useCaptions:true, everyCaptionIn:".sl-descr", showCaptionIn:".caption", hideCaptions:true, t2D:csTransitions['half']['3'], onStart: function(){ /* Do Something*/ }, onEnd: function(){ /* Do Something*/ } }) })




Vertical animation


Suppose we have a slide:



Assign the parameter xOffset 50px, we get this:



We see that the slide has become cut into ribbons vertically. The value we set at 50px means that the width of the strip is now 100px, that is, the left and right border is 50px. Similarly with yOffset .

Now let's set the rotate parameter to 20 degrees and rotateSymmetric: true



We got a slide, the borders of the strips of which are rotated by 10 units each, if you put rotateSymmetric: false , you get this picture:



Let's try to rotate the slide by -10 degrees, write rotate: -10 :



xOffset: -100 :



Here we see how the strips are reversed. It happened because we set the xOffset equal to the width of the slide, but with a negative sign, so this effect (the last stripes were the first, the first - the last ...)

Also, do not install scaleX: 0.5 , because the strips will have a half appearance:





Vertical 3D animation


rotateZ = 40, xOffset: 100



rotateMid = -30, xOffset: 100



rotateMid = -30, rotate = -10, rotateZ = 0, rotateSymmetric: true, xOffset: 100



rotateMid = -30, rotate = -10, rotateZ = 0, rotateSymmetric: false, xOffset: 100





Horizontal 3d animation


rotateZ = 10



rotateZ = 0, rotateMid = -30



rotateZ = 0, rotateMid = -30, rotate = 20, rotateSymmetric = false



rotateZ = 0, rotateMid = -30, rotate = 20, rotateSymmetric = true





These are only 30% of those effects that are found in Chop Slider 2. Chop Slider is proposed to be used in 3 versions: Free, Pro, Extended. The difference in these versions is only in the fact that Pro and Extended can be used as a plug-in for Wordpress, there is Full 3D Mode and those. support, and so more Free-version is not cut down. Price paid versions from $ 12 to $ 300.

References:

www.idangero.us/cs/ - of.sayt

www.idangero.us/cs/download/ - Chop Slider 2 (source and documentation)

Source: https://habr.com/ru/post/133205/

More articles:



All Articles