.content__gallery {
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.content__gallery .slider__wrapper {
overflow: hidden;
margin: 1em;
background: rgba(255, 255, 255, 0.3);
width: 100%;
height: 600px;
order: 1;
}
.content__gallery .slider__wrapper .slider {
height: 100%;
width: 100%;
display: inline-block;
white-space: nowrap;
font-size: 0;
-webkit-transition: all 0s 9999999s;
-ms-transition: all 0s 9999999s;
transition: all 0s 9999999s;
}
.content__gallery .slider__wrapper .slider > * {
height: 100%;
width: 100%;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.content__gallery .thumb__float {
display: inline-block;
margin: 12px;
border: 1px solid #cfcfcf;
order: 2;
}
.content__gallery .thumb__float .thumb__wrapper {
width: 100px;
height: 100px;
padding: 12px;
}
.content__gallery .thumb__float .thumb__wrapper img {
cursor: pointer;
}
.content__gallery .vertical-align-middle {
white-space: nowrap;
text-align: center;
}
.content__gallery .vertical-align-middle .vertical-align-helper {
margin-left: -2px;
margin-top: -1px;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content__gallery .vertical-align-middle img {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
max-width: 96%;
max-height: 96%;
}
.thumb{{index+1}}:active ~ .slider__wrapper > .slider {
-webkit-transition: all 0s;
-ms-transition: all 0s;
transition: all 0s;
transform: translateX(-{{(index+1)*100-100}}%);
-webkit-transform: translateX(-{{(index+1)*100-100}}%);
-ms-transform: translateX(-{{(index+1)*100-100}}%);
}
[url={{ image.url }}][img]{{ image.url }}[/img][/url]
[url={{ footerLink }}]{{ footerText }}[/url]
You have reached the limit of 20 pictures. Start a new set of pictures.
You have reached the limit of 20 pictures. Start a new set of pictures.
{{ image.name }}
{{ image.upload_progress }}%
Preview
Deutsch
