Product Thumbnail Slider With Zoom Effect Jquery Codepen File
.nav-btn:hover background: #1e2f4b; color: white; transform: scale(0.96);
<!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>Product Thumbnail Slider with Zoom Effect | jQuery & GSAP</title> <!-- Google Fonts & Font Awesome for clean icons --> <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- jQuery & GSAP for smooth zoom and slider --> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <style> * margin: 0; padding: 0; box-sizing: border-box;
// Update active thumbnail UI function updateActiveThumbnail() $('.thumb-item').removeClass('active-thumb'); $('.thumb-item').eq(currentIndex).addClass('active-thumb'); // optional: scroll thumbnail into view horizontally const $activeThumb = $('.thumb-item').eq(currentIndex); if ($activeThumb.length) const containerLeft = $thumbWrapper.scrollLeft(); const containerWidth = $thumbWrapper.width(); const thumbLeft = $activeThumb.position().left; const thumbWidth = $activeThumb.outerWidth(); if (thumbLeft < containerLeft product thumbnail slider with zoom effect jquery codepen
// Current active index let currentIndex = 0; let currentZoomScale = 1; let isZooming = false; let zoomTween = null; // GSAP tween reference
.thumbnail-track-wrapper::-webkit-scrollbar height: 6px; .nav-btn:hover background: #1e2f4b
<div class="product-showcase"> <div class="product-grid"> <!-- Zoomable main area --> <div class="zoom-container" id="zoomContainer"> <img class="main-image" id="mainImage" src="https://picsum.photos/id/20/800/600" alt="Product main view"> <div class="zoom-badge"> <i class="fas fa-search-plus"></i> Hover to zoom </div> </div>
.slider-title font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #2c3e66; background: rgba(255,255,240,0.6); padding: 0.2rem 0.8rem; border-radius: 40px; meta name="viewport" content="width=device-width
/* zoom indicator badge */ .zoom-badge position: absolute; bottom: 16px; right: 16px; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); padding: 6px 12px; border-radius: 40px; font-size: 0.7rem; font-weight: 500; color: white; letter-spacing: 0.3px; pointer-events: none; font-family: monospace;
