<div class="mani-wide-slider-wrapper">
<center><h1>MY E-BOOKS</h1></center><br />
<div class="book-slider-container">
<button class="slide-nav prev-btn" onclick="moveManiWideSlide(-1)">❮</button>
<div class="book-slider-viewport">
<div class="book-slider-track">
<div class="book-slide">
<a href="BOOK_LINK_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kUGF8Mg2sFEy4yIzFtaNwfS4BZstvsqbTvYSSjc7pwBJ35AWuYaC1gggDfgzyV2Bo7dXEPnfaTPldmxtmkL3Z0qokqnz5j_sQj6cdWni-LnBc3wxYDCTssSoqXBm4UjNu5cun6ik-RGt6fhY8sVcvKvlPNPlOoKKwsJYCpuWKdMk2sCwt_1N_VSKduhC/s16000/CHAPTER%201%20%E2%80%94%20When%20the%20Wind%20First%20Touches%20the%20Heart.jpeg" alt="Book 1" /></a>
</div>
<div class="book-slide">
<a href="BOOK_LINK_2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kUGF8Mg2sFEy4yIzFtaNwfS4BZstvsqbTvYSSjc7pwBJ35AWuYaC1gggDfgzyV2Bo7dXEPnfaTPldmxtmkL3Z0qokqnz5j_sQj6cdWni-LnBc3wxYDCTssSoqXBm4UjNu5cun6ik-RGt6fhY8sVcvKvlPNPlOoKKwsJYCpuWKdMk2sCwt_1N_VSKduhC/s16000/CHAPTER%201%20%E2%80%94%20When%20the%20Wind%20First%20Touches%20the%20Heart.jpeg" alt="Book 2" /></a>
</div>
<div class="book-slide">
<a href="BOOK_LINK_3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kUGF8Mg2sFEy4yIzFtaNwfS4BZstvsqbTvYSSjc7pwBJ35AWuYaC1gggDfgzyV2Bo7dXEPnfaTPldmxtmkL3Z0qokqnz5j_sQj6cdWni-LnBc3wxYDCTssSoqXBm4UjNu5cun6ik-RGt6fhY8sVcvKvlPNPlOoKKwsJYCpuWKdMk2sCwt_1N_VSKduhC/s16000/CHAPTER%201%20%E2%80%94%20When%20the%20Wind%20First%20Touches%20the%20Heart.jpeg" alt="Book 3" /></a>
</div>
<div class="book-slide">
<a href="BOOK_LINK_4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kUGF8Mg2sFEy4yIzFtaNwfS4BZstvsqbTvYSSjc7pwBJ35AWuYaC1gggDfgzyV2Bo7dXEPnfaTPldmxtmkL3Z0qokqnz5j_sQj6cdWni-LnBc3wxYDCTssSoqXBm4UjNu5cun6ik-RGt6fhY8sVcvKvlPNPlOoKKwsJYCpuWKdMk2sCwt_1N_VSKduhC/s16000/CHAPTER%201%20%E2%80%94%20When%20the%20Wind%20First%20Touches%20the%20Heart.jpeg" alt="Book 4" /></a>
</div>
<div class="book-slide">
<a href="BOOK_LINK_5"><img src="IMAGE_URL_5.jpg" alt="Book 5" /></a>
</div>
<div class="book-slide">
<a href="BOOK_LINK_6"><img src="IMAGE_URL_6.jpg" alt="Book 6" /></a>
</div>
<div class="book-slide">
<a href="BOOK_LINK_7"><img src="IMAGE_URL_7.jpg" alt="Book 7" /></a>
</div>
</div>
</div>
<button class="slide-nav next-btn" onclick="moveManiWideSlide(1)">❯</button>
</div>
</div>
<style>
/* CSS Namespace - Theme Safe */
.mani-wide-slider-wrapper {
width: 100%;
max-width: 680px; /* Desktop ke liye width badha di hai */
margin: 30px auto;
font-family: Arial, sans-serif;
text-align: center;
box-sizing: border-box;
}
.mani-wide-slider-wrapper * {
box-sizing: border-box;
}
/* Header Styles */
.mani-wide-slider-wrapper .slider-header h2 {
font-size: 22px;
color: #333;
margin: 0 0 6px 0;
font-weight: 600;
}
.mani-wide-slider-wrapper .slider-header p {
font-size: 13px;
color: #666;
margin: 0 0 20px 0;
}
/* Slider Layout */
.mani-wide-slider-wrapper .book-slider-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 45px; /* Arrows ke liye desktop standard spacing */
}
.mani-wide-slider-wrapper .book-slider-viewport {
width: 580px; /* Desktop par 3 badi books set karne ke liye width */
overflow: hidden;
}
.mani-wide-slider-wrapper .book-slider-track {
display: flex;
gap: 20px; /* Desktop par books ke beech thoda achha gap */
transition: transform 0.4s ease-in-out;
}
/* Individual Book Slide - Desktop View (Proportional A4 Size) */
.mani-wide-slider-wrapper .book-slide {
width: 180px; /* Desktop par width badi ki hai */
height: 254px; /* Perfect A4 ratio (180 x 1.41) */
flex-shrink: 0;
}
.mani-wide-slider-wrapper .book-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Choti si shadow premium look ke liye */
display: block;
}
/* Navigation Buttons */
.mani-wide-slider-wrapper .slide-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: background 0.3s;
}
.mani-wide-slider-wrapper .slide-nav:hover {
background: rgba(0, 0, 0, 0.9);
}
.mani-wide-slider-wrapper .prev-btn { left: 0; }
.mani-wide-slider-wrapper .next-btn { right: 0; }
/* Responsive Media Queries: Sirf mobile/tablet par size automatic chota hoga */
@media (max-width: 680px) {
.mani-wide-slider-wrapper {
max-width: 480px;
}
.mani-wide-slider-wrapper .book-slider-viewport {
width: 380px; /* Tablet/Chote desktop par viewport adjust hoga */
}
.mani-wide-slider-wrapper .book-slide {
width: 113px; /* Mobile standard width */
height: 160px; /* Mobile standard height */
}
.mani-wide-slider-wrapper .book-slider-track {
gap: 15px;
}
}
@media (max-width: 440px) {
.mani-wide-slider-wrapper {
max-width: 300px;
}
.mani-wide-slider-wrapper .book-slider-viewport {
width: 245px; /* Chote mobile par screen ke hisab se set */
}
}
</style>
<script>
let currentManiWideIndex = 0;
const totalManiWideItems = 7;
const wideVisibleItems = 3;
function moveManiWideSlide(direction) {
// Desktop aur mobile dono ke liye runtime par gap aur width track karne ke liye
const track = document.querySelector('.mani-wide-slider-wrapper .book-slider-track');
const slide = document.querySelector('.mani-wide-slider-wrapper .book-slide');
if (!track || !slide) return;
// Har slide ki dynamic width aur unke beech ka gap calculate karne ke liye
const slideWidth = slide.getBoundingClientRect().width;
const gap = parseFloat(window.getComputedStyle(track).gap) || 0;
const stepWidth = slideWidth + gap;
currentManiWideIndex += direction;
const maxIndex = totalManiWideItems - wideVisibleItems;
if (currentManiWideIndex > maxIndex) {
currentManiWideIndex = 0; // Wapas starting par
} else if (currentManiWideIndex < 0) {
currentManiWideIndex = maxIndex; // Last set par
}
track.style.transform = `translateX(-${currentManiWideIndex * stepWidth}px)`;
}
</script>