ikas product detail small pictures

ikas-product-detail-small-pictures.html

<style>
/* tüm görsellerin görünmesi */
@media (width>=1024px) {
  .slider__main__h {
    --scrollbar-color: #007a33;
    --scrollbar-color-hover: #005c26;
    .slick-track { transform: none !important;}
    .slick-list { height: auto !important; }
    .slick-slide.slick-cloned,
    .slider-action { display: none; }
  }

  /* 1. Elementin temel hali (Scroll görünmez) */
  .product-detail-page-slider .slider-container .slick-track {
    max-height: 820px;
    overflow-y: auto;
    overflow-x: hidden;
  
    /* Firefox için başlangıçta gizle */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
  }

  /* 2. Mouse ile üzerine gelince görünür yap (Firefox) */
  .product-detail-page-slider .slider-container .slick-track:hover {
    scrollbar-color: var(--scrollbar-color) transparent;
  }

  /* --- Webkit (Chrome, Edge, Safari) Ayarları --- */

  /* Scrollbar genel genişliği - "thin"den daha ince (4px) */
  .product-detail-page-slider .slider-container .slick-track::-webkit-scrollbar {
    width: 4px;
  }

  /* Kaydırma yolu (Arkaplan) - Her zaman şeffaf */
  .product-detail-page-slider .slider-container .slick-track::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Hareket eden çubuk - Normalde şeffaf (Gizli) */
  .product-detail-page-slider .slider-container .slick-track::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background 0.3s ease;
  }

  /* Mouse üzerine gelince çubuğu renklendir (Görünür yap) */
  .product-detail-page-slider .slider-container .slick-track:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
  }

  /* Çubuğun üzerine gelince biraz daha koyulaşsın (Opsiyonel) */
  .product-detail-page-slider .slider-container .slick-track::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-color-hover);
  }
}
</style>