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

Question

我一直在做一个需要 3-d 旋转木马的项目，所以我决定借助 Materialise CSS，但我面临使用 javascript。我想在 class “carousel-item” 的 div 下附加一张图像，该图像位于 class “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.

* 在实体化中，您必须通过 javascript of jQuery

来初始化 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-item 和 re-initialize 它在祖父母中追加后...

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

我已经尝试过了，如果对您不起作用，请在评论中告诉...

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

How to add any image in the Materialize 3-D carousel?

html

javascript

css

carousel

materialize

* 在实体化中，您必须通过 javascript of jQuery

* 添加新的 crousel-item 和 re-initialize 它在祖父母中追加后...