title: How can i display images from firestore to the carousel slider?
body: <p>I have 3 images in the image array in my firestore database. However, when i change ${info.image[0]} to ${info.image<a href="https://i.stack.imgur.com/ZVZCh.jpg" rel="nofollow noreferrer">1</a>} its displaying the next image. How can i put them all together and when i click on the next button it takes me to the next image? 
  <a href="https://i.stack.imgur.com/ZVZCh.jpg" rel="nofollow noreferrer">This is picture of my database and my website</a></p>
  
  <p>This is my code:</p>
  
  <pre><code>const setupSub = data =&gt; {
  
    const id = window.location.href.split('?')[1];
    data.forEach(doc =&gt; {
      if(doc.id === id) {
      let info = doc.data();
  
  
      let html = `
      &lt;div class="row" &gt;
              &lt;div class="col l6 s12 m12"&gt;
                  &lt;div class="carousel carousel-slider" data-indicators ="true" style="border-radius: 5px;"&gt;
                  &lt;a href="#" class="carousel-item"&gt;
                    &lt;img src="${info.image[0]}" alt="istanbul"  style="height: 390px;"&gt;
                  &lt;/a&gt;
                  &lt;/div&gt;
                    &lt;div class="btn indigo waves-affect prev"&gt;Prev&lt;/div&gt;
                    &lt;div class="btn indigo waves-affect right next"&gt;Next&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col l6 s12 m12"&gt;
                  &lt;div class="card" style="height: 357px; border-radius: 5px; background-color: #f9f9f9; padding: 10px;"&gt;
                        &lt;h5 class="center"&gt;${info.title}&lt;/h5&gt;&lt;br&gt;&lt;br&gt;
                        &lt;span style="font-weight: bold;"&gt;Price: ${info.price} &amp;#36;&lt;/span&gt;&lt;br&gt;&lt;br&gt;
                        &lt;span&gt;&lt;i class="material-icons blue-text"&gt;room&lt;/i&gt; Located in ${info.city}.&lt;/span&gt;&lt;br&gt;&lt;br&gt;
                        &lt;span&gt;&lt;i class="material-icons blue-text"&gt;single_bed&lt;/i&gt; Total Rooms ${info.rooms}.&lt;/span&gt;&lt;br&gt;&lt;br&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
        `;
          // 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;
    }
    })
  }
  </code></pre>