مزالق المعرض التدويري مع مكون Tiles المميز على الهواتف المحمولة؟

مطور
1

أريد أن يكون لدي شريط تمرير دوار في أعلى الصفحة الرئيسية لموقعي وصفحات الفئات، يمكن تحديد بعض المواضيع والصور المميزة وتعيينها من خلال لوحة الإعدادات.

سابقًا، أردت الحصول على التأثير التالي على كل من أجهزة الكمبيوتر المكتبية والأجهزة المحمولة :point_down:

carousel-cover-1200x900
carousel-cover-1200x9001200×900 25.2 KB

هذا يعطي تلميحًا ولكن العمل لا يزال قيد التقدم

لذلك، استشرت @Moin لتجربة مكون “Featured Tiles”. ومع ذلك، لا يوجد تأثير دوار وهو غير مناسب للأجهزة المحمولة. لقد قمت ببعض العمل لتحقيق ذلك :point_down:

سطح المكتب

الهاتف المحمول

ومع ذلك، هناك مشكلتان في جانب الهاتف المحمول،

  1. عندما أذهب إلى الصفحة الرئيسية من صفحة الموضوع، يفشل التأثير الدوار، إلا إذا نقرت على زر الصفحة الرئيسية مرة أخرى، يبدو أن جافاسكريبت لم يتم تحميله

  2. يحدث خطأ Uncaught TypeError

    image
    image1695×328 43.5 KB

جافاسكريبت الذي أستخدمه :point_down:

<script type="text/discourse-plugin" version="0.8.13">
window.onload = function() {

let slideshowInterval;

function initSlideshow() {
  const container = document.querySelector(".featured-tiles-container");
  const tiles = document.querySelectorAll(".featured-tile");
  const slideWidth = tiles[0].offsetWidth;
  let currentIndex = 0;
  let canSlide = true;

  function slideLeft() {
    if (canSlide) {
      canSlide = false;
      currentIndex = (currentIndex + 1) % tiles.length;
      const offset = -currentIndex * slideWidth;
      container.style.transition = "transform 0.5s ease-in-out";
      container.style.transform = `translateX(${offset}px)`;

      setTimeout(() => {
        canSlide = true;
        container.style.transition = "none";
      }, 500);
    }
  }

  function startSlideshow() {
    slideLeft();
    slideshowInterval = setInterval(slideLeft, 3000);
  }

  startSlideshow();
}

function destroySlideshow() {
  clearInterval(slideshowInterval);
}

api.onPageChange((url) => {
  destroySlideshow();
  if (url === "/" || url.indexOf("/c/") === 0) {
    initSlideshow();
  }
});

}
</script>

@Arkshine @Lilly هل هناك أي حلول أو أفكار؟

إعجاب واحد (1)
2

مرحباً @Dennis_P_Z :wave:

أعتقد أنه يمكنك تحقيق ما تريده باستخدام هذه المكونات:

إعجاب واحد (1)
3

شكراً لك ولكن الأمر مختلف

4

يقول إنه قيد العمل في الرابط.

إعجابَين (2)
5

ربما يكون أحد هذه المكونات بديلاً. يمكنك وضع المواضيع في الأعلى ولكن لا توجد عجلة دوارة.

إعجاب واحد (1)
6

مرحباً @Moin شكراً على النصيحة. سأحاول إذا كان بإمكاني جعل الدوار ممكناً :wink:

7

اختبرته بدافع الفضول. المكون يعمل بشكل جيد.
تحتاج إلى صورتين على الأقل، وهو مقيد بمسار /categories لسبب ما. :slight_smile:

chrome_LYxltGVnmc
.

إعجابَين (2)
8

ضحكة لطيفة! :ok_hand: لم أختبر. افترضت فقط من OP وأنه نظرًا لأنه قيل إنه قيد العمل ولم يكن هناك معلومات موضوع تعريفية في مستودع git أنه لم يكن يعمل. :woman_shrugging:t2:

أيضًا، مكون رائع. :slight_smile:

إعجاب واحد (1)
9

@Moin لقد جربت مع الملفات المميزة، وأخيراً حققت دواراً باستخدام CSS مخصص وجافاسكريبت، ولكن يلزم إضافة CSS إضافي ليكون ودوداً على الهواتف المحمولة :joy:

mmexport1697920795005

3 إعجابات
10

:+1:
لا تنس مشاركة Theme component الخاص بك في النهاية

3 إعجابات
11

مرحباً @Arkshine
أحتاج الميزة على الصفحة الرئيسية وصفحات الفئات، والأفضل أن يمكن استدعاء الصورة داخل الموضوع. سنمنح المؤلف المزيد من الوقت :yum:

لقد قمت بتحديث الموضوع الأصلي، يرجى إلقاء نظرة وإذا كانت لديك أي أفكار
بارك الله فيك!
@Lilly @Moin

إعجاب واحد (1)
12

الاقتصاص يبدو سيئًا جدًا :frowning: أين عيون الجرو؟! :cry:

من الناحية المثالية، يجب الحفاظ على نسبة العرض إلى الارتفاع.

نقترح الحفاظ على الارتفاع مع توسيط الصورة أفقيًا.

إعجاب واحد (1)
13

صحيح، إنها دائمًا مسألة اختيار على الشاشات الصغيرة، الصور المشوهة ليست جيدة :rofl:

إعجاب واحد (1)
15

إذا كنت لا تزال ترغب في تجربة هذه المكونة، فقد قمت بعمل نسخة لإضافة إعداد show_on حيث يمكنك اختيار مكان عرضها.

URL: https://github.com/Arkshine/discourse-big-carousel-component
اسم الفرع: feature/new_settings

image
image706×324 7.01 KB

(لا أعرف ما هو وضع المكون الأصلي، آمل أن يكون من المقبول عمل نسخة منه :pray: ولست متأكدًا مما إذا كان يجب أن أقترح عليهم التغييرات).

4 إعجابات
16

شكرا. بصراحة سيكون ذلك مفيدًا جدًا للمكونة ومستخدميها.

إعجاب واحد (1)
17

مرحباً! عمل رائع :+1:
بالأمس قمت بتثبيت مكون السمة هذا، كل شيء يعمل بشكل جيد باستثناء:

  1. عندما أقوم بالتمرير عبر الكاروسيل، في مرحلة ما تنقسم الصورة إلى اثنتين، ولكن هذا ليس هو الحال دائمًا. إليك مثال:

  2. بعد النقر على زر في الكاروسيل، أتبع الرابط إلى صفحة أخرى وبعد العودة إلى الصفحة الرئيسية، يتقلص المحتوى في الشعار. هذا ليس خطأ دائمًا وقد يحدث في أي وقت. إليك مثال على الخطأ:

للمعلومات. على سطح المكتب استخدمت متصفح كروم، وعلى هاتف أندرويد الذكي استخدمت متصفح هواوي

بالطبع، أتفهم أن هذا المكون لا يزال قيد التطوير، لكنني قررت مشاركة المعلومات معك على أي حال.

18

بشكل افتراضي، تتكرر الصورة بناءً على المساحة المتاحة. يمكنك تغيير هذا السلوك باستخدام بعض CSS. سأقوم بإنشاء إعداد للتحكم في الصورة، على سبيل المثال، موضعها وحجمها وما إلى ذلك.

في الوقت الحالي، يمكنك اللعب بخصائص background. (يلزم استخدام !important)

.custom-big-carousel-slide {
    background-repeat: no-repeat !important;
}
  1. لا يمكنني تكرار ذلك. :thinking: ومع ذلك، رأيت خطأ في وحدة التحكم مرة واحدة (لا يمكنني رؤيته مرة أخرى)؛ ربما يكون مرتبطًا. سأرى!
إعجابَين (2)
19

مرحباً! :raising_hand_man:
شكراً على النصيحة :raised_hands:، سأحاول تجربة نسخة CSS الخاصة بك، آمل أن تساعد :slightly_smiling_face:

20

مرحباً مرة أخرى :wave:
لقد عبثت بـ CSS وأعجبتني القدرة على التحكم في خلفية الصورة في الكاروسيل :ok_hand: . كنت آمل أيضاً أن يحل CSS مشكلتي الأصلية. في الحالة العادية، تتغير الصور في الكاروسيل دون مشاكل، ولكن بمجرد النقر على أحد أزرار latest أو new أو active، عند تغيير الصور والمحتوى في الكاروسيل، يتم انتهاك سلامتها - يظهر البداية في النهاية، وتظهر النهاية في البداية. يبدو أن هذا خطأ في النظام :pensive:

21

شكراً على الملاحظات؛ سأجربها لاحقاً. :+1:

إعجاب واحد (1)