إضافة شاشة تمرير مخصصة فوق زر إنشاء المنشور

مطور
1

أنا أتطلع إلى إضافة شريط تمرير مخصص فوق زر “إنشاء منشور”، وأريده أن يكون خاصًا بصفحة المواضيع. هل هناك طريقة لتنفيذ ذلك، أم يجب علي إجراء التغييرات مباشرة في المستودع؟ أنا أستخدم سمة Redditish بواسطة @awesomerobot.

لقد قمت بتضمين مقتطف من HTML و CSS أدناه لمن يرغب في استخدامه. لا تتردد في تخصيصه حسب الحاجة - لقد أجريت بالفعل بعض التعديلات لمنتدى الخاص بي. ملاحظة: أنا لا أتقاضى أي شيء مقابل هذا.

HTML:

<div class="image-scrollbar-container">
  <a href="https://example.com/link1">
    <img src="https://res.cloudinary.com/dn1hjjczy/image/upload/v1729712069/6_oqnefr.png" alt="Image 1">
  </a>
  <a href="https://example.com/link2">
    <img src="https://res.cloudinary.com/dn1hjjczy/image/upload/v1729712069/6_oqnefr.png" alt="Image 2">
  </a>
  <a href="https://example.com/link3">
    <img src="https://res.cloudinary.com/dn1hjjczy/image/upload/v1729712069/6_oqnefr.png" alt="Image 3">
  </a>
  <a href="https://example.com/link4">
    <img src="https://res.cloudinary.com/dn1hjjczy/image/upload/v1729712069/6_oqnefr.png" alt="Image 4">
  </a>
  <a href="https://example.com/link5">
    <img src="https://res.cloudinary.com/dn1hjjczy/image/upload/v1729712069/6_oqnefr.png" alt="Image 5">
  </a>
</div>

CSS:

.image-scrollbar-container {
  display: flex;
  overflow-x: auto;
  padding: 5px 0;
  margin-top: 10px;
  gap: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.image-scrollbar-container::-webkit-scrollbar {
  display: none;
}

.image-scrollbar-container img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-scrollbar-container img:hover {
  transform: scale(1.1);
}

@media (min-width: 768px) {
  .image-scrollbar-container {
    gap: 10px;
    margin-top: 15px;
    padding: 8px 0;
  }

  .image-scrollbar-container img {
    width: 60px;
    height: 60px;
  }
}

@media (min-width: 1024px) {
  .image-scrollbar-container {
    gap: 15px;
    margin-top: 20px;
    padding: 10px 0;
  }

  .image-scrollbar-container img {
    width: 80px;
    height: 80px;
  }
}

أيضًا، هذا الهاتف أولاً ويمكنك تخصيصه بسهولة.