Javascript 如何在Materialize 3D旋转木马中添加任何图像？

我一直在做一个需要三维旋转木马的项目，所以我决定借助物化CSS，但我面临着一个问题，那就是使用javascript向其中添加任何图像。 我想在“carousel”类div下的“carousel item”类div下添加一个图像到以下代码中

    <div class="carousel" id="grandparent"> 
        <div class="carousel-item"><img src="image1.jpg" name="image-1"></div>
        <div class="carousel-item"><img src="image2.png" name="image-2"></div>
        <div class="carousel-item"><img src="image3.jpg" name="image-3"></div>
        <div class="carousel-item"><img src="image4.jpg" name="image-4"></div>
        <div class="carousel-item"><img src="image5.jpeg" name="image-5"></div>
        <div class="carousel-item"><img src="image6.jpg" name="image-6"></div>
    </div>

但是上面的代码只是重叠了旋转木马顶部的图像，甚至没有与旋转木马幻灯片一起移动

有人能帮忙吗？

• 确保已包含MaterializeJavaScript和jQuery
• jQuery必须位于MaterializeJavaScript之上

*在materialize中，必须使用jQuery的javascript初始化crousel

document.addEventListener（'DOMContentLoaded'，function（）{
var elems=document.querySelectorAll（'.carousel'）；
var实例=M.Carousel.init（元素、选项）；
});
//或者使用jQuery
$（文档）.ready（函数（）{
$（'.carousel'）.carousel（）；
});

*添加新的crousel项，并在将其附加到“祖父母”中后重新初始化它。。。

var divmain=document.getElementById（“祖父母”）；
var newdiv=document.createElement（“div”）；
newdiv.classList.add（'carousel-item'）；
var image=document.createElement（“img”）；
image.src=”https://lorempixel.com/250/250/nature/3";
setAttribute（“名称”、“图像7”）；
newdiv.appendChild（图像）；
divmain.appendChild（newdiv）；
//重新初始化克劳塞尔
var elems2=document.querySelectorAll（'.carousel'）；
var instances2=M.Carousel.init（elems2）；

我已经试过了，如果不适合你，请在评论中告诉我…

• 确保已包含MaterializeJavaScript和jQuery
• jQuery必须位于MaterializeJavaScript之上

*在materialize中，必须使用jQuery的javascript初始化crousel

document.addEventListener（'DOMContentLoaded'，function（）{
var elems=document.querySelectorAll（'.carousel'）；
var实例=M.Carousel.init（元素、选项）；
});
//或者使用jQuery
$（文档）.ready（函数（）{
$（'.carousel'）.carousel（）；
});

*添加新的crousel项，并在将其附加到“祖父母”中后重新初始化它。。。

var divmain=document.getElementById（“祖父母”）；
var newdiv=document.createElement（“div”）；
newdiv.classList.add（'carousel-item'）；
var image=document.createElement（“img”）；
image.src=”https://lorempixel.com/250/250/nature/3";
setAttribute（“名称”、“图像7”）；
newdiv.appendChild（图像）；
divmain.appendChild（newdiv）；
//重新初始化克劳塞尔
var elems2=document.querySelectorAll（'.carousel'）；
var instances2=M.Carousel.init（elems2）；

---

我已经试过了，如果对你不起作用，那么请在评论中告诉我…

我只面临一个问题，添加的图像不会固定到旋转木马上吗？因为当我刷新网页时，它不见了，为什么会发生这种情况@AnuragDo help@AnuragKumarRemember您正在使用javascript在html中动态插入该元素，而不更改主html文件。在您刷新之前，此更改暂时在浏览器中。所以，我们是否有任何代码来执行此操作，因为我需要在我的项目中添加此功能@AnuragKumar将此代码存储在javascript文件中，然后将其连接到html。每次加载javascript运行的html时，我都会遇到一个问题，添加的图像不会被固定到旋转木马上，因为当我刷新网页时，它就消失了，为什么会发生这种情况@AnuragDo help@AnuragKumarRemember您正在使用javascript在html中动态插入该元素，而不更改主html文件。在您刷新之前，此更改暂时在浏览器中。所以，我们是否有任何代码来执行此操作，因为我需要在我的项目中添加此功能@AnuragKumar将此代码存储在javascript文件中，然后将其连接到html。然后，每次加载html时，javascript都会运行。

var divmain=document.getElementById("grandparent");    
var newdiv=document.createElement("div");    
newdiv.className+="carousel-item";   
divmain.appendChild(newdiv);   
var image=document.createElement("img");    
image.setAttribute("src","image7.jpeg");    
image.setAttribute("name","image7");    
newdiv.appendChild(image);