I've got a carousel that has a width:100% and a height:831px on a fluid layout. I am having problems centering the images that are 3600px wide by 831px high. I need the images to be centered on all viewport widths and resolutions.
I've tried to use transform:translateX, but the images always end up at left:0.
This is what I have:
<div class="mainTopVisual clearfix">
<div id="m_top-visual" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#m_top-visual" data-slide-to="0" class="active"></li>
<li data-target="#m_top-visual" data-slide-to="1"></li>
<li data-target="#m_top-visual" data-slide-to="2"></li>
<li data-target="#m_top-visual" data-slide-to="3"></li>
<li data-target="#m_top-visual" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/main/j1.jpg" alt="First slide">
</div>
<div class="item">
<img class="second-slide" src="images/main/j2.jpg" alt="Second slide">
</div>
<div class="item">
<img class="third-slide" src="images/main/j3.jpg" alt="Third slide">
</div>
<div class="item">
<img class="forth-slide" src="images/main/j4.jpg" alt="Forth slide">
</div>
<div class="item">
<img class="fifth-slide" src="images/main/j5.jpg" alt="Fifth slide">
</div>
</div>
<a class="left carousel-control" href="#m_top-visual" role="button" data-slide="prev">
<span class="main_top-visual flaticon-left-arrow" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#m_top-visual" role="button" data-slide="next">
<span class="main_top-visual flaticon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div id="carouselButtons">
<button id="playButton" type="button" class="btn btn-default">
<span class="flaticon-arrows-3"></span>
</button>
<button id="pauseButton" type="button" class="btn btn-default">
<span class="flaticon-pause-bars"></span>
</button>
</div>
</div><!-- /.carousel -->
</div>
and this is the CSS:
<style>
div.mainTopVisual{
margin-top:0;
padding-top:0;
padding-bottom:0;
}
.m_top-visual_inner{
width:100%;
margin:0;
position:relative;
}
.carousel {
height: 831px;
margin-bottom:0;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;}
.carousel .item {
height: 831px;
width:3600px;
background-color: #000;
}
.carousel-inner > .item > img {
position: absolute;
width:3600px;
height:831px;
top:0;
left:50%;
transform:translate(-50%, 0);
max-width:none;
}
</style>
Thank you very much in advance for your help.
