More Fun with JSSOR Slider

Using JSSOR library to create a slider component (see JSSOR Slider on the York to London Train) impressed me with an ease of configuring the slider and making it work in Oracle Sites Cloud Service (SCS) component. So that armed with a glass of 16 year old “Eureka Moment” single malt I decided to spend couple hours on the last day of 2016 investigating wealth of JSSOR Slider capabilities.

JSSOR Slider comes with 360+ pre-defined slideshow transitions that you can choose from when creating your custom slider. The Transition Viewer allows you to preview a slideshow transition and then copy and paste its code to configure your slider. Ice is melting in my malt so it is time to spice up the JSSOR slider that I created earlier with some fancy slideshow effects.

I will add slideshow transitions to JSSOR Slider component that I described in my previous post so if you do not have a similar component yet you should start by creating it to follow the next steps.

To add transition effects to a JSSOR slider you simply need to change the options variable that you are passing to JSSOR Slider constructor to include the ‘$SlideshowOptions’. I will use the following options in my slider:

 var options = {
   $AutoPlay: true,
   $SlideshowOptions: {
   $Class: $JssorSlideshowRunner$,
   $Transitions: jssorTransitions,
   $TransitionsOrder: 1
 },
 $ArrowNavigatorOptions: {
   $Class: $JssorArrowNavigator$,
 },
 $BulletNavigatorOptions: {
   $Class: $JssorBulletNavigator$,
 } 
 };

The ‘jssorTransitions’ above is an array that contains code for transitions that you want to use in your JSSOR Slider.

 var jssorTransitions = [
 { code1 },
 { code2 },
 { code3 }
 ];

To add the code1, code2, code3, … elements to this array you can simply use the Transition Viewer to select transition effect and then copy and paste transition code. For my New Year Slider I selected several effects at random:

 var jssorTransitions = [
 { $Duration:2000,$Opacity:2 },
 { $Duration:2000,$Cols:8,$Clip:1 },
 { $Duration:2000,y:1,$Easing:$JssorEasing$.$EaseInBounce },
 { $Duration:2000,x:0.2,y:-0.1,$Delay:20,$Cols:8,$Rows:4,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$Formation:$JssorSlideshowFormations$.$FormationSwirl,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Top:$JssorEasing$.$EaseInWave,$Clip:$JssorEasing$.$EaseOutQuad},$Assembly:260,$Round:{$Left:1.3,$Top:2.5} },
 { $Duration:2000,x:1,y:0.2,$Delay:30,$Cols:10,$Rows:5,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$Reverse:true,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Easing:{$Left:$JssorEasing$.$EaseInOutSine,$Top:$JssorEasing$.$EaseOutWave,$Clip:$JssorEasing$.$EaseInOutQuad},$Assembly:2050,$Round:{$Top:1.3} },
 { $Duration:2000,x:4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$JssorEasing$.$EaseInExpo,$Zoom:$JssorEasing$.$EaseInExpo,$Opacity:$JssorEasing$.$EaseLinear,$Rotate:$JssorEasing$.$EaseInExpo},$Opacity:2,$Round:{$Rotate:0.8}}
 ];

You can then change value of ‘$Duration‘ to adjust speed of transition. e.g. I changed default ‘$Duration:1200‘ to ‘$Duration: 2000‘. Also you can change ‘$Col‘ or ‘$Row‘ value to adjust columns or rows count.

The ‘$TransitionsOrder‘ parameter in the ‘$SlideshowOptions’  controls the way to choose transition to play slideshow, 1 (default) – play in Sequence, or 0 – play at Random.

If you followed by updating the render.js file in the JSSOR Slider component, the custom binding handler function should now look as follows:

// create a custom binding handler to update the slider
ko.bindingHandlers.jssorSetupSlider = {
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var jssorTransitions = [
{ $Duration:2000,$Opacity:2 },
{ $Duration:2000,$Cols:8,$Clip:1 },
{ $Duration:2000,y:1,$Easing:$JssorEasing$.$EaseInBounce },
{ $Duration:2000,x:0.2,y:-0.1,$Delay:20,$Cols:8,$Rows:4,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$Formation:$JssorSlideshowFormations$.$FormationSwirl,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Top:$JssorEasing$.$EaseInWave,$Clip:$JssorEasing$.$EaseOutQuad},$Assembly:260,$Round:{$Left:1.3,$Top:2.5} },
{ $Duration:2000,x:1,y:0.2,$Delay:30,$Cols:10,$Rows:5,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$Reverse:true,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Easing:{$Left:$JssorEasing$.$EaseInOutSine,$Top:$JssorEasing$.$EaseOutWave,$Clip:$JssorEasing$.$EaseInOutQuad},$Assembly:2050,$Round:{$Top:1.3} },
{ $Duration:2000,x:4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$JssorEasing$.$EaseInExpo,$Zoom:$JssorEasing$.$EaseInExpo,$Opacity:$JssorEasing$.$EaseLinear,$Rotate:$JssorEasing$.$EaseInExpo},$Opacity:2,$Round:{$Rotate:0.8}}
];
var options = {
$AutoPlay: true,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssorTransitions,
$TransitionsOrder: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
}
};
var jssor_slider1 = new $JssorSlider$(viewModel.sliderId, options);
/*responsive code begin*/
/*you can remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_slider1.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_slider1.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*responsive code end*/
}
};

In the next post which will now appear in the next 2017 year, I will explain how you can use assets management capabilities in the Sites SDK to allow use if File Picker to select images for use in your Slider component. I will also extend this component to add Settings UI to select slideshow transition effect.

I changed images in the slider to use photos of New Year Firework display in London:

Happy New 2017 Year!