引导轮播：无法读取未定义的属性“offsetWidth”答案

【问题标题】：Bootstrap Carousel: Cannot read property 'offsetWidth' of undefined引导轮播：无法读取未定义的属性“offsetWidth”
【发布时间】：2017-03-31 19:20:04
【问题描述】：

我正在使用引导轮播，并想出了一个函数来生成 carousel-inner 中的“项目”，它可以按预期工作。

当用户单击页面上的许多图片之一时，我会全屏显示轮播并使用该文件夹中的其他图像填充它（每个图像都有自己的文件夹，其中包含与之相关的额外图像）。

但是，在我单击图片的 5 次中，大约有 1 次可以全屏查看第一项，但控件不起作用（并且我得到未定义的“无法读取属性 'offsetWidth' ' 控制台上的错误）。奇怪的是，如果我再次尝试单击同一张图片，它会正常工作。

HTML

<div class="row carousel-holder" id="fotenha2">
  <div class="col-md-12" id="carCol">
    <div id="banners" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox" id="carCont" oncontextmenu="return false;">  
      </div>
      <a class="left carousel-control" href="#banners" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden:"true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#banners" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden:"true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>        
</div>

JavaScript

function createCarousel(folder, items) {
  for (var i=1; i<=items; i++) {
    var content = document.getElementById('travelCont');
    var imageCont = document.getElementById('fotenha2');
    imageCont.style.display = "block";
    content.style.display = "none";
    var path = 'assets/travel/'+folder+'/000'+i+'.jpg';
    var item = document.createElement("DIV");
    var anchor = document.createElement("a");
    var img = document.createElement("IMG");
    img.className="slide-image";
    img.src = path;
    anchor.appendChild(img);
    anchor.href = "";
    item.appendChild(anchor);
    item.className="item"; 
    if (i === 1) {
      item.className = "item active"; 
    }
  item.onclick="closeTravelArticle()";
  document.getElementById('carCont').appendChild(item);
  }
}

任何关于为什么会发生这种情况的想法都会非常有帮助。

PS：像我这样的其他问题的解决方案是在第一个项目中添加“活动”，我已经在这样做了

【问题讨论】：

标签： javascript html css twitter-bootstrap carousel

【解决方案1】：

我建议使用AngularJS，他们有一个很好的功能，您可以使用称为ng-repeat。您所需要的只是一个包含您的数据的对象以及您想要重复的元素上的 ng-repeat。

var app = angular.module("app", []); 
app.controller("myCtrl", function($scope) {
    $scope.items = {
      0 : {
        'id' : 1,
        'name' : 'Item 1'
      },
      1 : {
        'id' : 2,
        'name': 'Item 2'
      }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in items" id="{{ x.id }}">{{ x.name }}</li>
  </ul>
</div>

我根据自己的经验建议这样做。我现在正在使用 AngularJS 创建多个项目，我认为它是最好的框架之一。另外，对于我的一个项目，我想和你做同样的事情，这对我来说效果很好。

【讨论】：