I am trying to build a custom slider in wordpress using elementor slider element. I am trying to achieve a specific design in reference image below.
I am using custom css on top of prebuilt slider available in elementor.
/for rounding slider image/
.elementor-slides .swiper-slide-bg {
border-radius: 50px;
}
/**/
.elementor-slides .swiper-slide {
width: 80% !important;
opacity: 0.5;
transition: all 0.3s ease;
visibility: visible !important;
}
.elementor-slides .swiper-slide-active {
opacity: 1;
transform: scale(1.1); /* Slightly enlarge active slide */
}
.elementor-slides .swiper-container {
overflow: visible;
padding: 0 10%;
}
.elementor-slide-content {
position: absolute;
bottom: 40px;
left: 40px;
right: 40px;
background-color: rgba(255,255,255,0.8);
padding: 20px;
border-radius: 10px;
}
.elementor-slides .swiper-slide-bg {
background-size: cover;
background-position: center;
}
.elementor-slide-heading {
font-size: 18px;
margin-bottom: 10px;
}
.elementor-slide-description {
font-size: 14px;
margin-bottom: 15px;
}
.elementor-button {
background-color: #e74c3c; /* Red color for button */
border-radius: 25px;
padding: 10px 20px;
font-size: 14px;
}
Just below the slider element i have used js code in custom html widget.
I have 5 slides in the slider widget. Result of the above css and js code
I am unable to post more than 1 screenshot in this topic as a new user.
Someone please guide on what am i doing wrong here.
