Today, we’re making a 3D Carousel Slider in Elementor.
We will use Elementor free version. No Elementor pro. No extra plugins to bloat your WordPress. Just clean HTML with CSS and JavaScript. It is also fully responsive. So feel free to use it on your landing page.
This mega slider creates a stunning visual experience. The images glide smoothly, drawing visitors in with a futuristic 3D effect. Each slide pops with vibrant backgrounds and elegant content animations, leaving a lasting impression. There’s also a description part and a read-more button for each slider. Visitors feel captivated, engaged, and eager to explore more. Use it in your hero section to make a bold first impression. Add it to product showcases for a dynamic display. Or feature it in portfolios to highlight your work with style.
Here are the steps to integrate it into your Elementor website:
Create three HTML blocks.
Paste the separate codes in them.
html
<div class="wputopia-slider-container">
<ul class="wputopia-slider">
<li class="wputopia-slider-item" style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')">
<div class="wputopia-slider-content">
<h2 class="wputopia-slider-title">"Lossless Youths"</h2>
<p class="wputopia-slider-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.</p>
<button class="wputopia-slider-button">Read More</button>
</div>
</li>
<li class="wputopia-slider-item" style="background-image: url('https://i.redd.it/tc0aqpv92pn21.jpg')">
<div class="wputopia-slider-content">
<h2 class="wputopia-slider-title">"Estrange Bond"</h2>
<p class="wputopia-slider-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.</p>
<button class="wputopia-slider-button">Read More</button>
</div>
</li>
<li class="wputopia-slider-item" style="background-image: url('https://wharferj.files.wordpress.com/2015/11/bio_north.jpg')">
<div class="wputopia-slider-content">
<h2 class="wputopia-slider-title">"The Gate Keeper"</h2>
<p class="wputopia-slider-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.</p>
<button class="wputopia-slider-button">Read More</button>
</div>
</li>
<li class="wputopia-slider-item" style="background-image: url('https://images7.alphacoders.com/878/878663.jpg')">
<div class="wputopia-slider-content">
<h2 class="wputopia-slider-title">"Last Trace Of Us"</h2>
<p class="wputopia-slider-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.</p>
<button class="wputopia-slider-button">Read More</button>
</div>
</li>
<li class="wputopia-slider-item" style="background-image: url('https://theawesomer.com/photos/2017/07/simon_stalenhag_the_electric_state_6.jpg')">
<div class="wputopia-slider-content">
<h2 class="wputopia-slider-title">"Urban Decay"</h2>
<p class="wputopia-slider-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.</p>
<button class="wputopia-slider-button">Read More</button>
</div>
</li>
<li class="wputopia-slider-item" style="background-image: url('https://da.se/app/uploads/2015/09/simon-december1994.jpg')">
<div class="wputopia-slider-content">
<h2 class="wputopia-slider-title">"The Migration"</h2>
<p class="wputopia-slider-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.</p>
<button class="wputopia-slider-button">Read More</button>
</div>
</li>
</ul>
<nav class="wputopia-slider-nav">
<ion-icon class="wputopia-slider-btn wputopia-slider-prev" name="arrow-back-outline"></ion-icon>
<ion-icon class="wputopia-slider-btn wputopia-slider-next" name="arrow-forward-outline"></ion-icon>
</nav>
</div>CSS
<style>
.wputopia-slider-container {
position: relative;
width: 100%;
height: 100vh;
box-shadow: 0 3px 10px rgba(0,0,0,0.3);
overflow: hidden;
}
.wputopia-slider {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wputopia-slider-item {
width: 200px;
height: 300px;
list-style-type: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
background-position: center;
background-size: cover;
border-radius: 20px;
box-shadow: 0 20px 30px rgba(255,255,255,0.3) inset;
transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;
}
.wputopia-slider-item:nth-child(1),
.wputopia-slider-item:nth-child(2) {
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: none;
border-radius: 0;
box-shadow: none;
opacity: 1;
}
.wputopia-slider-item:nth-child(3) { left: 50%; }
.wputopia-slider-item:nth-child(4) { left: calc(50% + 220px); }
.wputopia-slider-item:nth-child(5) { left: calc(50% + 440px); }
.wputopia-slider-item:nth-child(6) { left: calc(50% + 660px); opacity: 0; }
.wputopia-slider-content {
width: min(30vw, 400px);
position: absolute;
top: 50%;
left: 3rem;
transform: translateY(-50%);
font: 400 0.85rem helvetica, sans-serif;
color: white;
text-shadow: 0 3px 8px rgba(0,0,0,0.5);
opacity: 0;
display: none;
}
.wputopia-slider-title {
font-family: 'arial-black', Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.wputopia-slider-description {
line-height: 1.7;
margin: 1rem 0 1.5rem;
font-size: 0.8rem;
}
.wputopia-slider-button {
width: fit-content;
background-color: rgba(0,0,0,0.1);
color: white;
border: 2px solid white;
border-radius: 0.25rem;
padding: 0.75rem;
cursor: pointer;
}
.wputopia-slider-item:nth-of-type(2) .wputopia-slider-content {
display: block;
animation: wputopia-slider-show 0.75s ease-in-out 0.3s forwards;
}
@keyframes wputopia-slider-show {
0% {
filter: blur(5px);
transform: translateY(calc(-50% + 75px));
}
100% {
opacity: 1;
filter: blur(0);
}
}
.wputopia-slider-nav {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 5;
user-select: none;
}
.wputopia-slider-btn {
background-color: rgba(255,255,255,0.5);
color: rgba(0,0,0,0.7);
border: 2px solid rgba(0,0,0,0.6);
margin: 0 0.25rem;
padding: 0.75rem;
border-radius: 50%;
cursor: pointer;
display: inline-block;
}
.wputopia-slider-btn:hover {
background-color: rgba(255,255,255,0.3);
}
@media (min-width: 651px) and (max-width: 900px) {
.wputopia-slider-title {
font-size: 1rem;
}
.wputopia-slider-description {
font-size: 0.7rem;
}
.wputopia-slider-button {
font-size: 0.7rem;
}
.wputopia-slider-item {
width: 160px;
height: 270px;
}
.wputopia-slider-item:nth-child(3) { left: 50%; }
.wputopia-slider-item:nth-child(4) { left: calc(50% + 170px); }
.wputopia-slider-item:nth-child(5) { left: calc(50% + 340px); }
.wputopia-slider-item:nth-child(6) { left: calc(50% + 510px); opacity: 0; }
}
@media (max-width: 650px) {
.wputopia-slider-title {
font-size: 0.9rem;
}
.wputopia-slider-description {
font-size: 0.65rem;
}
.wputopia-slider-button {
font-size: 0.7rem;
}
.wputopia-slider-item {
width: 130px;
height: 220px;
}
.wputopia-slider-item:nth-child(3) { left: 50%; }
.wputopia-slider-item:nth-child(4) { left: calc(50% + 140px); }
.wputopia-slider-item:nth-child(5) { left: calc(50% + 280px); }
.wputopia-slider-item:nth-child(6) { left: calc(50% + 420px); opacity: 0; }
}
</style>
JS
<script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script>
(function() {
// Slider functionality
const slider = document.querySelector('.wputopia-slider');
function activateSlider(e) {
const items = document.querySelectorAll('.wputopia-slider-item');
if(e.target.matches('.wputopia-slider-next')) slider.append(items[0]);
if(e.target.matches('.wputopia-slider-prev')) slider.prepend(items[items.length-1]);
}
document.addEventListener('click', activateSlider, false);
})();
</script>That’s it. Easy-peasy.
