对齐Bootstrap轮播图片

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代码

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轮播图片

问题描述

1 个解决方案

解决方案1
0 2016-02-05 07:05:02

对齐Bootstrap轮播图片

问题描述

1 个解决方案

解决方案1 0 2016-02-05 07:05:02

解决方案1
0 2016-02-05 07:05:02