Coded image carousel isn’t showing images

Hi All,

I have managed to create an image carousel with 3 images wherein each image is displayed by selecting an item in a dropdown menu which sits above the carousel.

I have tested the code in jsfiddle.net and it works, but when I try to implement it in my wordpress test site then none of the images is being displayed.

The code I have used is a combination of html, css and javascript. For the css and javascript code snippets I have used the plugin WPCode. I think the problem has to do with the javascript part but I can’t seem to figure it out.

I hope someone can help.

The code is:

HTML
`<div class=”image-carousel”>
<div class=”carousel-container”>



</div>
<div class=”dropdown-container”>
<select id=”image-dropdown” onchange=”changeImage()”>
<option value=”image1″>Image 1</option>
<option value=”image2″>Image 2</option>
<option value=”image3″>Image 3</option>
</select>
</div>
</div>

CSS
.image-carousel {
position: relative;
width: 100%;
height: 400px;
}

.carousel-container {
position: absolute;
top: 0;
left: 0;
}

.carousel-container img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

.carousel-container img.active {
opacity: 1;
}

.dropdown-container {
position: absolute;
top: 10px;
left: 10px;
}

Javascript
function changeImage() {
var imageDropdown = document.getElementById(“image-dropdown”);
var selectedImage = imageDropdown.value;
var activeImage = document.querySelector(“.carousel-container img.active”);
var newImage = document.getElementById(selectedImage);

activeImage.classList.remove(“active”);
newImage.classList.add(“active”);
}

The page I need help with: [log in to see the link]