Question

我使用Bootstrap轮播来显示图像及其各自的标题。图像可以是肖像，风景。

我能够在旋转木马中正确显示风景图像，其标题如下所示。在肖像图像的情况下，我试图将中心图像向右对齐，以使其不与标题重叠。我更改了文件 bootstrap.min.css 中的CSS属性，但它无法正常工作。

CSS代码 ...

 .carousel-inner {
  position: relative;
  align: right;
  width: 100%;
  overflow: hidden;

知道如何在不影响其他2张图像的情况下将肖像图像对齐吗？

obj参数包含图像src，标题详细信息。这些值是由调用后端服务的ajax函数返回的。

HTML代码..

     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
     <div id="carouselObject">
            <div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000">    <!--data-interval= 5000 seconds-->  
                <div class="carousel-inner" role="listbox" id="carouselinner">

                </div>

                <a class="left carousel-control" href="#/carousel-example-generic" role="button">               <!--data-slide="prev"-->
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></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" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

Answer 1

我为类似的轮播滑块创建了代码笔。看看它对你有帮助。

   <head> <link rel="stylesheet"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="carosel-example">
   <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
     <ol class="carousel-indicators">
    <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
    <li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
  </ol>
     <div class="carousel-inner">
     <div class="item active">
     <img   alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
      <div class="carousel-caption">
        <h3>First slide </h3>
        <p> ContentContentContentContentContentContent</p>
      </div>
    </div>
    <div class="item">
      <img   alt="900x500" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
      <div class="carousel-caption">
        <h3>Second slide</h3>
        <p>Content</p>
      </div>
    </div>
    <div class="item">
      <img    src="http://a.static.trunity.net/files/299501_299600/299598/vertical-farming-chris-jacobs.jpg">
      <div class="carousel-caption">
        <h3>Third slide</h3>
        <p>Content</p>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

///// CSS代码在这里

  .carousel-caption {
   color: #000;
  }.carosel-example, .new-caption-area {
width: 600px;
margin: auto;
color: #000;
 }

////////////// JS CODE

jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.new-caption-area').html(caption.html());
caption.css('display', 'none');

$(".carousel").on('slide.bs.carousel', function (evt) {
    var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
    $('.new-caption-area').html(caption.html());
    caption.css('display', 'none');
});
});

http://codepen.io/srinivasr/pen/EPdxKG

对齐Bootstrap Carousel图像

1 个答案: