How to add more functionality to Slider Revolution Plug-in
Hello readers of the rubric «Learning Sessions».
If you missed our last article concerning adding of Youtube video to each product in Opencart, you can read it here — «4 Easy Steps to Add Youtube Video to Each Product in Opencart»
Today we’ll talk about sliders and their creation. One day, working on the project we had something to do with this. Hope that our practical experience
will be appreciated by you.
Ok. Let’s start.
There is a multifunctional and useful plug-in for sliders’ creation. Its name is «Slider Revolution». However, despite its powerful functionality we stumbled
upon the particular task that couldn’t be solved by the plug-in. We needed that the slider not only was able to take completely new parameters but also to
save CSS based on media queries when a size of the browser window is being changed.
Let’s assume that we choose the adaptive mode for the layer in the slide. «Slider Revolution» will reduce or enlarge the layer in proportion as well as all
included in it against to the monitor, browser or device size. It’s very useful because this slider’s feature takes into account not sizes of the browser’s
window but sizes of the slider in contrast to media queries. Thus there is a possibility for layers to be placed inside the slider completely, even when
the screen’s height is small. It is possible due to the fact that the above mentioned feature takes into consideration the height also.
But what if we want to start from the media queries registered in CSS? If we want to make a small button relative to a large monitor and a big button
relative to a small monitor? It will not work! The point is that the slider read the styles that are assigned for the layers only under initialization. This
means that the media queries are ignored dynamically.
Not uncommon is the task to make a slider with the «Fullscreen» parameter on PC and «Fullwidth» on mobile or to switch other parameters depending on the
height or on the width of the screen.
So in such situation we decided to write a function that would reload the slider in response to the screen sizes’ change. The main point of the task was to
allow the reload only after going through the break-points specified in the function parameters. It was needed to prevent the reload of the slider when the
slightest size change occured.
The final item of the task was to teach the function to initialize «Slider Revolution» with the different parameters on the different screen sizes.
Well, we have written the such function:
if(!$(‘.slider-revolution’).length) return;
function resizeRevolution(options, new_rev_obj, bp_arr) {
if(!options.wrapper || !options.slider || !options.breakpoints) return false;
var wrapper = options.wrapper,
slider = options.slider,
breakpoints = options.breakpoints,
fullscreen_BP = options.fullscreen_BP || false,
new_rev_obj = new_rev_obj || {},
bp_arr = bp_arr || [],
rev_obj = {
dottedOverlay:»none»,
delay:4600,
startwidth:1920,
hideThumbs:200,
hideTimerBar:»on»,
thumbWidth:100,
thumbHeight:50,
thumbAmount:5,
navigationArrows:»none»,
touchenabled:»on»,
onHoverStop:»on»,
swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,
parallax:»mouse»,
parallaxBgFreeze:»on»,
parallaxLevels:[7,4,3,2,5,4,3,2,1,0],
keyboardNavigation:»off»,
navigationHAlign:»center»,
navigationVAlign:»bottom»,
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:»left»,
soloArrowLeftValign:»center»,
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:»right»,
soloArrowRightValign:»center»,
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
shadow:0,
spinner:»»,
h_align:»left»,
stopLoop:»off»,
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:»off»,
autoHeight:»off»,
forceFullWidth:»off»,
hideThumbsOnMobile:»off»,
hideNavDelayOnMobile:1500,
hideBulletsOnMobile:»off»,
hideArrowsOnMobile:»off»,
hideThumbsUnderResolution:0,
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
startWithSlide:0,
fullScreenOffsetContainer: false
};
$.extend(rev_obj, new_rev_obj);
var get_Slider = function() {
return $sliderWrapp.find(slider);
};
var get_current_bp = function() {
var wind_W = window.innerWidth;
for(var i = 0; i < breakpoints.length; i++) {
var bp = breakpoints[i];
if(!breakpoints.length) return false;
if(wind_W <= bp) { if(i === 0) { return bp; } else { if(bp > breakpoints[i — 1])
return bp;
}
} else if(wind_W > bp && i === breakpoints.length — 1)
return Infinity;
}
return false;
};
var $sliderWrapp = $(wrapper),
$sliderInit = get_Slider(),
$sliderCopy = $sliderWrapp.clone(),
bp = get_current_bp();
if(!$sliderInit.length) return false;
var start_Rev = function($sliderInit, bp) {
var wind_W = window.innerWidth,
rev_settings_obj = {},
rev_screen_obj = {},
set_rev_obj = {};
if(fullscreen_BP) {
var full_width = (wind_W >= fullscreen_BP) ? ‘off’ : ‘on’,
full_screen = (wind_W >= fullscreen_BP) ? ‘on’ : ‘off’;
rev_screen_obj = {
fullWidth: full_width,
fullScreen: full_screen
};
}
if(bp_arr.length) {
for(var i = 0; i < bp_arr.length; i++) {
var this_obj = bp_arr[i];
if(this_obj.bp && this_obj.bp.length === 2 && this_obj.bp[0] < this_obj.bp[1]) {
var from = this_obj.bp[0],
to = this_obj.bp[1];
if(from <= bp && to >= bp) {
for(var key in this_obj) {
if(key !== ‘bp’)
rev_settings_obj[key] = this_obj[key];
}
}
}
}
}
$.extend(set_rev_obj, rev_obj, rev_settings_obj, rev_screen_obj);
$($sliderInit).show().revolution(set_rev_obj);
};
start_Rev($sliderInit, bp);
var restart_Rev = function(current_bp) {
if(!$($sliderInit).hasClass(‘revslider-initialised’)) return;
bp = current_bp || 0;
$sliderInit.revkill();
$sliderWrapp.replaceWith($sliderCopy);
$sliderWrapp = $sliderCopy;
$sliderCopy = $sliderWrapp.clone();
$sliderInit = get_Slider();
start_Rev($sliderInit, bp);
};
function endResize(func) {
var windWidth = window.innerWidth,
interval;
interval = setInterval(function() {
var windWidthInterval = window.innerWidth;
if(windWidth === windWidthInterval) {
setTimeout(function() {
func();
}, 200);
}
clearInterval(interval);
}, 100);
};
$(window).on(‘resize’, function() {
endResize(function() {
var current_bp = get_current_bp();
if(current_bp !== bp)
restart_Rev(current_bp);
})
});
};
}
From now initialization will happen by means of this function. What is passed in the parameters of the function as well as how to make initialization will be
explained below.
Initialization:
resizeRevolution({
wrapper: ‘.slider-revolution’,
slider: ‘.tp-banner.revolution-static’,
breakpoints: [414, 767, 1024],
fullscreen_BP: 768
}, {
fullScreenOffsetContainer: «header-static»
}, [
{
bp: [0, 768],
startheight: 1300
},{
bp: [0, 1024],
fullScreenOffsetContainer: «header»
},{
bp: [1024, Infinity],
delay:8000
}
]
);
ResizeRevolution gets as parameters three objects: the first is necessary, the second and the third are unnecessary and exist to reassign the default
parameters for «Slider Revolution» initialization.
The 1st object gets:
wrapper — the unique cover selector for html slider. It’s a must to wrap the main slider structure in a cover as well as to specify its unique selector.
slider — the unique selector of the slider according to which «Slider Revolution» plug-in initialization will be made.
breakpoints — takes an array of break-points of the screen width going through which the reinitialization of the slider will be made.
fullscreen_BP — takes false, i.е., to off the function or the width on which the change-over from fullwidth to fullscreen will happen.
(fullwidth < fullscreen_BP <= fullscreen)
The 2nd object takes parameters that will complement or reassign the similar parameters in the object, which is default in resizeRevolution function for
the initialization of the Revolution plug-in. By the way, you can fit parameters, which are specified in the variable rev_obj of the resizeRevolution
function, according to your slider.
The 3rd object is an array. It works in the same way as the 2nd, but it is focused on the setting of characteristics for different segments of width.
We pass an object to an array (associative array) in which we must write bp property passing to it an array of two int values. On the segment of the values
all the parameters, which we want to pass to the plug-in, will be taken. As the rest of the object properties we should write those that we want to pass
under «Slide Revolution» reinitialization (the second value can be Infinity).
Now resizeRevolution function will control the screen resolution and reload the slider with the specified parameters for particular screen width. Moreover,
we can synchronize break-points of reload with media queries in order the slider reload CSS to itself taking into account the media queries.