时间戳

首页 > 解决方案 > 从 javascript 创建 Bootstrap 轮播项目

javascript - 从 javascript 创建 Bootstrap 轮播项目

问题描述

我已经能够创建一个显示加载数据列表的页面。其中一些数据有 YouTube 链接。

我希望能够在引导轮播中显示视频，但我很难理解如何使用我使用的当前 JS 来做到这一点。在这里查看完整的小提琴：http: //jsfiddle.net/cpoxy235/

HTML

<html>
  <body>
    <h6>Youtube</h6>
    <div class="list-group container" id="ytgroup"></div>

    <h6>Articles</h6>
    <div class="list-group container" id="argroup"></div>
  </body>
</html>

Javascript

var data = [{
  "title": "Ligo First Light",
  "date": "2012-06-23",
  "category": "scheduled",
  "wikipedia": "The first direct observation of gravitational waves was made on 14 September 2015 and was announced by the LIGO and Virgo collaborations on 11 February 2016.[3][4][5] Previously, gravitational waves had only been inferred indirectly, via their effect on the timing of pulsars in binary star systems. The waveform, detected by both LIGO observatories,[6] matched the predictions of general relativity[7][8][9] for a gravitational wave emanating from the inward spiral and merger of a pair of black holes of around 36 and 29 solar masses and the subsequent ringdown of the single resulting black hole.[note 2] The signal was named GW150914 (from Gravitational Wave and the date of observation 2015-09-14).[3][11] It was also the first observation of a binary black hole merger, demonstrating both the existence of binary stellar-mass black hole systems and the fact that such mergers could occur within the current age of the universe.",
  "youtube": [{
      "publishDate": "1976-03-04T04:19:34.259Z",
      "url": "https://www.youtube.com/embed/B4XzLDM3Py8"
    },
    {
      "publishDate": "1976-03-04T04:19:34.259Z",
      "url": "https://www.youtube.com/embed/CKynfOx3-ac"
    }
  ],
  "articles": [{
      "title": "Observation of Gravitational Waves from a Binary Black Hole Merger",
      "publishDate": "1976-03-04T04:19:34.259Z",
      "url": "https://physics.aps.org/featured-article-pdf/10.1103/PhysRevLett.116.061102"
    },
    {
      "title": "First observation of gravitational waves",
      "publishDate": "1997-11-03T10:03:39.123Z",
      "url": "https://en.wikipedia.org/wiki/First_observation_of_gravitational_waves"
    },
    {
      "title": "Gravitational Waves Detected 100 Years After Einstein's Prediction",
      "publishDate": "1997-11-03T10:03:39.123Z",
      "url": "https://www.ligo.caltech.edu/news/ligo20160211"
    }
  ]
}];


function getArrayByName(name) {
  return data.filter(
    function(item) {
      return item[name];
    }
  )[0][name];
}

var youtube = getArrayByName('youtube');
var article = getArrayByName('articles');



for (var r in youtube) {

   var tag = document.createElement("div");
   var text = document.createTextNode(youtube[r].url);
   tag.appendChild(text);
   
   var element = document.getElementById("ytgroup");
   element.appendChild(tag);


}

for (var r in article) {


   var tag = document.createElement("p");
   var text = document.createTextNode(article[r].url);
   tag.appendChild(text);
   
   var element = document.getElementById("argroup");
   element.appendChild(tag);
}

我确实有一个我已经设置但未添加到小提琴中的轮播示例：

<div class="carousel-inner">
  <div class="carousel-item active">
    <div class="media border p-3">
      <div class="media-body" align="center">
        <iframe width="320" height="240" src="https://www.youtube.com/embed/PJ_GI4jdpfE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </div> 
  <div class="carousel-item">
    <div class="media border p-3">
      <div class="media-body" align="center">
        <iframe width="320" height="240" src="https://www.youtube.com/embed/Uw21ROAGSOA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </div>    

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#soeulSlider" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#soeulSlider" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

标签： javascriptjsonbootstrap-4

解决方案

您可以轻松地用类包装 carousel，并确保carousel-item的第一个 div 在map()方法的帮助下应该有活动类，如下面的代码片段。

var data = [{
  "title": "Ligo First Light",
  "date": "2012-06-23",
  "category": "scheduled",
  "wikipedia": "The first direct observation of gravitational waves was made on 14 September 2015 and was announced by the LIGO and Virgo collaborations on 11 February 2016.[3][4][5] Previously, gravitational waves had only been inferred indirectly, via their effect on the timing of pulsars in binary star systems. The waveform, detected by both LIGO observatories,[6] matched the predictions of general relativity[7][8][9] for a gravitational wave emanating from the inward spiral and merger of a pair of black holes of around 36 and 29 solar masses and the subsequent ringdown of the single resulting black hole.[note 2] The signal was named GW150914 (from Gravitational Wave and the date of observation 2015-09-14).[3][11] It was also the first observation of a binary black hole merger, demonstrating both the existence of binary stellar-mass black hole systems and the fact that such mergers could occur within the current age of the universe.",
  "youtube": [{
      "publishDate": "1976-03-04T04:19:34.259Z",
      "url": "https://www.youtube.com/embed/B4XzLDM3Py8"
    },
    {
      "publishDate": "1976-03-04T04:19:34.259Z",
      "url": "https://www.youtube.com/embed/CKynfOx3-ac"
    }
  ],
  "articles": [{
      "title": "Observation of Gravitational Waves from a Binary Black Hole Merger",
      "publishDate": "1976-03-04T04:19:34.259Z",
      "url": "https://physics.aps.org/featured-article-pdf/10.1103/PhysRevLett.116.061102"
    },
    {
      "title": "First observation of gravitational waves",
      "publishDate": "1997-11-03T10:03:39.123Z",
      "url": "https://en.wikipedia.org/wiki/First_observation_of_gravitational_waves"
    },
    {
      "title": "Gravitational Waves Detected 100 Years After Einstein's Prediction",
      "publishDate": "1997-11-03T10:03:39.123Z",
      "url": "https://www.ligo.caltech.edu/news/ligo20160211"
    }
  ]
}];


data[0].youtube.map(function(h,i){
    $('#ytgroup').append(`
        <div class="carousel-item `+(i==0?'active':'')+`">
            <div class="media rounded border p-3 bg-white">
          <div class="media-body" align="center">
            <iframe width="320" height="240" src="`+h.url+`" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <h6 class="mt-2">`+h.publishDate+`</h6>
          </div>
        </div>
        </div>`)
});

data[0].articles.map(function(h,i){
    $('#argroup').append(`
        <div class="carousel-item `+(i==0?'active':'')+`">
            <div class="border rounded p-3 bg-white">
                <a href="`+h.url+`" class="h4" target="_blank">`
                    +h.title+
                `</a>
                <h6 class="mt-2">`+h.publishDate+`</h6>
            </div>
        </div>`)
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
   <div class="row pt-3">
    <div class="col my-3">
       <div class="d-flex align-items-center justify-content-between pb-1">
          <h5 class="m-0">Youtube</h5>
           <div>
              <button class="btn btn-outline-secondary py-0 font-weight-bold" data-slide="prev" data-target="#carouselYoutube">&#8249;</button>
                    <button class="btn btn-outline-secondary py-0 font-weight-bold" data-slide="next" data-target="#carouselYoutube">&#8250;</button>
                </div>
            </div>
            <div id="carouselYoutube" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" id="ytgroup"></div>
            </div>
        </div>

        <div class="col my-3">
            <div class="d-flex align-items-center justify-content-between pb-1">
                <h5 class="m-0">Articles</h5>
                <div>
                    <button class="btn btn-outline-secondary py-0 font-weight-bold" data-slide="prev" data-target="#carouselArticles">&#8249;</button>
                    <button class="btn btn-outline-secondary py-0 font-weight-bold" data-slide="next" data-target="#carouselArticles">&#8250;</button>
                </div>
            </div>
            <div id="carouselArticles" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" id="argroup"></div>
            </div>
            </div>
        </div>
</div>

推荐阅读