Add Your Heading Text Here
Image size: 431 by 691 px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
1st Vertical Carousel (left-hand side)
.carouselverticalone {
animation: looping 10s linear 0s infinite none;
}
.verticalcolumnone {
max-height: 750px;
height: 750px;
width: 200px;
overflow: hidden;
-webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}
@keyframes looping{
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-100%);
}
}
@media only screen and (max-width: 360px) {
.verticalcolumnone {
max-height: 350px;
height: 350px;
width: 100px;
}
}
Timestamps:
00:00 Intro
00:52 Building a vertical carousel for desktop
08:16 Adjusting the vertical carousel for tablet
08:48 Adjusting the vertical carousel for mobile
10:19 Outro