时间戳

首页 > 解决方案 > 如何在 Materialise 3-D carousel 中添加任何图像？

javascript - 如何在 Materialise 3-D carousel 中添加任何图像？

问题描述

我一直在做一个需要 3-d 轮播的项目，所以我决定借助 Materialize 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>

这是我试过的，

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

但是上面的代码只是将图像重叠在轮播顶部，甚至没有随着轮播幻灯片移动。

有人可以帮忙吗？

标签： javascripthtmlcsscarouselmaterialize

解决方案

  • 确保您已包含 materialize javascript 和 jQuery 。
  • jQuery 必须在物化 javascript 之上。

* 在物化中你必须通过 jQuery 的 javascript 来初始化 cousel

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

  // Or with jQuery

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

* 添加新的 cousel-item 并在将其附加到祖父母后重新初始化它...

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

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

推荐阅读