Галерея изображений Carousal Issue

Question

Я сталкиваюсь с проблемой карусели галереи изображений при использовании Bootstrap 4, которая отлично работает в Bootstrap 3. Я прилагаю скриншоты галереи изображений BS3 и BS4 соответственно

Javascript / Jquery

var sliderImages = document.getElementById('thumbImages').getElementsByTagName("img");
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].onmouseover = function() {
this.style.cursor = "hand";
this.style.borderColor = "red";
this.style.borderWidth = "2px"
}
sliderImages[i].onmouseout = function() {
this.style.cursor = "pointer";
this.style.borderColor = "grey"
}
}

function changeImg(event) {
event = event || window.event;
var targetElement = event.target || window.srcElement;
if (targetElement.tagName == "IMG") {
document.getElementById("mainImage").src = targetElement.getAttribute("src")
}
}

$('#myCarousel').carousel({
interval: !1
})
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first')
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first')
}
next.children(':first-child').clone().appendTo($(this))
}
});