我如何将图像从Firestore显示到转盘滑块？

Question

我的Firestore数据库中的图像数组中有3张图像。但是，当我将$ {info.image [0]}更改为$ {info.image 1}时，它将显示下一个图像。如何将它们放在一起，当我单击下一个按钮时，它将带我到下一张图像？This is picture of my database and my website

这是我的代码：

const setupSub = data => {

  const id = window.location.href.split('?')[1];
  data.forEach(doc => {
    if(doc.id === id) {
    let info = doc.data();


    let html = `
    <div class="row" >
            <div class="col l6 s12 m12">
                <div class="carousel carousel-slider" data-indicators ="true" style="border-radius: 5px;">
                <a href="#" class="carousel-item">
                  <img src="${info.image[0]}" alt="istanbul"  style="height: 390px;">
                </a>
                </div>
                  <div class="btn indigo waves-affect prev">Prev</div>
                  <div class="btn indigo waves-affect right next">Next</div>
            </div>
            <div class="col l6 s12 m12">
                <div class="card" style="height: 357px; border-radius: 5px; background-color: #f9f9f9; padding: 10px;">
                      <h5 class="center">${info.title}</h5><br><br>
                      <span style="font-weight: bold;">Price: ${info.price} &#36;</span><br><br>
                      <span><i class="material-icons blue-text">room</i> Located in ${info.city}.</span><br><br>
                      <span><i class="material-icons blue-text">single_bed</i> Total Rooms ${info.rooms}.</span><br><br>

                </div>
            </div>
    </div>
      `;
        // To activate the image slider (Materialize css)
        $(document).ready(function(){
          $('.carousel').carousel();

          // function for next slide
          $('.next').click(function(){
              $('.carousel').carousel('next');
          });

          // function for prev slide
          $('.prev').click(function(){
              $('.carousel').carousel('prev');
          });
  });


      propShow.innerHTML = html;
  }
  })
}

Answer 1

我设法做到了，对于遇到同样问题的人，这是您的解决方法：

data.forEach(doc => { 
let info = doc.data();  
const images = info.image.map(img => { 
return ` 
<a href="#" class="carousel-item"> <img src=${img} alt="istanbul" style="height: 390px;"> </a> 
}); 
let html = <div class="row" > 
 <div class="col l6 s12 m12"> <div class="carousel carousel-slider";"> ${images.join('')} 
        </div> 
   ```