欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

bootstrap 5 carousel carousel——當我使用JavaScript向& ltdiv class = & quot旋轉木馬-內部& quot& gt

CSS
謝彥文1年前7瀏覽0評論

我能夠讓Bootstrap 5 carousel和carousel-caption在具有多個& ltdiv class & quotitem & quot& gt這是一個包含靜態內容的頁面，它工作正常。

<div class="carousel-inner">
    <div class="item active">
    <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="Los Angeles" style="width:100%;">
    <div class="carousel-caption">
       <h3>CAPTION 1123</h3>
       <p>LA is always so much fun!</p>
    </div>
    </div>
   <div class="item">
     <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="Chicago" style="width:100%;">
  <div class="carousel-caption">
    <h3>CAPTION 235</h3>
    <p>OC is always so much fun!</p>
  </div>
</div>

<div class="item">
  <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="Chicago" style="width:100%;">
  <div class="carousel-caption">
       <h3>CAPTION 555</h3>
    <p>SD is always so much fun!</p>
   </div>
   </div>
</div>

但是如果我把這一頁換成

<div class="carousel-inner">

</div>

然后我填充了div class = & quotitem & quot使用PHP從mysql數據庫獲取動態內容。 然后我使用JavaScript將所有的div class = & quotitem & quot如下所述:

const divBtag = index === 0 ? '<div class="carousel-item active">' : '<div class="carousel-item">';
      //const divBtag = '<div class="carousel-item">';
         var photoHtml =
                        divBtag +
                           '<img src="' + photo.photo_path + '" class="d-block" 
                            style="width:100%" />' +
                        '</div>' +
                         '<div class="carousel-caption">'  +
                             '<h5>' + photo.photo_description + '</h5>' +
                             '<p>' + photo.photo_datetime + '</p>' +
                         '</div>' +
                       '</div>';
      

            $('.carousel-inner').append(photoHtml);

& quot旋轉式字幕& quot文本在& quoth3 & quot標簽將顯示與項目0和項目1重疊，只有最后的項目2工作正常。和& quotp & quot標簽還顯示與項目0和項目1重疊的文本，只有最后一個項目2工作正常。這是解決問題的方法嗎？

在& quoth5 & quot和& quotp & quot標記解決了文本重疊的問題。

const divBtag = (index === 0) ? '<div class="carousel-item active">' : '<div class="carousel-item">';
  const photoHtml =
  divBtag +
    '<img src="' + photo.photo_path + '" class="d-block" style="width:100%" />' +
   '<div class="carousel-caption">' +
       '<div>' +
          '<h5>' + photo.photo_description + '</h5>' +
          '<p>' + photo.photo_datetime + '</p>' +
       '</div>' +
    '</div>' +
  '</div>';

$('.carousel-inner').append(photoHtml);