Help with consolidating image Slider code

JavaScript
1

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:

<script>
    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
	});
    </script>
3

Your answer is pretty much already here. If the only thing that changes is the transitions, than those are the ones you need to take out of the current code and extract them into their own variables.

This should get you started:

var transition1 = {
    $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
};
var transition2 = {
    $Duration: 8000,
    $Delay: 120,
    $Cols: 8,
    $Rows: 4,
    $Clip: 15,
    $Formation: $JssorSlideshowFormations$.$FormationStraightStairs,
    $Easing: $JssorEasing$.$EaseInQuad,
    $Assembly: 2050
};
var transition3 = {
    $Duration: 8000,
    $Rows: 6,
    $Delay: 120,
    $Clip: 4
};
var transition4 = {
    $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
};
var transition5 = {
    $Duration: 8000,
    y: -1,
    $Cols: 12,
    $Delay: 120,
    $Formation: $JssorSlideshowFormations$.$FormationStraight,
    $ChessMode: {
        $Column: 12
    }
};
var transition6 = {
    $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 MAX_WIDTH = 1100;

jQuery(document).ready(function ($) {
    var options = {
        $FillMode: 2,
        $Idle: 12000,
        $AutoPlay: true,
        $SlideshowOptions: {
            $Class: $JssorSlideshowRunner$,
            $Transitions: [
                transition1, transition2, transition3, transition4, transition5, transition6
            ],
            $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
    
    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
});

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
});

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
});

Iā€™ve extracted the transitions and rewrote the first slider to use these transitions. Iā€™ll leave it up to you to apply what Iā€™ve done to the second and third slider as well.

There are more steps that could be done, but letā€™s start with this :slight_smile:

1 Like
4

Thanks for your reply and code, However when I replaced what I have with your code, nothing works.

Any additional help is appreciated.

5

The change rgkamp suggested is a very simple one. Instead of setting $Transitions (in the options object) as a set array of transition objects in a set order, you define the transitions outside of the array and then place them in the array in different ordering for each slider.

But even before doing this I would cut this problem down first by removing sliders 2 and 3 from the page and focus on refactoring just slider 1. Make the changes to slider1 only and once you get it working then you can re-introduce sliders 2 and 3. Better to worry about only 1/3 of the code instead of the whole thing.

Another change you should do is that instead of having 3 calls to jQuery ready(), all three sliders should be defined inside one ready event. I would also only have one set of bind events calling to ScaleSlider(), but in ScaleSlider you will setup the three containerElement variables and call each slider objects $ScaleWidth. But again, this is for later. Focus on getting just slider1 working first.

To better help you can also tell us what errors you are getting instead of just saying ā€œnothing worksā€. One simple error can make nothing work and it might be a simple fix. It is just the nature of programming. :slight_smile:

4 Likes
6

Thanks for your reply.
Regarding ā€˜nothing worksā€™, I replaced the existing code with rpkampā€™s code and there are no transitions. Nothing moves or changes. Iā€™m sorry I donā€™t understand how to: ā€œinstead of setting $Transitions (in the options object) as a set array of transition objects in a set order, you define the transitions outside of the array and then place them in the array in different ordering for each sliderā€. Any addition help or example will be welcomed.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.