Product Thumbnail Slider With Zoom Effect Jquery Codepen «Essential»
/* 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;
<!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;
.thumbnail-track display: flex; gap: 1rem; padding: 0.2rem 0.2rem; product thumbnail slider with zoom effect jquery codepen
<script> // ---------- PRODUCT DATA (High-res images + thumbnails) ---------- // We'll use a set of curated product-style images from picsum + unsplash style but high quality. // For demo, realistic product variations: watch, bag, sneakers, camera etc. const galleryItems = [ large: "https://picsum.photos/id/20/1200/900", // classic coffee & macbook thumb: "https://picsum.photos/id/20/150/150", alt: "Premium workspace" , large: "https://picsum.photos/id/26/1200/900", // venice water thumb: "https://picsum.photos/id/26/150/150", alt: "Venice inspired" , large: "https://picsum.photos/id/30/1200/900", // coffee beans thumb: "https://picsum.photos/id/30/150/150", alt: "Artisan coffee" , large: "https://picsum.photos/id/42/1200/900", // piano thumb: "https://picsum.photos/id/42/150/150", alt: "Grand piano" , large: "https://picsum.photos/id/52/1200/900", // canyon thumb: "https://picsum.photos/id/52/150/150", alt: "Desert canyon" , large: "https://picsum.photos/id/96/1200/900", // mountain thumb: "https://picsum.photos/id/96/150/150", alt: "Alpine vista" ];
.thumbnail-track-wrapper::-webkit-scrollbar-thumb background: #9aaec0; border-radius: 10px; /* zoom indicator badge */
/* main image container with zoom effect */ .zoom-container position: relative; width: 100%; background: #fff; border-radius: 1.8rem; overflow: hidden; box-shadow: 0 20px 35px -10px rgba(0,0,0,0.15); cursor: crosshair; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
.thumbnail-track-wrapper::-webkit-scrollbar height: 6px; padding: 6px 12px
// Reset zoom animation to original function resetZoomWithGSAP() if (zoomTween) zoomTween.kill(); gsap.to($mainImg[0], duration: 0.3, scale: 1, transformOrigin: "center center", ease: "power2.out", overwrite: true, ); currentZoomScale = 1; isZooming = false;
/* main product card container */ .product-showcase max-width: 1280px; width: 100%; background: rgba(255,255,255,0.75); backdrop-filter: blur(2px); border-radius: 2.5rem; box-shadow: 0 25px 45px -12px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.05); padding: 2rem 2rem 2rem 2rem; transition: all 0.2s ease;
/* slider track */ .thumbnail-track-wrapper overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; border-radius: 1.5rem; padding-bottom: 0.5rem;