Align Bootstrap Carousel Image

Question

I'm using a Bootstrap carousel to display images and their respective captions. 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.

CSS code...

 .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?

The obj parameter is contains the image src, caption details. The values are being returned by an ajax function being called to the back-end service.

HTML Code..

     <!-- 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>

Insomniac Insomniac · Accepted Answer · 2016-02-05T07:05:02

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

  .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

Align Bootstrap Carousel Image

1 Answers