Page MenuHomeSealhub
Files F7112936

autoscrolling-images.css
No OneTemporary
Actions

autoscrolling-images.css
View Options

.autoscrolling-images {
display: flex;
justify-content: center;
}
.autoscrolling-images-wrapper {
display: grid;
gap: 24px;
}
.autoscrolling-images__title-wrapper {
max-width: 940px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.autoscrolling-images__title {
font-size: 32px;
color: #0d4d69;
margin: 0;
}
.autoscrolling-images__arrow-carousel-container {
position: absolute;
top: -51px;
right: -90px;
width: 92px;
overflow-x: hidden;
}
.autoscrolling-images__arrow-carousel {
transition: none !important;
width: 100%;
display: flex;
flex-flow: row nowrap;
}
.autoscrolling-images__arrow-container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
scroll-snap-align: start;
flex: 1 0 100%;
}
.autoscrolling-images__arrow img {
max-width: 30px;
}
.autoscrolling-images__arrow:hover {
cursor: pointer;
}
.autoscrolling-images__img-arrow-left {
transform: rotate(180deg);
}
.autoscrolling-images__carousel-container {
position: relative;
max-width: 940px;
}
.autoscrolling-images__imgs-carousel {
overflow-x: clip;
}
.autoscrolling-images__carousel {
width: 100%;
display: flex;
flex-flow: row nowrap;
}
.autoscrolling-images__carousel-page {
align-items: center;
scroll-snap-align: start;
box-sizing: border-box;
flex: 1 0 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
max-width: 940px;
}
.autoscrolling-images__img-wrapper {
width: 288px;
height: 150px;
display: flex;
align-items: center;
justify-content: space-around;
}
.autoscrolling-images__radio {
display: none;
}
.autoscrolling-images__dots-container {
display: flex;
justify-content: center;
margin-top: 24px;
}
.autoscrolling-images__dots {
cursor: pointer;
height: 12px;
width: 12px;
background-color: #cadae4;
border-radius: 50%;
display: inline-block;
margin: 4px;
}
.autoscrolling-images__dots:hover {
background-color: #0d4d69;
}
@keyframes autoscrolling-images-infiniteScroll {
0% {
transform: translateX(0%);
}
50% {
transform: translateX(calc(-100% + 100cqw));
}
100% {
transform: translateX(0%);
}
}
@container (width < 1115px) {
.autoscrolling-images__arrow-carousel-container {
right: 0;
}
}
@container (width < 800px) {
.autoscrolling-images__arrow-carousel-container {
display: none;
}
.autoscrolling-images__dots-container {
display: none;
}
.autoscrolling-images__carousel {
max-width: none;
width: max-content;
}
.autoscrolling-images__carousel-container {
margin: 0;
max-width: calc(100cqw - 20px);
}
.autoscrolling-images__carousel-page {
display: flex;
flex: none !important;
margin: 0;
flex-wrap: nowrap !important;
max-width: none;
}
.autoscrolling-images__img-wrapper {
min-width: 288px;
}
.autoscrolling-images__carousel {
animation-name: autoscrolling-images-infiniteScroll;
animation-duration: var(--animation-length);
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
}

File Metadata

Mime Type
text/plain
Expires
Fri, Jul 4, 08:03 (5 h, 3 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
799846
Default Alt Text
autoscrolling-images.css (2 KB)

Event Timeline