如何为带有 JPEG / PNG 图像的轮播添加边框

Question

我想在平板电脑或手机或我拥有的其他图片边框内查看轮播显示。有没有办法放置它？

Answer 1

如果我正确理解了你的问题，那么你想要运行 bootstrap 像平板电脑这样的图像包装器中的旋转木马。为此，您可以给包装器 div 一个 background-image 并将轮播代码放入其中。

您可以在 fiddle、http://jsfiddle.net/xxjrk3Lq/1/

中查看我创建的示例

基本上，您可以使用如下内容，在 HTML、

<div class="bg-image">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://www.hdwallpapers.in/walls/tree_beach_side-wide.jpg" alt="...">
          <div class="carousel-caption">
            First slide label
          </div>
        </div>
        <div class="item">
          <img src="http://www.freedomwallpaper.com/nature-wallpaper/nature-hd-wallpapers-water.jpg" alt="...">
          <div class="carousel-caption">
            Second slide label
          </div>
        </div>
      </div>

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

在CSS,

.bg-image{
    width:400px;
    height:400px;
    background-image:url('http://pngimg.com/upload/tablet_PNG8592.png');
    background-repeat:no-repeat;
    background-size:100%;
    padding: 29px 32px;
}
.carousel-inner>.item>a>img, 
.carousel-inner>.item>img{
     height: 222px;   
}

并在 javascript、

中初始化轮播

$('.carousel').carousel();

如何为带有 JPEG / PNG 图像的轮播添加边框

How to add a border for carousel with JPEG / PNG image

html

css

carousel

twitter-bootstrap