Project Gallery
Explore DRAGON DEVIL INFERNAL SLIDER in detail
2
/2
100%
100%
Project Overview
DRAGON DEVIL INFERNAL SLIDER
Project Description
This image slider features smooth auto-sliding with a glowing progress bar, hover zoom effects on images, glassmorphism overlays for better text visibility, clickable pagination dots, previous/next navigation buttons, keyboard arrow key support (left/right), and a "View More" modal popup that shows detailed information. The slider pauses on hover and resumes automatically, creating a seamless and interactive user experience.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Dragon Devil | Infernal Image Slider - Advanced Edition</title>
<!-- Google Fonts: Cinematic & Gothic -->
<link href="https://fonts.googleapis.com/css2?family=Cinema+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;900&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="dragon-slayer">
<div class="infernal-header">
<h1>⚔️ DRAGON DEVIL ⚔️</h1>
<div class="sub"><i class="fas fa-dragon"></i> EMBRACE THE INFERNAL REIGN <i class="fas fa-skull"></i></div>
</div>
<div class="slider-cinema" id="cinemaSlider">
<div class="slider-track" id="sliderTrack">
<!-- Slide 1 - Ember Dragon -->
<div class="slide-item">
<img src="https://picsum.photos/id/104/1600/900" alt="Dragon Ember" loading="eager">
<div class="slide-overlay">
<h2><i class="fas fa-fire"></i> EMBER DRAGON</h2>
<div class="lorem-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis blanditiis mollitia similique, aut, iusto odit cupiditate magnam excepturi dicta ipsum impedit quasi reiciendis. The infernal flame never dies.</div>
<button class="btn-ritual view-more-trigger" data-idx="0">VIEW MORE <i class="fas fa-angle-double-right"></i></button>
</div>
</div>
<!-- Slide 2 - Devil's Contract -->
<div class="slide-item">
<img src="https://picsum.photos/id/106/1600/900" alt="Devil Contract">
<div class="slide-overlay">
<h2><i class="fas fa-hand-sparkles"></i> BLOOD PACT</h2>
<div class="lorem-text">Consectetur adipisicing elit. Omnis blanditiis mollitia similique, aut, iusto odit cupiditate magnam excepturi dicta ipsum impedit quasi reiciendis. Sign the pact with ancient runes.</div>
<button class="btn-ritual view-more-trigger" data-idx="1">VIEW MORE <i class="fas fa-angle-double-right"></i></button>
</div>
</div>
<!-- Slide 3 - Wyvern Shadow -->
<div class="slide-item">
<img src="https://picsum.photos/id/107/1600/900" alt="Wyvern Shadow">
<div class="slide-overlay">
<h2><i class="fas fa-dragon"></i> NIGHTWYRM</h2>
<div class="lorem-text">Aut, iusto odit cupiditate magnam excepturi dicta ipsum impedit quasi reiciendis. Shadow wings eclipse the sun, bringer of eternal dusk.</div>
<button class="btn-ritual view-more-trigger" data-idx="2">VIEW MORE <i class="fas fa-angle-double-right"></i></button>
</div>
</div>
<!-- Slide 4 - Inferno King -->
<div class="slide-item">
<img src="https://picsum.photos/id/163/1600/900" alt="Inferno King">
<div class="slide-overlay">
<h2><i class="fas fa-crown"></i> ASH KING</h2>
<div class="lorem-text">Cupiditate magnam excepturi dicta ipsum impedit quasi reiciendis. The dragon devil rises from the ashes to claim the throne of fire.</div>
<button class="btn-ritual view-more-trigger" data-idx="3">VIEW MORE <i class="fas fa-angle-double-right"></i></button>
</div>
</div>
</div>
<!-- Progress indicator -->
<div class="auto-progress" id="progressFill"></div>
<button class="nav-arrow nav-prev" id="prevBtn"><i class="fas fa-chevron-left"></i></button>
<button class="nav-arrow nav-next" id="nextBtn"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="pagination-fire" id="firePagination"></div>
</div>
</body>
</html>CSS
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #050508;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
padding: 2rem;
position: relative;
overflow-x: hidden;
}
/* Animated ember particles background */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 40%, #0a0a0f 0%, #000000 100%);
z-index: -2;
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><circle cx="20%" cy="30%" r="2" fill="%23ff4422" opacity="0.4"><animate attributeName="opacity" values="0.2;0.8;0.2" dur="3s" repeatCount="indefinite"/></circle><circle cx="80%" cy="60%" r="3" fill="%23ff6622" opacity="0.3"><animate attributeName="opacity" values="0.3;0.9;0.3" dur="4s" repeatCount="indefinite"/></circle><circle cx="45%" cy="85%" r="1.5" fill="%23ff8833" opacity="0.5"><animate attributeName="opacity" values="0.5;1;0.5" dur="2.5s" repeatCount="indefinite"/></circle><circle cx="90%" cy="20%" r="2" fill="%23ff4411" opacity="0.4"><animate attributeName="opacity" values="0.2;0.7;0.2" dur="3.5s" repeatCount="indefinite"/></circle></svg>');
background-repeat: repeat;
opacity: 0.3;
pointer-events: none;
z-index: -1;
}
/* Main Container - Premium Glassmorphism */
.dragon-slayer {
max-width: 1400px;
width: 100%;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(12px);
border-radius: 3rem;
padding: 2rem 2rem 2.5rem 2rem;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 80, 40, 0.3) inset, 0 0 40px rgba(255, 40, 0, 0.2);
border: 1px solid rgba(255, 100, 50, 0.5);
transition: all 0.4s ease;
}
/* Header with animated underline */
.infernal-header {
text-align: center;
margin-bottom: 2.5rem;
position: relative;
}
.infernal-header h1 {
font-family: 'Cinzel', serif;
font-size: 4rem;
font-weight: 900;
background: linear-gradient(135deg, #ff6a3a, #ff2a1a, #ffaa44, #ff3a2a);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: fireGradient 4s ease infinite;
text-shadow: 0 0 20px rgba(255, 50, 0, 0.5);
letter-spacing: 4px;
}
@keyframes fireGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.infernal-header .sub {
color: #ffbc8c;
font-family: 'Cinzel', serif;
font-weight: 500;
font-size: 1rem;
letter-spacing: 3px;
margin-top: 10px;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.6);
display: inline-block;
padding: 0.4rem 1.8rem;
border-radius: 50px;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 100, 50, 0.5);
}
/* Slider Wrapper 3D Effect */
.slider-cinema {
position: relative;
border-radius: 2rem;
overflow: hidden;
box-shadow: 0 20px 40px -12px black, 0 0 0 3px rgba(255, 70, 30, 0.6), 0 0 0 8px rgba(0, 0, 0, 0.3);
transition: all 0.3s;
}
.slider-track {
display: flex;
transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.2, 1);
will-change: transform;
}
.slide-item {
flex: 0 0 100%;
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
cursor: pointer;
}
.slide-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s ease, filter 0.5s ease;
filter: brightness(0.85) contrast(1.2) saturate(1.3);
}
/* Advanced Overlay with parallax text */
.slide-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.2) 100%);
padding: 2.5rem 3rem 2rem 3rem;
transform: translateY(0);
transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
backdrop-filter: blur(4px);
}
.slide-overlay h2 {
font-family: 'Cinzel', serif;
font-size: 2.2rem;
font-weight: 800;
background: linear-gradient(120deg, #ffaa77, #ff5522);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 0.6rem;
letter-spacing: 2px;
}
.slide-overlay .lorem-text {
font-size: 0.95rem;
font-weight: 400;
color: #f0d6b5;
max-width: 70%;
margin-bottom: 1.2rem;
line-height: 1.5;
text-shadow: 0 1px 3px black;
}
.btn-ritual {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(95deg, #ff3a1a, #cc2a0a);
padding: 0.7rem 2rem;
border-radius: 60px;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
border: none;
cursor: pointer;
transition: all 0.3s;
font-family: 'Poppins', sans-serif;
box-shadow: 0 5px 15px rgba(255, 40, 0, 0.5);
position: relative;
overflow: hidden;
}
.btn-ritual::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.5s, height 0.5s;
}
.btn-ritual:hover::before {
width: 300px;
height: 300px;
}
.btn-ritual:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(255, 60, 0, 0.8);
background: linear-gradient(95deg, #ff551a, #ff2a00);
}
/* Navigation Buttons - Advanced */
.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 55px;
height: 55px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(12px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: #ffaa77;
cursor: pointer;
z-index: 30;
transition: all 0.3s;
border: 1px solid rgba(255, 100, 50, 0.7);
opacity: 0.7;
}
.nav-arrow:hover {
opacity: 1;
background: #ff451a;
color: white;
transform: translateY(-50%) scale(1.1);
border-color: #fff;
box-shadow: 0 0 20px rgba(255, 60, 0, 0.8);
}
.nav-prev {
left: 25px;
}
.nav-next {
right: 25px;
}
/* Pagination - Fire Dots */
.pagination-fire {
display: flex;
justify-content: center;
gap: 18px;
margin-top: 2rem;
}
.fire-dot {
width: 45px;
height: 4px;
background: rgba(255, 120, 70, 0.4);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
position: relative;
}
.fire-dot.active {
background: #ff5522;
width: 70px;
box-shadow: 0 0 12px #ff5522;
}
.fire-dot:hover {
background: #ff7744;
transform: scaleY(1.5);
}
/* Slide Hover Advanced Effects */
.slide-item:hover img {
transform: scale(1.08);
filter: brightness(1) contrast(1.25) saturate(1.4);
}
.slide-item:hover .slide-overlay {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 100%);
backdrop-filter: blur(8px);
}
/* Custom Modal - Epic */
.epic-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(20px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cinzel', serif;
animation: modalRise 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.modal-content {
max-width: 600px;
width: 90%;
background: linear-gradient(145deg, #1a0f0c, #0d0705);
border-radius: 2rem;
border: 2px solid #ff5522;
padding: 2.5rem;
text-align: center;
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 80, 30, 0.5);
transform: scale(0.9);
animation: modalScale 0.3s forwards;
}
@keyframes modalRise {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalScale {
to { transform: scale(1); }
}
.modal-content h3 {
font-size: 2rem;
background: linear-gradient(135deg, #ff8855, #ff3311);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 1rem;
}
.modal-content p {
color: #ffddbb;
margin: 1.5rem 0;
line-height: 1.6;
}
.modal-close {
background: #ff3a1a;
border: none;
padding: 0.8rem 2rem;
border-radius: 50px;
color: white;
font-weight: bold;
cursor: pointer;
font-family: 'Poppins', sans-serif;
transition: 0.2s;
}
.modal-close:hover {
background: #ff2200;
transform: scale(1.02);
}
/* Responsive */
@media (max-width: 850px) {
body { padding: 1rem; }
.dragon-slayer { padding: 1rem; }
.infernal-header h1 { font-size: 2.2rem; }
.slide-overlay h2 { font-size: 1.3rem; }
.slide-overlay .lorem-text { font-size: 0.7rem; max-width: 100%; }
.btn-ritual { padding: 0.4rem 1rem; font-size: 0.7rem; }
.nav-arrow { width: 40px; height: 40px; font-size: 1.2rem; }
.slide-overlay { padding: 1rem 1.2rem; }
}
/* Progress bar for auto slide */
.auto-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, #ff5522, #ffaa33);
width: 0%;
z-index: 20;
transition: width 0.05s linear;
border-radius: 2px;
}
</style>JavaScript
<script>
(function() {
// DOM elements
const track = document.getElementById('sliderTrack');
const slides = Array.from(document.querySelectorAll('.slide-item'));
const prevButton = document.getElementById('prevBtn');
const nextButton = document.getElementById('nextBtn');
const paginationContainer = document.getElementById('firePagination');
const progressFill = document.getElementById('progressFill');
let currentIdx = 0;
const total = slides.length;
let autoInterval = null;
let progressInterval = null;
const AUTO_DURATION = 5500; // 5.5 sec
let remainingTime = AUTO_DURATION;
let isPaused = false;
let startTime = 0;
let animationFrame = null;
// Update slider position
function updateSlider(instant = false) {
if (!track) return;
const shift = - (currentIdx * 100);
track.style.transition = instant ? 'none' : 'transform 0.8s cubic-bezier(0.25, 0.1, 0.2, 1)';
track.style.transform = `translateX(${shift}%)`;
if (instant) {
// force reflow
void track.offsetHeight;
track.style.transition = 'transform 0.8s cubic-bezier(0.25, 0.1, 0.2, 1)';
}
updatePagination();
}
// Update dots active state
function updatePagination() {
const dots = document.querySelectorAll('.fire-dot');
dots.forEach((dot, idx) => {
if (idx === currentIdx) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
}
// Go to specific slide
function goToSlide(index, resetTimer = true) {
if (index < 0) index = 0;
if (index >= total) index = total - 1;
if (currentIdx === index) return;
currentIdx = index;
updateSlider(false);
if (resetTimer) {
resetAutoProgress();
}
}
function nextSlide() {
let next = currentIdx + 1;
if (next >= total) next = 0;
goToSlide(next, true);
}
function prevSlide() {
let prev = currentIdx - 1;
if (prev < 0) prev = total - 1;
goToSlide(prev, true);
}
// Advanced auto progress with animation
function startAutoProgress() {
if (progressInterval) clearInterval(progressInterval);
if (animationFrame) cancelAnimationFrame(animationFrame);
if (!isPaused) {
remainingTime = AUTO_DURATION;
const startTimestamp = performance.now();
function updateProgressBar(now) {
const elapsed = now - startTimestamp;
let percent = (elapsed / AUTO_DURATION) * 100;
if (percent >= 100) {
percent = 100;
if (progressFill) progressFill.style.width = '100%';
cancelAnimationFrame(animationFrame);
return;
}
if (progressFill) progressFill.style.width = `${percent}%`;
animationFrame = requestAnimationFrame(updateProgressBar);
}
animationFrame = requestAnimationFrame(updateProgressBar);
// set interval to change slide after duration
progressInterval = setTimeout(() => {
if (!isPaused) {
nextSlide();
}
}, AUTO_DURATION);
}
}
function resetAutoProgress() {
if (progressInterval) {
clearTimeout(progressInterval);
progressInterval = null;
}
if (animationFrame) {
cancelAnimationFrame(animationFrame);
animationFrame = null;
}
if (progressFill) progressFill.style.width = '0%';
if (!isPaused) {
startAutoProgress();
}
}
function pauseAutoSlider() {
if (isPaused) return;
isPaused = true;
if (progressInterval) {
clearTimeout(progressInterval);
progressInterval = null;
}
if (animationFrame) {
cancelAnimationFrame(animationFrame);
animationFrame = null;
}
}
function resumeAutoSlider() {
if (!isPaused) return;
isPaused = false;
resetAutoProgress();
}
// Hover pause/resume
const cinemaWrapper = document.getElementById('cinemaSlider');
if (cinemaWrapper) {
cinemaWrapper.addEventListener('mouseenter', () => {
pauseAutoSlider();
});
cinemaWrapper.addEventListener('mouseleave', () => {
resumeAutoSlider();
});
}
// Generate Fire Dots
function generatePagination() {
paginationContainer.innerHTML = '';
for (let i = 0; i < total; i++) {
const dot = document.createElement('div');
dot.classList.add('fire-dot');
if (i === currentIdx) dot.classList.add('active');
dot.addEventListener('click', () => {
goToSlide(i, true);
});
paginationContainer.appendChild(dot);
}
}
// Advanced Modal for View More
function showAdvancedModal(title, description) {
const existingModal = document.querySelector('.epic-modal');
if (existingModal) existingModal.remove();
const modalDiv = document.createElement('div');
modalDiv.className = 'epic-modal';
modalDiv.innerHTML = `
<div class="modal-content">
<h3><i class="fas fa-skull"></i> ${title} <i class="fas fa-dragon"></i></h3>
<p>${description}</p>
<button class="modal-close"><i class="fas fa-ban"></i> CLOSE PORTAL</button>
</div>
`;
document.body.appendChild(modalDiv);
const closeBtn = modalDiv.querySelector('.modal-close');
closeBtn.addEventListener('click', () => modalDiv.remove());
modalDiv.addEventListener('click', (e) => {
if (e.target === modalDiv) modalDiv.remove();
});
}
// View More data
const modalData = [
{ title: "🔥 EMBER DRAGON'S WRATH 🔥", desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis blanditiis mollitia similique, aut, iusto odit cupiditate magnam excepturi dicta ipsum impedit quasi reiciendis. The dragon devil unleashes apocalyptic flames that scorch the heavens." },
{ title: "💀 BLOOD PACT CONTRACT 💀", desc: "Consectetur adipisicing elit. Omnis blanditiis mollitia similique, aut, iusto odit cupiditate magnam excepturi dicta ipsum impedit quasi reiciendis. Sign with infernal blood to gain forbidden powers." },
{ title: "🌙 NIGHTWYRM ASCENSION 🌙", desc: "Aut, iusto odit cupiditate magnam excepturi dicta ipsum impedit quasi reiciendis. The ancient wyvern rises under lunar eclipse, binding souls to eternal darkness." },
{ title: "👑 ASH KING'S DOMINION 👑", desc: "Cupiditate magnam excepturi dicta ipsum impedit quasi reiciendis. The dragon devil claims the throne of cinders, ruling over fallen realms with iron and fire." }
];
function setupViewMoreButtons() {
const btns = document.querySelectorAll('.view-more-trigger');
btns.forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const idxAttr = btn.getAttribute('data-idx');
let idx = parseInt(idxAttr, 10);
if (isNaN(idx)) {
const parentSlide = btn.closest('.slide-item');
if (parentSlide) idx = slides.indexOf(parentSlide);
}
if (idx >= 0 && idx < modalData.length) {
showAdvancedModal(modalData[idx].title, modalData[idx].desc);
} else {
showAdvancedModal("DRAGON DEVIL LEGEND", "Embrace the ancient power. The infernal legacy never fades.");
}
});
});
}
// Keyboard navigation
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
prevSlide();
e.preventDefault();
} else if (e.key === 'ArrowRight') {
nextSlide();
e.preventDefault();
}
});
// Initialize
function init() {
generatePagination();
updateSlider(true);
startAutoProgress();
setupViewMoreButtons();
prevButton.addEventListener('click', () => {
prevSlide();
resetAutoProgress();
});
nextButton.addEventListener('click', () => {
nextSlide();
resetAutoProgress();
});
}
init();
})();
</script>