Jssor Slider... How to change Slider transitions? -
i included responsive jssor slider in 1 page , changes slides using default option. drops out slide1 left, replacing next slide comes right, , on.
i want change slide transition effect simple fade effect jssor fades out slide1 meanwhile fades in slide2 , on....
i cant find way insert code generated tool-slideshow-transition-builder....... can't understand how , include js code.
the code generated tool-slideshow-transition-builder is:
{$duration:3000,$opacity:2} the current js code transitions following in js file:
jquery(document).ready(function ($) { var _captiontransitions = []; _captiontransitions["l"] = { $duration: 900, x: 0.6, $easing: { $left: $jease$.$inoutsine }, $opacity: 2 }; _captiontransitions["r"] = { $duration: 900, x: -0.6, $easing: { $left: $jease$.$inoutsine }, $opacity: 2 }; _captiontransitions["t"] = { $duration: 900, y: 0.6, $easing: { $top: $jease$.$inoutsine }, $opacity: 2 }; _captiontransitions["b"] = { $duration: 900, y: -0.6, $easing: { $top: $jease$.$inoutsine }, $opacity: 2 }; _captiontransitions["zmf|10"] = { $duration: 900, $zoom: 11, $easing: { $zoom: $jease$.$outquad, $opacity: $jease$.$linear }, $opacity: 2 }; _captiontransitions["rtt|10"] = { $duration: 900, $zoom: 11, $rotate: 1, $easing: { $zoom: $jease$.$outquad, $opacity: $jease$.$linear, $rotate: $jease$.$inexpo }, $opacity: 2, $round: { $rotate: 0.8} }; _captiontransitions["rtt|2"] = { $duration: 900, $zoom: 3, $rotate: 1, $easing: { $zoom: $jease$.$inquad, $opacity: $jease$.$linear, $rotate: $jease$.$inquad }, $opacity: 2, $round: { $rotate: 0.5} }; _captiontransitions["rttl|br"] = { $duration: 900, x: -0.6, y: -0.6, $zoom: 11, $rotate: 1, $easing: { $left: $jease$.$incubic, $top: $jease$.$incubic, $zoom: $jease$.$incubic, $opacity: $jease$.$linear, $rotate: $jease$.$incubic }, $opacity: 2, $round: { $rotate: 0.8} }; _captiontransitions["clip|lr"] = { $duration: 900, $clip: 15, $easing: { $clip: $jease$.$inoutcubic }, $opacity: 2 }; _captiontransitions["mclip|l"] = { $duration: 900, $clip: 1, $move: true, $easing: { $clip: $jease$.$inoutcubic} }; _captiontransitions["mclip|r"] = { $duration: 900, $clip: 2, $move: true, $easing: { $clip: $jease$.$inoutcubic} }; _captiontransitions["clip|lr-fade"] = {$duration:1200,$clip:3,$opacity:1.7,$during:{$clip:[0.5,0.5],$opacity:[0,0.5]}}; _captiontransitions["bl"] = {$duration:900,x:0.6,y:-0.6,$easing:{$left:$jease$.$inoutsine,$top:$jease$.$inoutsine},$opacity:2}; _captiontransitions["zm"] = {$duration:900,$zoom:1,$easing:$jease$.$incubic,$opacity:2}; _captiontransitions["zms|b"] = {$duration:900,y:-0.6,$zoom:1,$easing:{$top:$jease$.$incubic,$zoom:$jease$.$incubic},$opacity:2}; _captiontransitions["zms|r"] = {$duration:900,x:-0.6,$zoom:1,$easing:{$left:$jease$.$incubic,$zoom:$jease$.$incubic},$opacity:2}; _captiontransitions["fade"] = {$duration:900,$opacity:2}; _captiontransitions["fade*jdn|l"] = {$duration:1200,x:0.6,y:0.6,$easing:{$left:$jease$.$linear,$top:$jease$.$outcubic},$opacity:2}; _captiontransitions["fade*jdn|r"] = {$duration:1200,x:-0.6,y:0.6,$easing:{$left:$jease$.$linear,$top:$jease$.$outcubic},$opacity:2}; var options = { $fillmode: 2, //[optional] way fill image in slide, 0 stretch, 1 contain (keep aspect ratio , put inside slide), 2 cover (keep aspect ratio , cover whole slide), 4 actual size, 5 contain large image, actual size small image, default value 0 $autoplay: true, //[optional] whether auto play, enable slideshow, option must set true, default value false $idle: 4000, //[optional] interval (in milliseconds) go next slide since previous stopped if slider auto playing, default value 3000 $pauseonhover: 1, //[optional] whether pause when mouse on if slider auto playing, 0 no pause, 1 pause desktop, 2 pause touch device, 3 pause desktop , touch device, 4 freeze desktop, 8 freeze touch device, 12 freeze desktop , touch device, default value 1 $arrowkeynavigation: true, //[optional] allows keyboard (arrow key) navigation or not, default value false $slideeasing: $jease$.$outquint, //[optional] specifies easing right left animation, default value $jease$.$outquad $slideduration: 800, //[optional] specifies default duration (swipe) slide in milliseconds, default value 500 $mindragoffsettoslide: 20, //[optional] minimum drag offset trigger slide , default value 20 //$slidewidth: 600, //[optional] width of every slide in pixels, default value width of 'slides' container //$slideheight: 300, //[optional] height of every slide in pixels, default value height of 'slides' container $slidespacing: 0, //[optional] space between each slide in pixels, default value 0 $cols: 1, //[optional] number of pieces display (the slideshow disabled if value set greater 1), default value 1 $align: 0, //[optional] offset position park slide (this options applys when slideshow disabled), default value 0. $uisearchmode: 1, //[optional] way (0 parellel, 1 recursive, default value 1) search ui components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc). $playorientation: 1, //[optional] orientation play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value 1 $dragorientation: 1, //[optional] orientation drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value 1 (note $dragorientation should same $playorientation when $displaypieces greater 1, or parking position not 0) $captionslideroptions: { //[optional] options specifies how animate caption $class: $jssorcaptionslider$, //[required] class create instance animate caption $captiontransitions: _captiontransitions, //[required] array of caption transitions play caption, see caption transition section @ jssor slideshow transition builder $playinmode: 1, //[optional] 0 none (no play), 1 chain (goes after main slide), 3 chain flatten (goes after main slide , flatten caption animations), default value 1 $playoutmode: 3 //[optional] 0 none (no play), 1 chain (goes before main slide), 3 chain flatten (goes before main slide , flatten caption animations), default value 1 }, $bulletnavigatoroptions: { //[optional] options specify , enable navigator or not $class: $jssorbulletnavigator$, //[required] class create navigator instance $chancetoshow: 2, //[required] 0 never, 1 mouse over, 2 $steps: 1, //[optional] steps go each navigation request, default value 1 $rows: 1, //[optional] specify lanes arrange items, default value 1 $spacingx: 8, //[optional] horizontal space between each item in pixel, default value 0 $spacingy: 8, //[optional] vertical space between each item in pixel, default value 0 $orientation: 1 //[optional] orientation of navigator, 1 horizontal, 2 vertical, default value 1 }, $arrownavigatoroptions: { //[optional] options specify , enable arrow navigator or not $class: $jssorarrownavigator$, //[requried] class create arrow navigator instance $chancetoshow: 1, //[required] 0 never, 1 mouse over, 2 $steps: 1 //[optional] steps go each navigation request, default value 1 } }; var jssor_slider1 = new $jssorslider$("slider1_container", options); //responsive code begin //you can remove responsive code if don't want slider scales while window resizes function scaleslider() { var bodywidth = document.body.clientwidth; if (bodywidth) jssor_slider1.$scalewidth(math.min(bodywidth, 1920)); else window.settimeout(scaleslider, 30); } scaleslider(); $(window).bind("load", scaleslider); $(window).bind("resize", scaleslider); $(window).bind("orientationchange", scaleslider); //responsive code end });
my question is... need replace or change in code change slider transition effect fade {$duration:3000,$opacity:2} ?
may simple task, don't understand how , cant find clear ans simple explanation in documentation.
you missing define variable
var jssor_slideshowtransitions = [ {$duration:3000,$opacity:2} ]; and in options:
var options={ // other options, $transitions: jssor_slideshowtransitions, // more options check working fiddle here
Comments
Post a Comment