Как я могу отобразить изображения из пожарного магазина на слайдер карусели? - PullRequest
Новая
       75

Как я могу отобразить изображения из пожарного магазина на слайдер карусели?

0 голосов
/ 02 мая 2020

У меня есть 3 изображения в массиве изображений в моей базе данных firestore. Однако, когда я меняю $ {info.image [0]} на $ {info.image 1 }, отображается следующее изображение. Как я могу собрать их все вместе, и когда я нажимаю на следующую кнопку, я перехожу к следующему изображению? Это изображение моей базы данных и моего сайта

Это мой код: 

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

1 Ответ

0 голосов
/ 03 мая 2020

Мне удалось это сделать, для тех, у кого такая же проблема, вот как вы это делаете: 

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> 
 ...
...