Мобильная версияУ меня есть слайдер: http://codepen.io/kerowan/pen/xqYrwJ (воссоздайте проблему, например, задав .product-info-wrapper фиксированную высоту около 100 пикселей)
На слайдах есть изображение и информационное окно, которое изначально выглядит следующим образом: это:
Когда я нажимаю «Kurzinfo», поле должно расшириться и, наконец, выглядеть так (.swiper-container заканчивается сразу после значка NEW, поэтому оно должно перетекать через swiper-container):
Проблема в том, что .swiper-container имеет атрибут переполнения: скрыто;, позволяющий скрыть слайды, продолжающиеся вправо.
ЧТО Я ПРОБОВАЛ?
1) Я пробовал изменить overflow: скрытый; в .swiper-container на overflow-x: скрытый; в попытке просто скрыть слайды, которые текут вправо, но показывать те элементы, которые выходят за пределы вниз. В результате .swiper-container просто добавляет полосу прокрутки, которая позволяет вам прокручивать вниз, чтобы увидеть содержимое, которое должно переполниться.
2) Я попробовал изменить позицию: Absolute; в .product-info-wrapper (которая оборачивает поле и значок) на позицию: исправлено;, потому что я прочитал, что атрибут переполнения игнорируется позицией: исправлено;. Однако это, похоже, не решает проблему.
Я еще ничего не пробовал, просто потому, что не знаю другого подхода к решению.
SNIPPET
Я вставил фрагмент сюда, но он не сработает, потому что я использовал SCSS и, к сожалению, у меня нет времени, чтобы переписать его на чистый CSS. Однако его можно скопировать в codepen, если приведенная выше ссылка умрет.
Код: Выделить всё
$(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: - 1 r e m * 1 0 ; < b r / > } < b r / > } < / c o d e > < b r / > < p r e c l a s s = " s n i p p e t - c o d e - h t m l l a n g - h t m l P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / j q u e r y / 3 . 1 . 1 / j q u e r y . m i n . j s " & g t ; & l t ; / s c r i p t & g t ; < b r / > & l t ; s c r i p t s r c = " h t t p s : / / u s e . f o n t a w e s o m e . c o m / b 1 3 0 5 0 a f b e . j s " & g t ; & l t ; / s c r i p t & g t ; < b r / > & l t ; s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / S w i p e r / 3 . 4 . 1 / j s / s w i p e r . m i n . j s " & g t ; & l t ; / s c r i p t & g t ; < b r / > & l t ; s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / S w i p e r / 3 . 4 . 1 / j s / s w i p e r . j q u e r y . m i n . j s " & g t ; & l t ; / s c r i p t & g t ; < b r / > & l t ; l i n k h r e f = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / S w i p e r / 3 . 4 . 1 / c s s / s w i p e r . m i n . c s s " r e l = " s t y l e s h e e t " / & g t ; < b r / > & l t ; l i n k h r e f = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / t w i t t e r - b o o t s t r a p / 4 . 0 . 0 - a l p h a . 6 / c s s / b o o t s t r a p . m i n . c s s " r e l = " s t y l e s h e e t " / & g t ; < b r / > & l t ; d i v c l a s s = " c o n t a i n e r - f l u i d " & g t ; < b r / > & l t ; d i v c l a s s = " c o n t e n t - w r a p p e r n a r r o w p r o d u c t s - i n - f o c u s " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - w r a p p e r " & g t ; < b r / > & l t ; d i v c l a s s = " s w i p e r - c o n t a i n e r p r o d u c t s - i n - f o c u s " & g t ; < b r / > & l t ; d i v c l a s s = " s w i p e r - w r a p p e r " & g t ; < b r / > & l t ; d i v c l a s s = " s w i p e r - s l i d e " & g t ; < b r / > & l t ; i m g s r c = " h t t p : / / w w w . p l a c e h o l d . i t / 8 0 x 1 3 0 " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - i n f o - w r a p p e r " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - i n f o " & g t ; < b r / > & l t ; d i v c l a s s = " r o w n o - g u t t e r s " & g t ; < b r / > & l t ; d i v c l a s s = " c o l - 7 " & g t ; < b r / > & l t ; s t r o n g c l a s s = " t e x t - u p p e r c a s e " & g t ; A m i n o F o r c e & l t ; / s t r o n g & g t ; < b r / > & l t ; s p a n c l a s s = " p r o d u c t - i n f o - l i n k " & g t ; & l t ; a h r e f = " # " & g t ; K u r z i n f o & l t ; / a & g t ; & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " c o l - 5 t e x t - r i g h t " & g t ; < b r / > < b r / > & l t ; d i v c l a s s = " p r o d u c t - i n f o - p r i c e " & g t ; C H F 3 4 . 0 0 & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - b a d g e - w r a p p e r " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - b a d g e d a r k - g r a y " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - b a d g e - c o n t e n t t e x t - c e n t e r " & g t ; < b r / > % & a m p ; n b s p ; & a m p ; n b s p ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " s w i p e r - s l i d e " & g t ; < b r / > & l t ; i m g s r c = " h t t p : / / w w w . p l a c e h o l d . i t / 8 0 x 1 3 0 " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - i n f o - w r a p p e r " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - i n f o " & g t ; < b r / > & l t ; d i v c l a s s = " r o w n o - g u t t e r s " & g t ; < b r / > & l t ; d i v c l a s s = " c o l - 8 " & g t ; < b r / > & l t ; s t r o n g c l a s s = " t e x t - u p p e r c a s e " & g t ; B a s i c M i n e r a l s & l t ; / s t r o n g & g t ; < b r / > & l t ; s p a n c l a s s = " p r o d u c t - i n f o - l i n k " & g t ; & l t ; a h r e f = " # " & g t ; K u r z i n f o & l t ; / a & g t ; & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " c o l - 4 t e x t - r i g h t " & g t ; < b r / > & l t ; s p a n c l a s s = " p r o d u c t - i n f o - p r i c e " & g t ; C H F 3 4 . 0 0 & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - b a d g e - w r a p p e r " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - b a d g e r e d " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - b a d g e - c o n t e n t " & g t ; < b r / > n e w < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " s w i p e r - s l i d e " & g t ; < b r / > & l t ; i m g s r c = " h t t p : / / w w w . p l a c e h o l d . i t / 8 0 x 1 3 0 " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - i n f o - w r a p p e r " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - i n f o " & g t ; < b r / > & l t ; d i v c l a s s = " r o w n o - g u t t e r s " & g t ; < b r / > & l t ; d i v c l a s s = " c o l - 8 " & g t ; < b r / > & l t ; s t r o n g c l a s s = " t e x t - u p p e r c a s e " & g t ; A m i n o F o r c e & l t ; / s t r o n g & g t ; < b r / > & l t ; s p a n c l a s s = " p r o d u c t - i n f o - l i n k " & g t ; & l t ; a h r e f = " # " & g t ; K u r z i n f o & l t ; / a & g t ; & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " c o l - 4 t e x t - r i g h t " & g t ; < b r / > & l t ; s p a n c l a s s = " p r o d u c t - i n f o - p r i c e " & g t ; C H F 3 4 . 0 0 & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " s w i p e r - s l i d e " & g t ; < b r / > & l t ; i m g s r c = " h t t p : / / w w w . p l a c e h o l d . i t / 8 0 x 1 3 0 " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - i n f o - w r a p p e r " & g t ; < b r / > & l t ; d i v c l a s s = " p r o d u c t - i n f o " & g t ; < b r / > & l t ; d i v c l a s s = " r o w n o - g u t t e r s " & g t ; < b r / > & l t ; d i v c l a s s = " c o l - 8 " & g t ; < b r / > & l t ; s t r o n g c l a s s = " t e x t - u p p e r c a s e " & g t ; W h e y I s o l a t C F M & l t ; / s t r o n g & g t ; < b r / > & l t ; s p a n c l a s s = " p r o d u c t - i n f o - l i n k " & g t ; & l t ; a h r e f = " # " & g t ; K u r z i n f o & l t ; / a & g t ; & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " c o l - 4 t e x t - r i g h t " & g t ; < b r / > & l t ; s p a n c l a s s = " p r o d u c t - i n f o - p r i c e " & g t ; C H F 3 4 . 0 0 & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / >
nicht
auf lager
[img]http://www.placehold.it/80x130[/img]
[b]Amino Force[/b]
[url=#]Kurzinfo[/url]
CHF 34.00
new
[img]http://www.placehold.it/80x130[/img]
[b]Basic Minerals[/b]
[url=#]Kurzinfo[/url]
CHF 34.00
[img]http://www.placehold.it/80x130[/img]
[b]Amino Force[/b]
[url=#]Kurzinfo[/url]
CHF 34.00
[img]http://www.placehold.it/80x130[/img]
[b]Whey Isolat CFM[/b]
[url=#]Kurzinfo[/url]
CHF 34.00
nicht
auf lager
[/i]
[i][/i]
Надеюсь, мой вопрос был достаточно ясен. Если вам нужна более подробная информация, пожалуйста, дайте мне знать!
Подробнее здесь: https://stackoverflow.com/questions/429 ... per-slider
