对齐Bootstrap轮播图片

Question

I'm using a Bootstrap carousel to display images and their respective captions. 我正在使用Bootstrap轮播显示图像及其相应的标题。 The image can be portrait, landscape. 图像可以是人像，风景。

I'm able to correctly display landscape images in the carousel with their caption below. 我可以正确显示轮播中的风景图像，其标题如下。 In case of Portrait images I'm trying to align the centre image to the right so that it does not overlap with the caption. 对于人像图像，我正在尝试将中心图像向右对齐，以免与标题重叠。 I changed the CSS property in file bootstrap.min.css but it's not working. 我更改了bootstrap.min.css文件中的CSS属性，但是它不起作用。

CSS code ... CSS代码 ...

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

Any idea how to align Portrait image to the right without affecting the other 2 images? 知道如何在不影响其他2张图像的情况下将肖像图像向右对齐吗？

The obj parameter is contains the image src, caption details. obj参数包含图像src，标题详细信息。 The values are being returned by an ajax function being called to the back-end service. 这些值由调用后端服务的ajax函数返回。

HTML Code.. 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

i have created code pen for similar carousel slider. 我已经为类似的轮播滑块创建了代码笔。 have a look at once it may helpful for you. 马上看一下可能对您有帮助。

   <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 code goes here ///// CSS代码在这里

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

////////////// JS CODE ///////////// 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 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