Today, we’re making a dramatic full-screen animal slider. It is ideal for wildlife campaigns, adventure pages, or dynamic storytelling on any landing page.
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.
It features giant animal images like tigers and lions with elegant text overlays. A “whoosh” leap-to-appear effect stuns viewers. Massive animals burst onto the screen, leaving a powerful, unforgettable impact. Visitors feel the wild energy.
It is perfect for hero sections to create a jaw-dropping first impression. Use it on animal-protection websites to highlight endangered species.
Here are the steps to integrate it into your Elementor website:
Create three HTML blocks.
Paste the separate codes into each block.HTML
<div class="wputopia-slider">
<div class="wputopia-slider-images">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/leopard2.jpg" alt="Amur Leopard" class="active">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/lion2.jpg" alt="Asiatic Lion">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/tiger2.jpg" alt="Siberian Tiger">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/bear2.jpg" alt="Brown Bear">
</div>
<div class="wputopia-slider-content">
<div class="wputopia-slider-meta active">Species</div>
<h2 id="wputopia-slide-title" class="active">Amur <br>Leopard</h2>
<div class="wputopia-slider-meta active">Status</div>
<div id="wputopia-slide-status" class="wputopia-slider-meta active">Critically Endangered</div>
</div>
<div class="wputopia-slider-pagination">
<button class="active" data-slide="0"></button>
<button data-slide="1"></button>
<button data-slide="2"></button>
<button data-slide="3"></button>
</div>
</div>CSS
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
<style>
/* Reset and Base Styles */
.wputopia-slider * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Slider Container */
.wputopia-slider {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #23272A;
}
/* Slider Content */
.wputopia-slider-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
color: white;
text-align: center;
width: 100%;
max-width: 1060px;
padding: 0 20px;
}
.wputopia-slider-content h2 {
font-family: 'Playfair Display', serif;
font-size: 4.5rem;
font-weight: 700;
line-height: 1.1;
margin: 20px 0 40px;
letter-spacing: -1px;
text-transform: uppercase;
opacity: 0;
transform: translateY(20px);
transition: all 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}
.wputopia-slider-content h2.active {
opacity: 1;
transform: translateY(0);
}
.wputopia-slider-meta {
font-family: 'Montserrat', sans-serif;
font-size: 0.875rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 4px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 10px;
opacity: 0;
transform: translateY(20px);
transition: all 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}
.wputopia-slider-meta.active {
opacity: 1;
transform: translateY(0);
}
#wputopia-slide-status {
font-family: 'Montserrat', sans-serif;
font-size: 1.25rem;
font-weight: 500;
color: #fff;
margin-top: 5px;
letter-spacing: 2px;
}
/* Slider Images */
.wputopia-slider-images {
position: relative;
width: 100%;
height: 100%;
}
.wputopia-slider-images img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.1);
transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.wputopia-slider-images img.active {
opacity: 1;
transform: scale(1);
}
/* Pagination */
.wputopia-slider-pagination {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: flex;
flex-direction: column;
gap: 15px;
}
.wputopia-slider-pagination button {
width: 30px;
height: 2px;
background: rgba(255, 255, 255, 0.4);
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}
.wputopia-slider-pagination button:hover {
background: rgba(255, 255, 255, 0.8);
}
.wputopia-slider-pagination button.active {
background: white;
width: 50px;
}
/* Responsive Design */
@media (max-width: 1024px) {
.wputopia-slider-content h2 {
font-size: 3.5rem;
}
}
@media (max-width: 767px) {
.wputopia-slider-content h2 {
font-size: 2.5rem;
}
.wputopia-slider-meta {
font-size: 0.75rem;
letter-spacing: 3px;
}
#wputopia-slide-status {
font-size: 1rem;
}
.wputopia-slider-pagination {
right: 20px;
}
}
</style>JS
<script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
<script>
class WPutopiaSlider {
constructor() {
this.slider = document.querySelector('.wputopia-slider');
this.images = document.querySelectorAll('.wputopia-slider-images img');
this.paginationButtons = document.querySelectorAll('.wputopia-slider-pagination button');
this.titleElement = document.getElementById('wputopia-slide-title');
this.statusElement = document.getElementById('wputopia-slide-status');
this.metaElements = document.querySelectorAll('.wputopia-slider-meta');
this.slideData = [
{ title: 'Amur <br>Leopard', status: 'Critically Endangered' },
{ title: 'Asiatic <br>Lion', status: 'Endangered' },
{ title: 'Siberian <br>Tiger', status: 'Endangered' },
{ title: 'Brown <br>Bear', status: 'Least Concern' }
];
this.currentSlide = 0;
this.isAnimating = false;
this.init();
}
init() {
// Add event listeners
this.paginationButtons.forEach(button => {
button.addEventListener('click', () => this.goToSlide(parseInt(button.dataset.slide)));
});
// Add wheel event for navigation
this.slider.addEventListener('wheel', (e) => {
e.preventDefault();
if (this.isAnimating) return;
if (e.deltaY > 0) {
this.nextSlide();
} else {
this.prevSlide();
}
});
// Add touch events
let touchStartY = 0;
this.slider.addEventListener('touchstart', (e) => {
touchStartY = e.touches[0].clientY;
});
this.slider.addEventListener('touchend', (e) => {
if (this.isAnimating) return;
const touchEndY = e.changedTouches[0].clientY;
const diff = touchStartY - touchEndY;
if (Math.abs(diff) > 50) {
if (diff > 0) {
this.nextSlide();
} else {
this.prevSlide();
}
}
});
}
goToSlide(index) {
if (this.isAnimating) return;
this.isAnimating = true;
// Remove active classes from all elements
this.images.forEach(img => img.classList.remove('active'));
this.paginationButtons.forEach(button => button.classList.remove('active'));
this.titleElement.classList.remove('active');
this.statusElement.classList.remove('active');
this.metaElements.forEach(meta => meta.classList.remove('active'));
// Add active classes with staggered delay
setTimeout(() => {
this.images[index].classList.add('active');
this.paginationButtons[index].classList.add('active');
// Update content with staggered animation
setTimeout(() => {
this.titleElement.innerHTML = this.slideData[index].title;
this.statusElement.textContent = this.slideData[index].status;
this.titleElement.classList.add('active');
this.statusElement.classList.add('active');
this.metaElements.forEach(meta => meta.classList.add('active'));
}, 300);
}, 100);
this.currentSlide = index;
setTimeout(() => {
this.isAnimating = false;
}, 1000);
}
nextSlide() {
const nextIndex = (this.currentSlide + 1) % this.images.length;
this.goToSlide(nextIndex);
}
prevSlide() {
const prevIndex = (this.currentSlide - 1 + this.images.length) % this.images.length;
this.goToSlide(prevIndex);
}
}
// Initialize the slider when the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
new WPutopiaSlider();
});
</script>That’s it. Easy-peasy.
If you like it, don’t forget to like and comment, so I can send you the file.
