I've set up a Bootstrap carousel which shows two slides and then a part of the third slide. If you look at the CodePen I have put a border around the entire carousel and you can see the white-space that needs removing so the carousel can occupy the full width of the page. I want to keep the third item in the carousel only showing a small portion (e.g. a third) but remove the whitespace to the right of it (between the border and the button/third tile) so I can align the carousel with the edges of the page.
I suspect the answer lies with overflow: hidden; but I cannot get it to work. Any help would be much appreciated. CodePen
EDIT
I never managed to fix the issue in bootstrap. However I did redesign it using slick as can be seen here: CodePen. If anyone is wanting to achieve the same effect I would recommend Owl Carousel or Slick. They both scale better too :)
<div class="container" style="display: inline-block; float: right; width:100%">
<div class="row">
<div class="col-md-12 center-block" style="padding-left:0">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><a href="#1">
<div class="content_wrapper">
<div class="panel_wrapper">
<img src="https://drive.google.com/u/0/uc?id=14IIfkms_-_agwa-cV1YZpZ3KSZfSXF7a&export=download" class="img-responsive">
<div class = 'panel'></div>
</div>
<img src="https://drive.google.com/u/0/uc?id=1ZvOZQngzmo8v-a3wk1jTCrt-h9Lq2fqH&export=download" class="img-logo">
<div class = "text_wrapper">
<h4>Pharmaceuticals</h4>
<div class='line'></div>
</div>
</div>
</a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1">
<div class="content_wrapper">
<div class="panel_wrapper">
<img src="https://drive.google.com/u/0/uc?id=1NkiQw07YRxnYhhVFsZ19ygkfGh7CDbqo&export=download" class="img-responsive">
<div class = 'panel'></div>
</div>
<img src="https://drive.google.com/u/0/uc?id=1ZvOZQngzmo8v-a3wk1jTCrt-h9Lq2fqH&export=download" class="img-logo">
<div class = "text_wrapper">
<h4>Toiletries & Cosmetics</h4>
<div class='line'></div>
</div>
</div>
</a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1">
<div class="content_wrapper">
<div class="panel_wrapper">
<img src="https://drive.google.com/u/0/uc?id=1UAIMYCqWqXCuNiauvGLlGhB-eqk0j2pu&export=download" class="img-responsive">
<div class = 'panel'></div>
</div>
<img src="https://drive.google.com/u/0/uc?id=1ZvOZQngzmo8v-a3wk1jTCrt-h9Lq2fqH&export=download" class="img-logo">
<div class = "text_wrapper">
<h4>Food & Drink</h4>
<div class='line'></div>
</div>
</div>
</a></div>
</div>
<div class="item">
<div class="col-xs-4"><a href="#1">
<div class="content_wrapper">
<div class="panel_wrapper">
<img src="https://drive.google.com/u/0/uc?id=14IIfkms_-_agwa-cV1YZpZ3KSZfSXF7a&export=download" class="img-responsive">
<div class = 'panel'></div>
</div>
<img src="https://drive.google.com/u/0/uc?id=1ZvOZQngzmo8v-a3wk1jTCrt-h9Lq2fqH&export=download" class="img-logo">
<div class = "text_wrapper">
<h4>placeholder</h4>
<div class='line'></div>
</div>
</div>
</a></div>
</div>
</div>
<div class="my-right-button">
<div class="greyout"></div>
<a href="#myCarousel" data-slide="next" class="carousel_button right">
<img src="https://drive.google.com/u/0/uc?id=1C97zsCJHIRSOTsl5JSkDfw3IZEBjDYfz&export=download" class='myButton'>
</a>
</div>
</div>
</div>
</div>
</div>
.carousel.slide{
border-style: solid;
}
/* css for custom slide animation, makes every tile just slide one position left*/
.carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
}
/* css for default slide animation
.carousel,
.carousel-inner,
.carousel-inner > .item {
overflow: hidden;
}
*/
.carousel-inner:before {
position:absolute;
top:0;
bottom: 0;
left: 0;
content:"";
display:block;
background-color: #fff;
}
.carousel-inner:after {
position:absolute;
top:0;
bottom:0;
right: 0;
left: 82%; /*determines how much of the right tile is shown*/
content:"";
display:block;
background-color:#fff;
}
.carousel-control{
opacity: 1;
}
/* left carousel button*/
.carousel-control.left{
background: initial;
}
/* right carousel button*/
.carousel-control.right{
background: none;
width: 15%; /* fits to width of third tile*/
color: #000;
top: -10px;
right:18%; /* positions relative to third tile*/
display: flex;
align-items: center;
justify-content: center;
text-shadow: none;
background-image: none;
}
.my-right-button{
position:absolute;
right: 0;
top: 0%;
left: auto;
width: 14%; /* fits to width of third tile*/
height: 100%;
right:18%; /* positions relative to third tile*/
}
.greyout{
position: absolute;
background-image: linear-gradient(to right,rgba(0,0,0,0.3) 0,rgba(0,0,0,0.9) 100%);
width: 100%;
height: 100%;
}
.carousel_button{
position: absolute;
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
.myButton{
max-width: 70%;
height: auto;
width: auto; /* ie8 */
}
/*tile background image*/
.img-responsive{
}
/*smaller image scales with screen size
positioned relative to background image (bottom left)*/
.img-logo{
position:absolute;
width: 30%;
margin: 3%;
height: auto;
left: 0;
bottom: 20%;
}
/*wraps the two images together*/
.img_wrapper{
position: relative;
}
/*caption text*/
.item h4{
font-size: 1.5vw;
font-weight: 500;
margin-top: 15px;
font-family: Museo sans rounded;
text-decoration: none;
}
/* underline underneath caption*/
.line{
border-style: solid;
border-width: 1px;
width: 20%;
}
/* remove the underline for any links*/
.col-xs-4 a{
text-decoration: none;
}
/* panel is a div which wraps itself to the background image
it displays itself on top of the image. It contains a background
colour with an opacity so on hover the panel is displayed, it gives effect
that the image is changing colour.
By default the background colour has 100% opacity (it cannot be seen)
On hover it transitions to a different colour/opacity. This gives the fading
in and out effect
*/
.panel{
width:100%;
height: 100%;
position: absolute;
top: 0;
background-color: rgba(26,165,210,0);
}
/* used to wrap the panel to the image*/
.panel_wrapper{
position: relative;
}
/* wraps the all the content in the tile, adds a background colour
so the hover effect appiles to the caption as well
*/
.content_wrapper{
background-color: none;
}
.button_wrapper{
display: inline-block;
height:100%;
}
/*all below code adds hover transition to tiles*/
.content_wrapper:hover{
transition: all 0.3s ease;
background-color: rgba(26,165,210,0.9);
}
.content_wrapper:hover .panel{
transition: all 0.3s ease;
background-color: rgba(26,165,210,0.9);
}
.content_wrapper:hover .line{
border-color: white;
}
.content_wrapper:hover h4{
color:white;
}
$(document).ready(function () {
// does not scroll through automatically
$('#myCarousel').carousel({
interval: false
})
// go through each carousel item and append the next two to it
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
