Bootstrap Carousel图像之间的间距

时间:2017-02-21 20:45:05

标签: twitter-bootstrap carousel

我是一名自助新手,我的编程技巧非常基础。我想开发一个带引导程序的小型投资组合网站。但是我遇到了一个小问题:有没有办法在引导转盘的每个图像之间加一个10 px的小间隙?

非常感谢任何帮助。

谢谢

1 个答案:

答案 0 :(得分:0)

您可以直接设置引导类的样式。



var items = document.getElementsByClassName('item');

var timer = setInterval(function() {
  for(var i = 0, len = items.length; i < len; i++) {
    if(items[i].classList.contains('active')) {
      items[i].classList.remove('active');
      
      if(i+1 >= len) {
         items[0].classList.add('active');
      }
      else {
        items[i+1].classList.add('active');
      }
    }
    
  }
}, 3000);
&#13;
#carousel img {
  padding: 10px;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="carousel" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="http://placecage.com/1000/1000" alt="...">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="http://placecage.com/750/1000" alt="...">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item active">
      <img src="http://placecage.com/gif/1000/1000" alt="...">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.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>
&#13;
&#13;
&#13;