SEE DEMO HERE: https://www.jqueryscript.net/demo/Infinite-Scroller-Plugin-jQuery/
(ALTHOUGH FUNCTION CALL WAS WRONG IN THEIR DOCUMENTATION--SEE MY INSTRUCTIONS AT #4 BELOW FOR FUNCTION CALL THAT WORKS)
1. Include the jquery library call in the header if needed (our theme does this automatically, so don't do this)
2. Include this type of html structure in your html. You can use any class name instead of "photobanner" but if you do change it from demo, be sure to also change the class when you call the scroller function
NOTE: IF YOU ADD MARGINS AROUND PICTURES (OR ANY ELEMENT) WITH CSS, IT CAUSES FLICKERING WHEN THE ANIMATION REPEATS. BETTER TO ADD MARGINS INTO THE IMAGE, OR PERHAPS A WIDTH IF USING ELEMENTS OTHER THAN PICTURES. IF FLICKERING STILL PERSISTS, TRY ADDING IN THE SAME BLOCK OF PICTURES INTO PHOTOBANNER 2 OR THREE TIMES INSTEAD OF RELYING ON CLONING.
NOTE: TO PREVENT PICS FROM TUMBLING DOWN THE PAGE BEFORE ALL JQUERY CODE IS FULLY LOADED, I'VE PUT DISPLAYfLEX ON PHTOTO BANNER
NOTE IN CERTAIN CASES THE IMAGES WE ADD TO PHOTOBANNER FLASH FOR A MOMENT ESP IF THEY ARE NEAR TOP OF PAGE. IN THAT CASE PUT A "DISPLAY: NONE" ON PHOTOBANNER AND THEN REMOVE IT AFTER 2 SECONDES WITH THIS JQUERY:
NOTE: ADD THIS CSS TO ADD HOVER SCALING OF PICTURES:
3. include this Jquery in a separate file and link to it from the footer. We include the code in js/scripts.js file, so just add it there--no need to link to another js file (be sure to include inside the document read function in scripts.js).
NOTE: DO NOT PUT THE FUNCTION DEFINITION INSIDE COCUMENT READY FUNCTION AS IT DOES NOT SEEM TO WORK THERE NOTE THAT THE FUNCTION CALL MUST BE IN A DOCUMENT READY FUNCTION, SEE BELOW):
4. Call the function somewhere in your html:
To call the function somewhere in your html and creaete just a simple slider be sure to include the document ready function:
Note: if you changed the class "photobanner" in your html (above) be sure to change it in these calls, too. Many iterations of the slider are allowed, just change the class name for each!!!
4a) To call the slider function with different option values, replace the simple slider call just above to NOTE THE SLIGHT DIFFRENCE IN BRACKETS (compared to the simple call above. Also, don't forget to wrap in document ready function as below.) WHEN WE CHANGE OPTIONS: