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"><a href="#">Kurzinfo</a></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"><a href="#">Kurzinfo</a></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"><a href="#">Kurzinfo</a></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"><a href="#">Kurzinfo</a></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"><a href="#">Kurzinfo</a></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"><a href="#">Kurzinfo</a></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"><a href="#">Kurzinfo</a></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"><a href="#">Kurzinfo</a></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!
6
Answers
I found a solution, I feel like it's a bit of a hack, however. For what it's worth, here it is:
So, what I do here is setting
.swiper-container
fromoverflow: hidden;
tooverflow: visible
and then I tell every.swiper-slide
to haveopacity: 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 addopacity: 1;
for the next 3.swiper-slide
s. This sass code produces the following pure css code (.swiper-container
not included here)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.You can add:
where 30px is the value your badge should be beyond the border.
http://codepen.io/Deka87/pen/xqYXOq
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:
Another thing you gotta do is remove
position: relative;
from.swiper
class like this: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
.You can use custom padding, margin.
You swipper should have