Bootstrap Carousel for Product Thumbnails?

[Leanne]

I am working on a site built using the Base readytheme. I have modified the ImageMachine to incorporate Photoswipe (this part works fine), and am now attempting to put the thumbnails into a carousel using the code from this page: https://codepen.io/JacobLett/pen/PGeKez. I have the code generating correctly for each of the images, but I can't figure out how to add the "active" class to just the first thumbnail (tried targeting the :first-child of carousel-inner but it throws a console error that carousel-inner is not defined), and the cloned images aren't being generated. I also can't get the carousel controls to display -- the contents of #thumbnails are apparently being completely overwritten.

The html:

<div class="thumbnails carousel carousel-showmanymoveone slide">
<div id="thumbnails" class="carousel-inner">
<a class="left carousel-control" href="#carousel-tilenav" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel-tilenav" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

The ImageMachine code:

ImageMachine.prototype.PhotoSwipe = {};
ImageMachine.prototype.PhotoSwipe_Products = {};
ImageMachine.prototype.PhotoSwipe.element = document.querySelectorAll('.pswp')[0];
ImageMachine.prototype.PhotoSwipe.options = {
index: 0,
bgOpacity: 0.7,
loop: true,
closeOnScroll: false,
timeToIdle: 10000
};
ImageMachine.prototype.PhotoSwipe_Update = function(product_code){
ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery = new PhotoSwipe( ImageMachine.prototype.PhotoSwipe.element, PhotoSwipeUI_Default, ImageMachine.prototype.PhotoSwipe_Products[product_code].images, ImageMachine.prototype.PhotoSwipe.options);
ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery.listen('afterChange', function(a,b,c) {
var thumbnailIndex = ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery.getCurrentIndex() + 1;
$('#thumbnails > div:nth-child(' + thumbnailIndex + ')').trigger('click');
});

ImageMachine.prototype.PhotoSwipe_Products[product_code].gallery.init();

};

ImageMachine.prototype._oninitialize = ImageMachine.prototype.oninitialize;
ImageMachine.prototype.oninitialize = function() {
ImageMachine.prototype.PhotoSwipe_Products[this.product_code] = {
images: [],
gallery: {}
};

ImageMachine.prototype._oninitialize.apply(this, arguments);
};

ImageMachine.prototype._onmainimageclick = ImageMachine.prototype.onmainimageclick;
ImageMachine.prototype.onmainimageclick = function() {
ImageMachine.prototype.PhotoSwipe_Update(this.prod uct_code);
};

ImageMachine.prototype._onthumbnailimageclick = ImageMachine.prototype.onthumbnailimageclick;
ImageMachine.prototype.onthumbnailimageclick = function(data) {
var index = $('[src="' + data.image_data[1] + '"]').parent().index();
ImageMachine.prototype.PhotoSwipe.options.index = index;
ImageMachine.prototype._onthumbnailimageclick.apply(this, arguments);
};

ImageMachine.prototype.ImageMachine_Generate_Thumb nail = function( thumbnail_image, main_image, closeup_image, type_code ) {
var thumbnail,
span,
wrapper,
img;

thumbnail = document.createElement('div');
thumbnail.className = 'item';
span = document.createElement('span');
wrapper = document.createElement('div');
wrapper.classList.add('col-xs-12', 'col-sm-6', 'col-md-2');

thumbnail.appendChild(span);
thumbnail.appendChild(wrapper);

ImageMachine.prototype.PhotoSwipe_Products[this.product_code].images.push({
src: closeup_image,
w: 818,
h: 1000
});

if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
img = document.createElement('img');
img.src = thumbnail_image;

wrapper.appendChild(img);
}

return thumbnail;
};

The generated result:

<div class="thumbnails carousel carousel-showmanymoveone slide">
<div id="thumbnails" class="carousel-inner">
<div class="item"> <-- This div needs the active class added to it
<span></span>
<div class="col-xs-12 col-sm-6 col-md-2">
<img src="graphics/00000001/8/image_82x100.jpg">
</div>
</div>
<div class="item">
<span></span>
<div class="col-xs-12 col-sm-6 col-md-2">
<img src="graphics/00000001/8/image2_82x100.jpg">
</div>
</div>
...
</div>
</div>

Is what I'm trying to do even possible? Or do I need to bail on this approach and try something else?