Блог

Главная - Вопросы по программированию - Как добавить любое изображение в карусель Materialize 3-D?

Как добавить любое изображение в карусель Materialize 3-D?

#javascript #html #css #carousel #materialize

#javascript #HTML #css #карусель #материализовать

Вопрос:

Я работал над проектом, для которого требуется трехмерная карусель, поэтому я решил воспользоваться помощью Materialize CSS, но я столкнулся с проблемой добавления к нему любого изображения с помощью javascript. Я хотел добавить изображение под div класса «carousel-item», которое находится под div класса «carousel», в следующий код,

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

Но приведенный выше код просто перекрывает изображение в верхней части карусели и даже не перемещается вместе со слайдом карусели.

Кто-нибудь может помочь?

Ответ №1:

  • Убедитесь , что вы включили materialize javascript и jQuery .
  • jQuery должен быть выше materialize javascript.

* В materialize вы должны инициализировать crousel с помощью javascript из jQuery

 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 и повторно инициализируйте его после добавления в grandparent…

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

Я пробовал, это работает, если у вас не сработало, тогда сообщите в комментарии…

Комментарии:

1. Есть только одна проблема, с которой я сталкиваюсь: не будет ли добавленное изображение прикреплено к карусели, потому что, когда я обновляю веб-страницу, оно исчезает, почему это происходит? @Anurag

2. Пожалуйста, помогите @AnuragKumar

3. Помните, что вы вставляете этот элемент динамически в html с помощью javascript, не изменяя основной html-файл. Это изменение временно в браузере, пока вы его не обновите

4. Итак, разве у нас нет никакого кода для этого, потому что мне нужно добавить эту функцию в мой проект? @AnuragKumar

5. Создайте этот код в файле javascript, а затем подключите его к html. Затем каждый раз , когда вы загружаете html , запускается javascript .