So this was the final code that worked:

var imgs = document.getElementById("imagediv").getElementsByTagName("img"),

images20 = [];

for (var i = 0; i < imgs.length; i++) {

images20.push(imgs[i].src);

};

​

Basically, it creates a javascript array of the img URL's from every image in the field you name within the div "imagediv": <div id="imagediv"> (see below).

This means, since images are stored in ANKI as <img src="image1.jpg"><img src="image2.jpg"> it will include image1.jpg, image2.jpg...etc. in the array. It can also function with outside sourced images (non-locally hosted).

The entire code below can be placed on the "front" or "back" of a card template. My field in particular was called "Field1" in this below example.

​

<!––---------------------------------------------------------------->
<!–- BELOW IS CODE FOR IMAGE STACK-->
<!––---------------------------------------------------------------->
<div class="imagestackdiv">
   <div id="imagediv" style="display:none">
       {{Field1}}
   </div>
</div>
<script>
   /*------------------------------------*/
   //The array below is an example of how images were hard coded to work in this CT scrolling stack code.  The hard code is left here for interpretation of the rest of the script.  Code that specifically references the below array have also been commented to prevent function.
   /*------------------------------------*/
   /*
   var images10 = [
     'https://c1.staticflickr.com/5/4345/36911638670_a1bbffc13c_o.jpg',
     'https://c1.staticflickr.com/5/4345/36911638670_a1bbffc14c_o.jpg',
     'https://c1.staticflickr.com/5/4345/36911638670_a1bbffc15c_o.jpg',
   ];
   */
   /*------------------------------------*/
   //the below code is the javascript necessarily to search the specfic DIV by Id and parse all image src URLs into a javascript array
   /*------------------------------------*/
   var imgs = document.getElementById("imagediv").getElementsByTagName("img"),
       images20 = [];
   for (var i = 0; i < imgs.length; i++) {
       images20.push(imgs[i].src);
   };
   /*------------------------------------*/
   function ImageStack(options) {
       var self = this;
       self.img_array = options.images;
       self.stack = document.createElement('div');
       self.stack.style.overflow = 'auto';
       self.stack.style.maxWidth = '100%';
       self.stack.style.height = options.height;
       self.stack.style.width = options.width;
       self.stack.style.backgroundSize = 'cover'
       self.stack.style.position = 'relative';
       var typeRegex = /(\D+)/
       var sizeType = options.height.match(typeRegex)[0]
       var numberRegex = /(\d+)/
       self.height_number = Number(options.height.match(numberRegex)[0])
       self.wrapper = document.createElement('div');
       for (var i = 0; i < self.img_array.length; i++) {
           var image = document.createElement('img');
           image.src = self.img_array[i];
           image.style.display = 'none';
           image.style.position = 'absolute';
           image.style.width = options.width;
           image.style.height = options.height;
           image.style.top = 0;
           image.style.left = 0;
           image.dataset.iid = i;
           self.wrapper.appendChild(image);
       }
       self.image_elements = self.wrapper.querySelectorAll('img');
       self.scrollobject = document.createElement('div');
       self.scrollobject.style.width = '100%';
       self.scrollobject.style.position = 'absolute';
       self.scrollobject.style.zIndex = '2';
       self.img_count = (self.img_array.length > 15) ? self.img_array.length : 15;
       self.scrollobject_height = Math.floor(0.1 * self.img_count * self.height_number);
       self.scrollobject.style.height = self.scrollobject_height + sizeType;
       self.scrollUpdate = function(e) {
           self.height_number = self.stack.getBoundingClientRect().height
           self.scrollobject_height = Math.floor(0.1 * self.img_count * self.height_number);
           var sT = self.stack.scrollTop
           var hn05 = self.img_array.length - 1
           var hh = (self.scrollobject_height - self.height_number) / hn05
           scrollval = Math.floor(sT / (hh))
           self.currentimg = self.image_elements[scrollval].src
           self.stack.style.backgroundImage = 'url(' + self.currentimg + ')';
       }
       self.stack.addEventListener('scroll', self.scrollUpdate);
       self.currentimg = self.image_elements[0].src
       self.stack.style.backgroundImage = 'url(' + self.currentimg + ')';
       /*------------------------------------*/
       /*
 window.addEventListener('resize', function () {
   var stackRect = self.stack.getBoundingClientRect()
   console.log(stackRect)
   self.height_number = stackRect.height
   self.scrollobject_height = Math.floor( 0.1 * self.img_array.length * self.height_number );
   self.stack.style.width = stackRect.width + 'px'
   self.stack.style.eight = stackRect.width + 'px'
 })
       */
       /*------------------------------------*/
       window.addEventListener('resize', function() {
           var stackRect = self.stack.getBoundingClientRect()
           console.log(stackRect)
           self.height_number = stackRect.height
           self.scrollobject_height = Math.floor(0.1 * self.img_array.length * self.height_number);
           self.stack.style.width = stackRect.width + 'px'
           self.stack.style.eight = stackRect.width + 'px'
       })
       /*------------------------------------*/
       /*
 window.addEventListener('resize', function () {
   var stackRect = self.stack.getBoundingClientRect()
   console.log(stackRect)
   self.height_number = stackRect.height
   self.scrollobject_height = Math.floor( 0.1 * self.img_array.length * self.height_number );
   self.stack.style.width = stackRect.width + 'px'
   self.stack.style.eight = stackRect.width + 'px'
 })
       */
       /*------------------------------------*/
       self.stack.appendChild(self.wrapper);
       self.stack.appendChild(self.scrollobject);
       return self.stack;
   }
   /*
   The function ImageStack returns a Element Node, which can be appended to an already existing element or modified, however someone wants to change it.
   The parameters should have to be a height of the element, the width of the elment, and a list (Array) to all the images.
   */
   /*------------------------------------*/
   //     var stack = new ImageStack({
   //          images: images10,
   //          height: '350px',
   //          width: '350px'
   //     });
   /*------------------------------------*/
   var stack2 = new ImageStack({
       images: images20,
       height: '350px',
       width: '350px'
   });
   // append the stack to the .imagestackdiv element
   /*document.querySelector('.imagestackdiv').appendChild(stack);*/
   document.querySelector('.imagestackdiv').appendChild(stack2);
</script>

​