I’m using a bootstrap carousel and I can’t figure out how to position the image to the right side so that as the page resizes it always shows the right side and not the left.
Usually I would use background images and do something like:
background-position: left bottom ;
So when it’s not a background image how to you set the image to position to the right as the page width reduces?
here is the html for the slider
<div id=”main-slider” class=”carousel slide” data-ride=”carousel”>
<!– Wrapper for slides –>
<div class=”carousel-inner” role=”listbox”>
<div class=”item active ” id=”slide-1″>
<img class=”img-responsive” src=”assets/images/banners/banner_home.jpg” alt=””>
<div class=”carousel-caption”>
<h1 class=”gray light-shadow banner-page-title”><span class=””>lorum ipsom</span></h1>
</div>
</div>
<div class=”item” id=”slide-2″>
<img class=”img-responsive” src=”assets/images/banners/banner_autoaccidents-2.jpg” alt=”…”>
<div class=”carousel-caption”>
<h1 class=”gray light-shadow banner-page-title”>lorum ipsom</h1>
<h1 class=”red banner-slogan”>lorum ipsom</h1>
</div>
</div>
</div>
<!– Controls –>
<a class=”left carousel-control” href=”#main-slider” 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=”#main-slider” role=”button” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
here is a link:
http://healthsource.swasiv.com
