引导程序3:第一个和最后一个项目的徒步旅行转盘控件不起作用

Bootstrap 3: Hidding carousel controls on first and last items not working

本文关键字：徒步旅行 控件 不起作用 项目 第一个 最后一个 引导程序      更新时间：2023-09-26

我确实从netgloo 获得了JS代码

JS:

var checkitem = function() {
    var $this;
    $this = $("#");
    if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
      $this.children(".left").hide();
      $this.children(".right").show();
    } else if ($("#diapos .carousel-inner .item:last").hasClass("active")) {
      $this.children(".right").hide();
      $this.children(".left").show();
    } else {
      $this.children(".carousel-control").show();
    }
  };
  checkitem();
  $("#diapos").on("slid.bs.carousel", "", checkitem);

HTML:

  <div id="diapos" class="carousel paper2 slide" data-ride="carousel">
    <!-- diapos -->
    <div class="carousel-inner" role="listbox">
      <div class="overlay"></div>
      <div class="item active" id="first">
        <img src="img/01.jpg" alt="...">
      </div>
      <div class="item" id="second">
        <img src="img/02.jpg" alt="...">
      </div>
      <div class="item" id="last">
        <img src="img/03.jpg" alt="...">
       </div>
    </div>
</div>

    <a class="left carousel-control" href="#diapos" 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="#diapos" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>

该代码没有隐藏相应的控件。

文档中没有其他转盘。

顺便问一下，这段HTML的功能是什么？：

<div class="overlay"></div>
转盘div的id是"diapos"。因此，第三行上的这个应该分配给那个，因为"左"answers"右"是它的直接子项： 
  var checkitem = function() {
  var $this;
  $this = $("#diapos");  // this line needs to be changed
  if ($("#diapos .carousel-inner .item:first").hasClass("active")) {
    $this.children(".left").hide();
     //continue as before from here

此外，您可能忘记关闭"diapos"div！

相关文章：