Display element outside of "overflow: hidden" in Swiper slider - html

Question

THE PROBLEM
I have a swiper slider: http://codepen.io/kerowan/pen/xqYrwJ (recreate problem for example by giving .product-info-wrapper a fixed height of around 100px)
In the slides, there is an image and an infobox, which initially looks like this:
When I click on "Kurzinfo", the box needs to expand and finally look like this (the .swiper-container ends just after the NEW badge, so it has to flow over the swiper-container):
The problem is, that .swiper-container has an overflow: hidden; attribute, to hide the slides that continue to the right side.
WHAT HAVE I TRIED?
1) I have tried changing overflow: hidden; on the .swiper-container to overflow-x: hidden; in an attempt to just hide the slides which flow to the right, but show stuff that overflows downwards. This results in .swiper-container just adding a scrollbar, which lets you scroll down to see the content that should overflow.
2) I have tried changing position: absolute; on .product-info-wrapper (which wraps the box and the badge) to position: fixed;, because I read that the overflow attribute is ignored by position: fixed;. This doesn't seem to solve the problem, however.
I have not tried anything else yet, simply because I don't know any other solution approach.
SNIPPET
I pasted the snippet here, but it won't work, because I used SCSS and unfortunately lack the time to rewrite it to pure CSS. Can be copied to codepen, though, if the link above should die.
$(document).ready(function() {
var productsInFocus = new Swiper ('.products-in-focus', {
nextButton: '.product-focus-next',
prevButton: '.product-focus-prev',
slidesPerView: 4,
loop: false,
spaceBetween: 20
});
});
.content-wrapper {
max-width: 1100px;
margin: 0 auto;
}
.product-wrapper {
position: relative;
margin-bottom: 1rem * 5;
margin-top: 1rem * 5;
.swiper-slide {
display: flex;
justify-content: center;
align-items: flex-start;
position: relative;
min-height: 230px;
.product-badge-wrapper {
position: absolute;
bottom: 0;
right: 0;
.product-badge {
position: relative;
width: 100px;
overflow: hidden;
&.red {
&:before,
&:after {
border-color: #CF043C;
background-color: transparent;
}
&:after {
background-color: transparent;
border-left-color: transparent;
}
.product-badge-content {
&:before {
border-color: darken(#CF043C, 10%);
border-left-color: transparent;
border-right-color: transparent;
}
}
}
&.dark-gray {
&:before,
&:after {
border-color: lighten(#000, 37.4%);
background-color: transparent;
}
&:after {
background-color: transparent;
border-left-color: transparent;
}
.product-badge-content {
&:before {
border-color: lighten(#000, 13.5%);
border-left-color: transparent;
border-right-color: transparent;
}
}
}
&:before,
&:after {
content: "";
position: absolute;
left: 0;
background-color: transparent;
border-color: lighten(#000, 73%);
}
&:before {
top: 20px;
right: 0;
bottom: 0;
}
&:after {
bottom: auto;
left: -1px;
top: -10px;
border-style: solid;
border-width: 0 0 75px 75px;
background-color: transparent;
border-left-color: transparent;
width: 100px;
}
.product-badge-content {
height: 43px;
padding-right: 5px;
padding-left: 22px;
display: flex;
justify-content: flex-end;
align-items: center;
text-align: right;
text-transform: uppercase;
font-weight: 700;
position: relative;
z-index: 10;
color: #fff;
&.text-small {
font-size: .7rem;
font-weight: 400 !important;
}
&:before {
content: "";
position: absolute;
left: 11px;
bottom: 0;
display: block;
border-style: solid;
border-color: lighten(#000, 37.4%);
border-left-color: transparent;
border-right-color: transparent;
border-width: 10px 10px 0 10px;
}
}
}
}
.product-info-wrapper {
position: absolute;
bottom: 0;
max-width: 100%;
width: 100%;
padding-bottom: 10px;
.product-info {
position: relative;
padding: 1rem * .5;
padding-right: 1rem * 2;
overflow: hidden;
&-link {
display: block;
a {
color: lighten(#000, 37.4%);
transition: color 400ms ease-in-out;
&:hover {
color: #CF043C;
text-decoration: none;
}
}
}
&-price {
color: #CF043C;
&-del {
color: lighten(#000, 37.4%);
text-decoration: line-through;
font-size: .9rem;
}
}
&:before,
&:after {
position: absolute;
content: "";
left: 0;
z-index: -1;
background-color: lighten(#000, 93.5%);
border-color: lighten(#000, 93.5%);
}
&:before {
top: 0;
right: 0;
bottom: 35px;
}
&:after {
top: auto;
right: -5px;
bottom: 0;
border-style: solid;
border-width: 35px 35px 0 0;
background-color: transparent;
border-right-color: transparent;
}
}
}
}
.product-focus-prev,
.product-focus-next {
position: absolute;
color: lighten(#000, 37.4%);
background-image: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.product-focus-prev {
left: -1rem * 10;
}
.product-focus-next {
right: -1rem * 10;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/b13050afbe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="content-wrapper narrow products-in-focus">
<div class="product-wrapper">
<div class="swiper-container products-in-focus">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-7">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-5 text-right">
<div class="product-info-price">CHF 34.00</div>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge dark-gray">
<div class="product-badge-content text-center">
%
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Basic Minerals</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge red">
<div class="product-badge-content">
new
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Whey Isolat CFM</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge">
<div class="product-badge-content text-small">
nicht<br>auf lager
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge red">
<div class="product-badge-content">
new
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Basic Minerals</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Whey Isolat CFM</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge">
<div class="product-badge-content text-small">
nicht<br>auf lager
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-focus-prev"><i class="fa fa-chevron-left"></i></div>
<div class="product-focus-next"><i class="fa fa-chevron-right"></i></div>
</div>
</div>
</div>
I hope my question was clear enough. If you need more details, please let me know!

Answer 1

You can add:
.swiper-slide {
padding-bottom: 30px;
}
where 30px is the value your badge should be beyond the border.
http://codepen.io/Deka87/pen/xqYXOq

Answer 2

I found a solution, I feel like it's a bit of a hack, however. For what it's worth, here it is:
.swiper-container {
overflow: visible;
}
$slide: ".swiper-slide";
.swiper-slide {
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
&-active {
opacity: 1;
visibility: visible;
#for $i from 1 through 3 {
& + #{$slide} {
opacity: 1;
visibility: visible;
}
$slide: "#{$slide} + .swiper-slide";
}
}
}
So, what I do here is setting .swiper-container from overflow: hidden; to overflow: visible and then I tell every .swiper-slide to have opacity: 0; except for the &-active one. I then use the &-active slide as a starting point and iterate through a sass for-loop 3 times to add opacity: 1; for the next 3 .swiper-slides. This sass code produces the following pure css code (.swiper-container not included here)
.swiper-slide {
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}
.swiper-slide-active {
opacity: 1;
visibility: visible;
}
.swiper-slide-active + .swiper-slide {
opacity: 1;
visibility: visible;
}
.swiper-slide-active + .swiper-slide + .swiper-slide {
opacity: 1;
visibility: visible;
}
.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
opacity: 1;
visibility: visible;
}
This whole stuff is just to remove the overflow: hidden; from .swiper-container while still showing only the slides I need to see and hiding the others.
Now I can play around with the height of the Infobox and the effect I was looking for works.

Answer 3

<style>
//as we want to see details which are being cut of by default css from swiper contner we change it top overflow visible.
.swiper-container {
overflow: visible;
}
//we changed over hidden to visible all slides of the swiper slider would we visible so we need to hide them so we add below css.
.swiper-slide{
opacity: 0;
visibility: hidden;
}
// now because of the above css all the slider are set to opacity 0 , which makes them not visible, now as we want to see out active and next slide we supply below css by using their name. and set there opacity to 1.
.swiper-slide.swiper-slide-active,.swiper-slide.swiper-slide-next,.swiper-slide.swiper-slide-prev{
opacity: 1;
visibility: visible;
}
</style>

Answer 4

I recently had a similar problem in my react project and solved it by wrapping up the whole swiper component with a div and giving it the following properties:
.sliderContainer { position: relative; z-index: 2; height: 25rem; }
Another thing you gotta do is remove position: relative; from .swiper class like this:
.swiper { position: unset !important; }
Doing this will allow you to bypass the overflow: hidden; of .swiper class and essentially will bind child elements to the wrapper div and you'll be able to expand your div as much as you'd like without it being cropped off by the slider.
Also when defining a height for the slider, you should add it to the wrapper div you created instead of adding it to .swiper.

Answer 5

You can use custom padding, margin.
.swiper {
padding: 13px !important;
margin: -13px !important;
}