Menu
I have three image Sliders on a web page that work successfully, but I would imagine that the code can be condensed or combined and get the same successful results.
All code is repeated, like for example each slider has the same transition types, but each slider starts the transitions in a different order. Other than that they are all the same except that they are named slider1, slider2 and slider3.
Any guidance with consolidating or condensing the code will be appreciated.
Here is my current code:
jQuery(document).ready(function($) {
//Define an array of slideshow transition code
var _SlideshowTransitions = [{
$Duration: 8000,
x: 0.3,
$Rows: 2,
$During: {
$Left: [0.3, 0.7]
},
$ChessMode: {
$Row: 3
},
$Easing: {
$Left: $JssorEasing$.$EaseInCubic,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2
},
{
$Duration: 8000,
$Delay: 120,
$Cols: 8,
$Rows: 4,
$Clip: 15,
$Formation: $JssorSlideshowFormations$.$FormationStraightStairs,
$Easing: $JssorEasing$.$EaseInQuad,
$Assembly: 2050
},
{
$Duration: 8000,
$Rows: 6,
$Delay: 120,
$Clip: 4
},
{
$Duration: 8000,
x: -1,
y: 1,
$Delay: 120,
$Cols: 8,
$Rows: 4,
$Formation: $JssorSlideshowFormations$.$FormationStraightStairs,
$Easing: {
$Left: $JssorEasing$.$EaseInQuart,
$Top: $JssorEasing$.$EaseInQuart,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2
},
{
$Duration: 8000,
y: -1,
$Cols: 12,
$Delay: 120,
$Formation: $JssorSlideshowFormations$.$FormationStraight,
$ChessMode: {
$Column: 12
}
},
{
$Duration: 8000,
x: 1,
$Rows: 2,
$Delay: 120,
$ChessMode: {
$Row: 3
},
$Easing: {
$Left: $JssorEasing$.$EaseInOutQuart,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2,
$Brother: {
$Duration: 1600,
x: -1,
$Rows: 2,
$ChessMode: {
$Row: 3
},
$Easing: {
$Left: $JssorEasing$.$EaseInOutQuart,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2
}
},
];
var options = {
$FillMode: 2,
$Idle: 12000,
$AutoPlay: true,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
}
};
var jssor_slider1 = new $JssorSlider$(‘slider1_container’, options);
//responsive code begin
//you can remove responsive code if you don’t want the slider scales while window resizing
var MAX_WIDTH = 1100;
function ScaleSlider() {
var containerElement = jssor_slider1.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
console.log(containerElement);
if (containerWidth) {
console.log(‘activated’);
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_slider1.$ScaleWidth(expectedWidth);
} else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind(“load”, ScaleSlider);
$(window).bind(“resize”, ScaleSlider);
$(window).bind(“orientationchange”, ScaleSlider);
//responsive code end
});
</script>
<!–2////////////////////////////////////////////////////////////////2–>
<script>
jQuery(document).ready(function($) {
//Define an array of slideshow transition code
var _SlideshowTransitions = [
{
$Duration: 8000,
x: -1,
y: 1,
$Delay: 120,
$Cols: 8,
$Rows: 4,
$Formation: $JssorSlideshowFormations$.$FormationStraightStairs,
$Easing: {
$Left: $JssorEasing$.$EaseInQuart,
$Top: $JssorEasing$.$EaseInQuart,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2
},
{
$Duration: 8000,
x: 0.3,
$Rows: 2,
$During: {
$Left: [0.3, 0.7]
},
$ChessMode: {
$Row: 3
},
$Easing: {
$Left: $JssorEasing$.$EaseInCubic,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2
},
{
$Duration: 8000,
$Delay: 120,
$Cols: 8,
$Rows: 4,
$Clip: 15,
$Formation: $JssorSlideshowFormations$.$FormationStraightStairs,
$Easing: $JssorEasing$.$EaseInQuad,
$Assembly: 2050
},
{
$Duration: 8000,
$Rows: 6,
$Delay: 120,
$Clip: 4
},
{
$Duration: 8000,
x: 1,
$Rows: 2,
$Delay: 120,
$ChessMode: {
$Row: 3
},
$Easing: {
$Left: $JssorEasing$.$EaseInOutQuart,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2,
$Brother: {
$Duration: 1600,
x: -1,
$Rows: 2,
$ChessMode: {
$Row: 3
},
$Easing: {
$Left: $JssorEasing$.$EaseInOutQuart,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2
}
},
{
$Duration: 8000,
y: -1,
$Cols: 12,
$Delay: 120,
$Formation: $JssorSlideshowFormations$.$FormationStraight,
$ChessMode: {
$Column: 12
}
},
];
var options = {
$Idle: 12000,
$AutoPlay: true,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
}
};
var jssor_slider1 = new $JssorSlider$(‘slider2_container’, options);
//responsive code begin
//you can remove responsive code if you don’t want the slider scales while window resizing
var MAX_WIDTH = 1100;
function ScaleSlider() {
var containerElement = jssor_slider1.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
console.log(containerElement);
if (containerWidth) {
console.log(‘activated’);
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_slider1.$ScaleWidth(expectedWidth);
} else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind(“load”, ScaleSlider);
$(window).bind(“resize”, ScaleSlider);
$(window).bind(“orientationchange”, ScaleSlider);
//responsive code end
});
</script>
<!–3////////////////////////////////////////////////////////////////3–>
<script>
jQuery(document).ready(function($) {
//Define an array of slideshow transition code
var _SlideshowTransitions = [
{
$Duration: 8000,
$Rows: 6,
$Delay: 120,
$Clip: 4
},
{
$Duration: 8000,
y: -1,
$Cols: 12,
$Delay: 120,
$Formation: $JssorSlideshowFormations$.$FormationStraight,
$ChessMode: {
$Column: 12
}
},
{
$Duration: 8000,
x: 0.3,
$Rows: 2,
$During: {
$Left: [0.3, 0.7]
},
$ChessMode: {
$Row: 3
},
$Easing: {
$Left: $JssorEasing$.$EaseInCubic,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2
},
{
$Duration: 8000,
$Delay: 120,
$Cols: 8,
$Rows: 4,
$Clip: 15,
$Formation: $JssorSlideshowFormations$.$FormationStraightStairs,
$Easing: $JssorEasing$.$EaseInQuad,
$Assembly: 2050
},
{
$Duration: 8000,
x: 1,
$Rows: 2,
$Delay: 120,
$ChessMode: {
$Row: 3
},
$Easing: {
$Left: $JssorEasing$.$EaseInOutQuart,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2,
$Brother: {
$Duration: 1600,
x: -1,
$Rows: 2,
$ChessMode: {
$Row: 3
},
$Easing: {
$Left: $JssorEasing$.$EaseInOutQuart,
$Opacity: $JssorEasing$.$EaseLinear
},
$Opacity: 2
}
},
];
var options = {
$Idle: 12000,
$AutoPlay: true,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
}
};
var jssor_slider1 = new $JssorSlider$(‘slider3_container’, options);
//responsive code begin
//you can remove responsive code if you don’t want the slider scales while window resizing
var MAX_WIDTH = 1100;
function ScaleSlider() {
var containerElement = jssor_slider1.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
console.log(containerElement);
if (containerWidth) {
console.log(‘activated’);
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_slider1.$ScaleWidth(expectedWidth);
} else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind(“load”, ScaleSlider);
$(window).bind(“resize”, ScaleSlider);
$(window).bind(“orientationchange”, ScaleSlider);
//responsive code end
});