Question

我正在尝试在此页面上显示一个自动幻灯片旋转木板，其中包含2个激活/显示图像且没有箭头（右侧的品牌徽标，如果向下滚动几个px）：http://www.videoboost.de/#anfrage

不幸的是我无法找到解决方案。这是我当前的代码，当然不起作用，因为数据目标是用于按箭头。你能帮助我或提出任何建议吗？非常感谢你！

＆＃13;

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
</head> <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
  </div>

  <div class="item">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/09/JPmorgan.png" alt="b" height="71">
  </div>

  <div class="item">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/rheinland-logo.png" alt="c" height="71">
  </div>

  <div class="item">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/09/BarmerGEK.png" alt="d" height="71">
  </div>
</div>
</div>

＆＃13;

Answer 1

所以你的代码中有一些问题 -

您忘了关闭head代码。
您没有添加jquery和bootstrap js这些是制作轮播所需的库。

在轮播幻灯片中显示两个图像使用引导响应类。以下列方式 -

<div class="row">
<div class="col-xs-6">
<img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
</div>
     <div class="col-xs-6">
     <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
     </div>
     </div>

工作代码段

＆＃13;

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head> <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
  <div class="row">
  <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
    </div>
    
  <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
    </div>
    </div>
  </div>

  <div class="item">
  <div class="row">
  <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/09/JPmorgan.png" alt="b" height="71">
    </div>
     <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
    </div>
    </div>
  </div>

  <div class="item">
  <div class="row">
   <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/rheinland-logo.png" alt="c" height="71">
    </div>
     <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/10/bmw-logo.png" alt="a" height="71">
    </div>
    </div>
  </div>

  <div class="item">
  <div class="row">
   <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/09/BarmerGEK.png" alt="d" height="71">
    </div>
    <div class="col-xs-6">
    <img src="http://www.videoboost.de/wp-content/uploads/2016/09/BarmerGEK.png" alt="d" height="71">
    </div>
   </div> 
  </div>
</div>
</div>

＆＃13;

希望这有帮助！

没有箭头和自动滑动的Bootstrap旋转木马

1 个答案: