<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Modern Image Slider | Learn With Arshyan</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.slider-container {
position: relative;
width: 90%;
max-width: 850px;
height: 480px;
overflow: hidden;
border-radius: 25px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.slides {
display: flex;
transition: transform 0.7s ease-in-out;
height: 100%;
}
.slide {
min-width: 100%;
height: 100%;
position: relative;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(80%);
transition: transform 0.5s ease;
}
.slide:hover img {
transform: scale(1.03);
}
.slide .text-overlay {
position: absolute;
bottom: 30px;
left: 30px;
color: white;
background: rgba(255, 255, 255, 0.1);
padding: 20px 30px;
border-radius: 15px;
backdrop-filter: blur(8px);
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
animation: fadeInUp 1s ease;
}
@keyframes fadeInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.nav-buttons {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 2;
}
.nav-buttons button {
background: rgba(255, 255, 255, 0.2);
border: none;
padding: 14px 18px;
margin: 0 10px;
font-size: 24px;
border-radius: 50%;
color: #fff;
cursor: pointer;
backdrop-filter: blur(6px);
transition: background 0.3s ease;
}
.nav-buttons button:hover {
background: rgba(255, 255, 255, 0.4);
}
.indicators {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.dot {
display: inline-block;
width: 14px;
height: 14px;
margin: 0 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(6px);
cursor: pointer;
transition: background 0.3s;
}
.dot.active {
background: linear-gradient(45deg, #00f2fe, #4facfe);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}
@media(max-width: 600px) {
.slide .text-overlay {
font-size: 14px;
padding: 15px 20px;
}
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slides" id="slides">
<div class="slide">
<img decoding="async" src="https://picsum.photos/id/1015/900/480" alt="Slide 1" />
<div class="text-overlay">
<h2>Explore Nature</h2>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p>Find peace in beautiful outdoor scenes</p>
</div>
</div>
<div class="slide">
<img decoding="async" src="https://picsum.photos/id/1016/900/480" alt="Slide 2" />
<div class="text-overlay">
<h2>Urban Life</h2>
<p>Discover energy in every city view</p>
</div>
</div>
<div class="slide">
<img decoding="async" src="https://picsum.photos/id/1018/900/480" alt="Slide 3" />
<div class="text-overlay">
<h2>Mountains & Clouds</h2>
<p>Breathe in the calm above the clouds</p>
</div>
</div>
</div>
<!-- Navigation -->
<div class="nav-buttons">
<button onclick="prevSlide()">❮</button>
<button onclick="nextSlide()">❯</button>
</div>
<!-- Indicators -->
<div class="indicators" id="indicators"></div>
</div>
<script>
const slides = document.getElementById("slides");
const totalSlides = slides.children.length;
const indicators = document.getElementById("indicators");
let currentIndex = 0;
// Generate indicators
for (let i = 0; i < totalSlides; i++) {
const dot = document.createElement("div");
dot.className = "dot" + (i === 0 ? " active" : "");
dot.onclick = () => showSlide(i);
indicators.appendChild(dot);
}
function showSlide(index) {
if (index < 0) index = totalSlides - 1;
if (index >= totalSlides) index = 0;
currentIndex = index;
slides.style.transform = `translateX(-${index * 100}%)`;
document.querySelectorAll(".dot").forEach((dot, i) => {
dot.classList.toggle("active", i === index);
});
}
function nextSlide() {
showSlide(currentIndex + 1);
}
function prevSlide() {
showSlide(currentIndex - 1);
}
// Auto-slide every 6 seconds
setInterval(() => {
nextSlide();
}, 6000);
</script>
</body>
</html>
]]>
