SEE DEMO HERE: https://www.jqueryscript.net/demo/Infinite-Scroller-Plugin-jQuery/
(ALTHOUGH FUNCTION CALL WAS WRONG IN THEIR DOCUMENTATION--SE MY INSTRUCTIONS AT #4 BELOW FOR FUNCTION CALL THAT WORKS)

/* INSTRUCTIONS

1. 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

<div class="photobanner" style="displayFlex;">
  <img src="1.jpg" alt="" />
  <img src="2.jpg" alt="" />
 <img src="3.jpg" alt="" />
 <img src="4.jpg" alt="" />
  <img src="5.jpg" alt="" />
  ><img src="6.jpg" alt="" />
</div>

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.

NOTE: TO PREVENT PICS FROM TUMBLING DOWN THE PAGE BEFORE ALL JQUERY CODE IS FULLY LOADED, i'VE PUT DISPLAYfLEX ON PHTOTO BANNER


NOTE: ADD THIS CSS TO ADD HOVER SCALING OF PICTURES:

.photobanner img {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease
}

.photobanner img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .2)
}

2. Include the jquery library call in the header if needed (our theme does this automatically, so don't do this)

<script src="//code.jquery.com/jquery.min.js"></script>

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, SE BELOW):

// INFINITE SCROLLER FUNCTION BEGINS

(function($){
	$(window).on('load', function() {
	    window.loaded = true;
	});
	$(function(){
		$.fn.infiniteslide = function(options){
			//option
			var settings = $.extend({
				'speed': 100, //Change the default animation speed accepts integers.
				'direction': 'left', //Change the default scrolling direction can be up/down/left/right
				'pauseonhover': true, //Enable/disable the 'pause on hover' functionality.
				'responsive': true, //Make the scroller fully responsive across all browsers accepts true or false.
				'clone': 1 //Specify how many items to be cloned if there're no enough items to fit the container
                //changing the options here would change the options for all instances.  To change the options on a per instance basis see  number 4 below: "calling the function"
			},options);
			
			var setCss = function(obj,direction){
				$(obj).wrap('<div class="infiniteslide_wrap"></div>').parent().css({
					overflow: 'hidden'
				});

				if(direction == 'up' || direction == 'down'){
					var d = 'column';
				} else {
					var d = 'row';
				}
								
				$(obj).css({
					display: 'flex',
					flexWrap: 'nowrap',
					alignItems: 'center',
					'-ms-flex-align': 'center',
					flexDirection: d
				}).children().css({
						flex: 'none',
						display: 'block'
					});
			}
			
			var setClone = function(obj,clone){
				var $clone = $(obj).children().clone().addClass('infiniteslide_clone');
				i = 1;
				while(i <= clone){
					$clone.clone().appendTo($(obj));
					i++;
				}
			}
			
			var getWidth = function(obj){
				w = 0;
				$(obj).children(':not(.infiniteslide_clone)').each(function(key,value){
					w = w + $(this).outerWidth(true);
				});
				return w;
			}
			var getHeight = function(obj){
				h = 0;
				$(obj).children(':not(.infiniteslide_clone)').each(function(key,value){
					h = h + $(this).outerHeight(true);
				});
				return h;
			}

			
			var getSpeed = function(l,s){
				return l / s;
			}
			var getNum = function(obj,direction){
				if(direction == 'up' || direction == 'down'){
					var num = getHeight(obj);
				} else {
					var num = getWidth(obj);
				}
				return num;
			}
			
			var getTranslate = function(num,direction){
				if(direction == 'up' || direction == 'down'){
					var i = '0,-' + num + 'px,0';
				} else {
					var i = '-' + num + 'px,0,0';
				}
				return i;
			}
			
			var setAnim = function(obj,id,direction,speed){
				var num = getNum(obj,direction);
				if(direction == 'up' || direction == 'down'){
					$(obj).parent('.infiniteslide_wrap').css({
						height: num + 'px'
					});
				}
				var i = getTranslate(num,direction);
				
				$(obj).attr('data-style','infiniteslide' + id);

				var css = '@keyframes infiniteslide' + id + '{' + 
								'from {transform:translate3d(0,0,0);}' + 
								'to {transform:translate3d(' + i + ');}' + 
							'}';
				$('<style />').attr('id','infiniteslide' + id + '_style')
				.html(css)
				.appendTo('head');
				
				if(direction == 'right' || direction == 'down'){
					var reverse = ' reverse';
				} else {
					var reverse = '';
				}
				
				$(obj).css({
					animation: 'infiniteslide' + id + ' ' + getSpeed(num,speed) + 's linear 0s infinite' + reverse
				});
			}
			var setStop = function(obj){
				$(obj).on('mouseenter',function(){
					$(this).css({
						animationPlayState: 'paused'
					});
				}).on('mouseleave',function(){
					$(this).css({
						animationPlayState: 'running'
					});
				});
			}
			
			var setResponsive = function(obj,direction){
					var num = getNum(obj,direction);
					var i = getTranslate(num,direction);
					return i;
				};
			
			
			
		
			return this.each(function(key,value){
				var $this = $(this);
				var num = Date.now() + Math.floor(10000*Math.random()).toString(16);
				if(settings.pauseonhover == true){
					setStop($this);
				}
				var _onload = function(){
					setCss($this,settings.direction);
					setClone($this,settings.clone);
					setAnim($this,num,settings.direction,settings.speed);
					
					if(settings.responsive){
						$(window).on('resize',function(){
							var i = setResponsive($this,settings.direction);
							var styleid = $this.attr('data-style');
							var stylehtml = $('#' + styleid + '_style').html();
							
							var stylehtml_new = stylehtml.replace(/to {transform:translate3d\((.*?)\)/,'to {transform:translate3d(' + i + ')');
							$('#' + styleid + '_style').html(stylehtml_new);

						});
					}
				};

				if (window.loaded) {
					_onload();
				} else {
					$(window).on('load', _onload);
				}
			});
			
		}
	});
})(jQuery);
// INFINITE SCROLLER FUNCTION ENDS

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 cocument ready function:

<script>
$( document ).ready(function() {
	$(function(){
		$('.photobanner').infiniteslide();
	});
}); //end document ready
</script>

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:

<script>
$( document ).ready(function() {
$(function(){
$('.photobanner').infiniteslide({
  'speed': 100, //Change the default animation speed (note that comma is for muliple delcarations of options, remove if delcaring only a single optin) accepts any integer--the higher the faster
  'direction': 'left', //Change the default scrolling direction accepts up/down/left/right
  'pauseonhover': true, //Enable/disable the 'pause on hover' functionality, accptes true, false
  'responsive': true, // Make the scroller fully responsive across all browsers. Accepts true or false
  'clone': 1 //Specify how many items to be cloned if there're no enough items to fit the container.  Accepts any integer.
});
});
}); //end document ready
</script>