can u try this.. Here’s a drop-in replacement for **ONLY the avatar block** inside the profile card. Copy → paste it over the existing `<div class="flex flex-col md:flex-row items-center"> … </div>` and you’re done. ```html <!-- ░░ Avatar + Info + Slider ░░ --> <div class="flex flex-col md:flex-row items-center gap-6"> <!-- LEFT ─ avatar & text (unchanged) --> <div class="flex flex-col items-center md:items-start text-center md:text-left"> <!-- same rotating-avatar stack you already use --> <div class="w-32 h-32 rounded-full border-4 border-white shadow-xl overflow-hidden relative group md:mb-0"> <img src="https://i.ibb.co/1t0M5k7R/images-1.jpg" class="absolute inset-0 w-full h-full object-cover transition-all duration-700 group-hover:scale-110" /> <img src="https://i.ibb.co/DfMG1kGM/f9940ecbe7e45274bd1c2df4cc92d245-tplv-tiktokx-cropcenter-1080-1080.jpg" class="absolute inset-0 w-full h-full object-cover opacity-0 transition-all duration-700 group-hover:opacity-100 group-hover:scale-110" /> <img src="https://i.ibb.co/1tkxpQZs/images-2.jpg" class="absolute inset-0 w-full h-full object-cover opacity-0 transition-all duration-700 delay-75 group-hover:opacity-100 group-hover:scale-110" /> <div class="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity rounded-full"> <span class="text-white text-xs font-bold bg-pink-500 px-2 py-1 rounded-full"> <i class="fas fa-images mr-1"></i> +3 </span> </div> </div> <h2 class="text-3xl font-bold text-gray-900 mt-4 md:mt-0">Gem, 25</h2> <p class="text-gray-600">Modelo • Creativa • Anti-cocaína</p> <span class="mt-3 inline-block bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm font-medium"> <i class="fas fa-heart mr-1"></i> Busca algo serio </span> </div> <!-- RIGHT ─ swipe gallery on desktop / thumb-strip on mobile --> <div class="w-full md:w-1/3"> <div class="swiper myGemPix rounded-lg overflow-hidden"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://i.ibb.co/1t0M5k7R/images-1.jpg" class="w-full h-44 md:h-56 object-cover" /> </div> <div class="swiper-slide"> <img src="https://i.ibb.co/DfMG1kGM/f9940ecbe7e45274bd1c2df4cc92d245-tplv-tiktokx-cropcenter-1080-1080.jpg" class="w-full h-44 md:h-56 object-cover" /> </div> <div class="swiper-slide"> <img src="https://i.ibb.co/1tkxpQZs/images-2.jpg" class="w-full h-44 md:h-56 object-cover" /> </div> </div> <!-- ▸ bullets on desktop • thumbs on mobile (auto) --> <div class="swiper-pagination md:hidden"></div> </div> </div> </div> ``` **JS / CSS (once at the end of `<body>`)** ```html <script src="https://unpkg.com/swiper/swiper-bundle.min.js" defer></script> <script> window.addEventListener('DOMContentLoaded', () => { new Swiper('.myGemPix', { loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, slidesPerView: 3, // thumbnail strip on mobile spaceBetween: 6, breakpoints: { // turn into big slider on ≥768 px 768: { slidesPerView: 1 } } }); }); </script> ``` ### How it works * **Mobile (< 768 px)** – the gallery shows three tiny slides side-by-side (acts like thumbnails) plus dot pagination. * **Desktop** – `breakpoints` collapses it to one big photo, giving a clean two-column look beside the profile details. No other markup changes needed. Save, refresh your HF Space, and you’ll see the slider exactly where you wanted.... heres 3p hotos <a href="https://ibb.co/r2pbQMbp"><img src="https://i.ibb.co/DfMG1kGM/f9940ecbe7e45274bd1c2df4cc92d245-tplv-tiktokx-cropcenter-1080-1080.jpg" alt="f9940ecbe7e45274bd1c2df4cc92d245-tplv-tiktokx-cropcenter-1080-1080" border="0"></a> <a href="https://imgbb.com/"><img src="https://i.ibb.co/1tkxpQZs/images-2.jpg" alt="images-2" border="0"></a> <a href="https://imgbb.com/"><img src="https://i.ibb.co/G4NFMHvr/images.jpg" alt="images" border="0"></a> ignore the html pull only image file url - Follow Up Deployment
verified spwotton commited on Jun 6, 2025 
