如何在物化的三维旋转木马中添加任何图像？

Question

我一直在做一个需要三维旋转木马的项目，所以我决定借助物化CSS，但是我面临着使用javascript向它添加任何图像的问题。我想在类"carousel-item“的div下添加一个图片，它位于类"carousel”的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>

这就是我试过的，

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);

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

有人能帮忙吗？

Answer 1

• 确保您包含了物化javascript和jQuery .
• jQuery，必须在物化javascript.

之上。

*在物化过程中，您必须通过jQuery的javascript将crousel初始化

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.carousel').carousel();
  });

*添加新的crousel-项目，并重新初始化它后，附加在祖父母.

 var divmain = document.getElementById("grandparent");
 var newdiv = document.createElement("div");
 newdiv.classList.add('carousel-item');

 var image = document.createElement("img");
 image.src = "https://lorempixel.com/250/250/nature/3";
 image.setAttribute("name","image7");

 newdiv.appendChild(image);

 divmain.appendChild(newdiv);

 // Re intialize crousel
 var elems2 = document.querySelectorAll('.carousel');
 var instances2 = M.Carousel.init(elems2);

我试过了，如果对你不起作用，那就在评论里说.