我在使用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))
}
});