Today, we’re making a Skewed Spectra Slider.
We will use Elementor free version. No Elementor pro. No extra plugins. 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 captivates visitors with its sleek, modern design. Vibrant colors and smooth animations grab attention instantly. The skewed backgrounds and layered illustrations create a dynamic, premium feel. Slides rotate automatically, embedding your message deeply in visitors’ minds. It’s engaging, professional, and unforgettable. Use it in your hero section to make a bold first impression. Add it to product pages to showcase features with flair. Or place it on service pages to highlight offerings dynamically.
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-container">
<div class="wputopia-slider">
<div class="wputopia-slide wputopia-slide-1">
<div class="wputopia-bg"></div>
<div class="wputopia-content">
<h1>I'm the first Box</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus.</p>
<button>Check Now</button>
</div>
<div class="wputopia-illustration">
<div></div>
</div>
</div>
<div class="wputopia-slide wputopia-slide-2">
<div class="wputopia-bg"></div>
<div class="wputopia-content">
<h1>I'm the second Box</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus.</p>
<button>Check Now</button>
</div>
<div class="wputopia-illustration">
<div></div>
</div>
</div>
<div class="wputopia-slide wputopia-slide-3">
<div class="wputopia-bg"></div>
<div class="wputopia-content">
<h1>I'm the third Box</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus.</p>
<button>Check Now</button>
</div>
<div class="wputopia-illustration">
<div></div>
</div>
</div>
<div class="wputopia-slide wputopia-slide-4">
<div class="wputopia-bg"></div>
<div class="wputopia-content">
<h1>I'm the fourth Box</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus.</p>
<button>Check Now</button>
</div>
<div class="wputopia-illustration">
<div></div>
</div>
</div>
<div class="wputopia-slide wputopia-slide-5">
<div class="wputopia-bg"></div>
<div class="wputopia-content">
<h1>I'm the fifth Box</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia dui lectus.</p>
<button>Check Now</button>
</div>
<div class="wputopia-illustration">
<div></div>
</div>
</div>
</div>
<svg class="wputopia-nav wputopia-prev" width="56.898" height="91" viewBox="0 0 56.898 91">
<path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(0 91) rotate(-90)" fill="#fff"/>
</svg>
<svg class="wputopia-nav wputopia-next" width="56.898" height="91" viewBox="0 0 56.898 91">
<path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(56.898) rotate(90)" fill="#fff"/>
</svg>
<div class="wputopia-trail">
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>CSS
<style>
/* Container Styles */
.wputopia-container {
position: relative;
overflow: hidden;
border-radius: 5rem;
height: 55rem;
background-color: #000;
}
/* Slider Styles */
.wputopia-slider {
display: flex;
width: 500%;
height: 100%;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Slide Styles */
.wputopia-slide {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
position: relative;
transition: all 0.5s ease;
}
/* Background Layer */
.wputopia-bg {
position: absolute;
width: 55%;
height: 100%;
left: -10%;
padding: 2rem;
padding-left: 20rem;
transform: skewX(7deg);
transform-origin: 0 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.wputopia-bg::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform: skewX(10deg);
pointer-events: none;
transition: background-color 0.5s ease;
}
/* Content Styles */
.wputopia-content {
padding: 5rem;
padding-left: 10rem;
z-index: 100;
grid-column: 1;
transition: opacity 0.5s ease;
}
.wputopia-content h1 {
font-size: 3.5rem;
font-weight: 500;
margin-bottom: 0.5rem;
color:#fff;
}
.wputopia-content p {
font-size: 1.3rem;
color: #B5B4B4;
margin-bottom: 2rem;
margin-right: 5rem;
}
.wputopia-content button {
padding: 1rem 3rem;
color: #fff;
border-radius: 2rem;
border: none;
cursor: pointer;
transition: opacity 0.3s ease;
}
.wputopia-content button:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
/* Illustration Styles */
.wputopia-illustration {
grid-column: 2;
justify-self: center;
transition: transform 0.5s ease;
}
.wputopia-illustration div {
height: 25rem;
width: 18rem;
border-radius: 3rem;
position: relative;
transform: skewX(-10deg);
}
.wputopia-illustration div::after,
.wputopia-illustration div::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
border-radius: 3rem;
top: 0;
left: 0;
opacity: 0.4;
}
.wputopia-illustration div::after {
transform: translate(4rem, -1rem);
}
.wputopia-illustration div::before {
transform: translate(2rem, -2rem);
}
/* Navigation Styles */
.wputopia-nav {
position: absolute;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.2);
padding: 1rem;
border-radius: 50%;
transition: background-color 0.5s ease;
display: block;
}
.wputopia-prev,
.wputopia-next {
width: 4rem;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.wputopia-prev:hover,
.wputopia-next:hover {
opacity: 1;
}
.wputopia-prev {
top: 50%;
left: 2%;
transform: translateY(-50%);
}
.wputopia-next {
top: 50%;
right: 2%;
transform: translateY(-50%);
}
.wputopia-trail {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
width: 60%;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
text-align: center;
z-index: 2000;
}
.wputopia-trail div {
padding: 2rem;
border-top: 3px solid #fff;
cursor: pointer;
opacity: 0.6;
transition: all 0.3s ease;
}
.wputopia-trail div:hover {
opacity: 0.8;
}
.wputopia-trail div.active {
opacity: 1;
}
/* Color Schemes */
.wputopia-slide-1 .wputopia-bg::before {
background-color: #500033;
transition: background-color 0.5s ease;
}
.wputopia-slide-1 .wputopia-illustration div {
background-color: #FF0077;
transition: background-color 0.5s ease;
}
.wputopia-slide-1 button {
background-color: #FF0077;
transition: background-color 0.5s ease;
}
.wputopia-slide-2 .wputopia-bg::before {
background-color: #000050;
transition: background-color 0.5s ease;
}
.wputopia-slide-2 .wputopia-illustration div {
background-color: #0033FF;
transition: background-color 0.5s ease;
}
.wputopia-slide-2 button {
background-color: #0033FF;
transition: background-color 0.5s ease;
}
.wputopia-slide-3 .wputopia-bg::before {
background-color: #00501D;
transition: background-color 0.5s ease;
}
.wputopia-slide-3 .wputopia-illustration div {
background-color: #00FF44;
transition: background-color 0.5s ease;
}
.wputopia-slide-3 button {
background-color: #00FF44;
transition: background-color 0.5s ease;
}
.wputopia-slide-4 .wputopia-bg::before {
background-color: #554D00;
transition: background-color 0.5s ease;
}
.wputopia-slide-4 .wputopia-illustration div {
background-color: #FF4E00;
transition: background-color 0.5s ease;
}
.wputopia-slide-4 button {
background-color: #FF4E00;
transition: background-color 0.5s ease;
}
.wputopia-slide-5 .wputopia-bg::before {
background-color: #300050;
transition: background-color 0.5s ease;
}
.wputopia-slide-5 .wputopia-illustration div {
background-color: #8000FF;
transition: background-color 0.5s ease;
}
.wputopia-slide-5 button {
background-color: #8000FF;
transition: background-color 0.5s ease;
}
/* Update arrow colors based on next/previous slides */
.wputopia-slide-1 .wputopia-prev { background-color: #300050; } /* Points to slide 5 */
.wputopia-slide-1 .wputopia-next { background-color: #000050; } /* Points to slide 2 */
.wputopia-slide-2 .wputopia-prev { background-color: #500033; } /* Points to slide 1 */
.wputopia-slide-2 .wputopia-next { background-color: #00501D; } /* Points to slide 3 */
.wputopia-slide-3 .wputopia-prev { background-color: #000050; } /* Points to slide 2 */
.wputopia-slide-3 .wputopia-next { background-color: #554D00; } /* Points to slide 4 */
.wputopia-slide-4 .wputopia-prev { background-color: #00501D; } /* Points to slide 3 */
.wputopia-slide-4 .wputopia-next { background-color: #300050; } /* Points to slide 5 */
.wputopia-slide-5 .wputopia-prev { background-color: #554D00; } /* Points to slide 4 */
.wputopia-slide-5 .wputopia-next { background-color: #500033; } /* Points to slide 1 */
/* Responsive Styles */
@media (max-width: 1000px) {
body {
padding: 0;
}
.wputopia-container {
border-radius: 0;
height: 100vh;
}
}
@media (max-width: 800px) {
.wputopia-bg {
width: 65%;
}
.wputopia-illustration div {
height: 20rem;
width: 15rem;
}
.wputopia-content p {
margin-right: 0;
}
.wputopia-content h1 {
font-size: 2.8rem;
}
.wputopia-content {
padding: 3rem;
padding-left: 8rem;
}
}
@media (max-width: 650px) {
.wputopia-slide {
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
}
.wputopia-bg {
width: 100%;
left: 0;
bottom: 0;
height: 54%;
transform: skewX(0deg);
}
.wputopia-bg::before {
width: 120%;
bottom: 0;
transform: skewX(0deg);
}
.wputopia-content {
grid-row: 2;
grid-column: 1;
text-align: center;
padding: 2rem;
transform: translateY(-9rem);
}
.wputopia-content h1 {
font-size: 2.5rem;
}
.wputopia-content p {
font-size: 1.1rem;
margin-right: 0;
}
.wputopia-content button {
padding: 0.8rem 2.5rem;
font-size: 0.9rem;
}
.wputopia-illustration {
grid-row: 1;
grid-column: 1;
justify-self: center;
margin-top: 2rem;
}
.wputopia-illustration div {
height: 15rem;
width: 12rem;
}
.wputopia-prev,
.wputopia-next {
display: block;
width: 2.5rem;
padding: 0.5rem;
}
.wputopia-prev {
left: 5%;
}
.wputopia-next {
right: 5%;
}
.wputopia-trail {
width: 90%;
bottom: 13%;
}
.wputopia-trail div {
padding: 1rem;
}
}
@media (max-width: 450px) {
.wputopia-content h1 {
font-size: 2rem;
}
.wputopia-content p {
font-size: 0.9rem;
}
.wputopia-content button {
padding: 0.7rem 2rem;
font-size: 0.8rem;
}
.wputopia-illustration div {
height: 12rem;
width: 10rem;
}
.wputopia-trail {
width: 95%;
bottom: 8%;
}
.wputopia-trail div {
padding: 0.5rem;
}
}
/* Touch handling for mobile */
@media (hover: none) {
.wputopia-content button:hover {
transform: none;
}
.wputopia-trail div:hover {
opacity: 0.3;
}
.wputopia-trail div.active {
opacity: 1;
}
}
/* Safe area for devices with notches */
@supports (padding: max(0px)) {
body {
padding-left: max(8rem, env(safe-area-inset-left));
padding-right: max(8rem, env(safe-area-inset-right));
padding-top: max(0px, env(safe-area-inset-top));
padding-bottom: max(0px, env(safe-area-inset-bottom));
}
@media (max-width: 1000px) {
body {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
}
}
</style>JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
<script>
// Slider elements
const slider = document.querySelector('.wputopia-slider');
const slides = document.querySelectorAll('.wputopia-slide');
const trails = document.querySelectorAll('.wputopia-trail div');
const prevBtn = document.querySelector('.wputopia-prev');
const nextBtn = document.querySelector('.wputopia-next');
// Animation variables
let currentSlide = 0;
// GSAP animations
const tl = gsap.timeline({ defaults: { duration: 0.6, ease: "power2.inOut" } });
tl.from(".wputopia-bg", { x: "-100%", opacity: 0 })
.from(".wputopia-content p", { opacity: 0 }, "-=0.3")
.from(".wputopia-content h1", { opacity: 0, y: "30px" }, "-=0.3")
.from(".wputopia-content button", { opacity: 0, y: "-40px" }, "-=0.8");
// Function to update slide position
function updateSlide() {
slider.style.transform = `translateX(-${currentSlide * 20}%)`;
trails.forEach((trail, index) => {
trail.classList.toggle('active', index === currentSlide);
});
tl.restart();
}
// Function to move to next slide
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
updateSlide();
}
// Function to move to previous slide
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
updateSlide();
}
// Function to move to specific slide
function goToSlide(index) {
currentSlide = index;
updateSlide();
}
// Event listeners
if (nextBtn) {
nextBtn.addEventListener('click', (e) => {
e.preventDefault();
nextSlide();
});
}
if (prevBtn) {
prevBtn.addEventListener('click', (e) => {
e.preventDefault();
prevSlide();
});
}
trails.forEach((trail, index) => {
trail.addEventListener('click', () => goToSlide(index));
});
// Touch events for mobile
let touchStartX = 0;
let touchEndX = 0;
slider.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
});
slider.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].clientX;
const diff = touchStartX - touchEndX;
const threshold = slider.clientWidth / 4;
if (Math.abs(diff) > threshold) {
if (diff > 0) {
nextSlide();
} else {
prevSlide();
}
}
});
// Initialize slider
updateSlide();
</script>That’s it. Easy-peasy.
If you like it, don’t forget to like and comment, so I can send you the file.
