Question

我想查看平板电脑或手机内的旋转木马显示或我的其他图片边框。有没有办法放置它？

Answer 1

如果我正确理解了您的问题，那么您希望在平板电脑等图像包装中运行引导程序轮播。为此，您可以为包装器div提供background-image并将轮播代码放入其中。

您可以看到我在小提琴中创建的示例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图像为轮播添加边框

1 个答案: