Looking to add a dynamic and modern touch to your website? Learn how to create a Vertical Image Carousel in Elementor using GSAP and custom CSS. This easy-to-follow guide will walk you through the entire process of building a stunning vertical loop carousel from scratch, making it perfect for showcasing images or portfolio items seamlessly.
In this tutorial, you’ll discover:
- How to set up and design a vertical carousel using Elementor.
- The secrets of adding autoscroll and infinite loop effects for a smooth user experience.
- Tips to make the carousel fully responsive for mobile and tablet.
- How to enhance your carousel with shadow effects for a professional finish.
This guide is ideal for anyone looking to elevate their WordPress website design with unique and eye-catching features. Plus, download the custom CSS code used in this tutorial to get started faster.
Make your website stand out with this advanced Elementor design tutorial!
Want to get this as ready made template with just 1 CLICK INSTALL?
Separate CSS Code
For Column 1
.contimage1 {
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(215, 239, 67, 0.17);
animation: looping 15s infinite linear;
}
#container1 {
width: 200px;
height: 700px;
max-height: 700px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0));
}
@keyframes looping {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
For Column 2
.contimage2 {
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(215, 239, 67, 0.17);
animation: looping 16s linear 0s infinite none reverse;
animation-direction: reverse;
}
#container2 {
max-height: 700px;
height: 700px;
width: 200px;
-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%);
}
}
For Column 3
.contimage3 {
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(215, 239, 67, 0.17);
animation: looping 20s linear 0s infinite none;
}
#container3 {
max-height: 700px;
height: 700px;
width: 200px;
-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%);
}
}
Heading Color Gradient Code
selector .elementor-heading-title{
background-image: linear-gradient(180deg , #ffffff , #7D7D7D);
background-clip: text;
-webkit-background-clip: text;
}
