تعديل سلايدر صور متحركه

Dxpro Sha · 20 أغسطس 2023

السلام عليكم ورحمة الله وبركاته

احتاج تعديل سلايدر الصور المتحركه للموقع الخاص بي باستخدام اطار عمل Tailwind CSS

السلايدر اللي موجود عندي على كامل عرض الشاشة بالشكل هذا كما بالصوره

احتاج تعديله ليكون بالشكل كما بالسلايدر هذا

كود tailwind المستخدم

<section class="s-block home-slider s-block--hero-slider s-block--full-bg wide-placeholder"> 
    <salla-slider 
      id="main-slider-{{ position }}" 
      class="home-slider main-slider w-11/12 mx-auto rounded-lg" 
      auto-play 
      loop
      type="fullwidth">
        <div slot="items">
            {% for slide in component.slides %}
                <div class="swiper-lazy-wrap w-4/5 min-h-[300px] lg:min-h-[528px] bg-dark">
                    <div data-background="{{ slide.image }}" class="swiper-lazy"></div>
                    <div class="flex-center container pb-16 sm:pb-0 home-slider__content relative h-full">
                        <div class=" w-4/6 text-center md:w-7/12 lg:w-5/12 text-white">
                            <h3 data-swiper-parallax="-500"
                                class="lg:text-title-size font-bold leading-tight mb-4">{{ slide.title }}</h3>
                            <p data-swiper-parallax="-300" class="line-clamp-2 description">{{ slide.description }}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </salla-slider>
</section>

سمير عبود · 20 أغسطس 2023

يبدو أنك تستخدم متجر سلة، لاحظت وجود مكون بالإسم salla-slider يوجد توثيق لكل المكونات مثلاً توثيق Slider يمكنك التعديل في الخاصية:

type="fullwidth"

القيم المتاحة كما ذُكرت في التوثيق:

slider-salla.JPG.3294e4e7009d6518ef4371d6135ccac1.JPG

حاول تعديل القيمة لتتناسب مع إحتياجاتك.

أيضاً يوجد صنف w-11/12 و هو أحد أصناف TailwindCss يُمكنك الإطلاع على TailwindCSS Width لتعديل الصنف بما يتناسب مع إحتياجاتك.

عبدالباسط ابراهيم · 20 أغسطس 2023

لتحويل السلايدر ليكون جزء من الصفحة بدلاً من كامل العرض، يمكن القيام بالتالي:

غيّر عرض السلايدر من w-full إلى عرض محدد مثل w-2/3:

<section class="s-block home-slider s-block--hero-slider wide-placeholder">
  <salla-slider 
    class="home-slider main-slider w-2/3 mx-auto rounded-lg"
  >
  <!-- باقي الكود -->
</section>

أضف wrapper حول السلايدر بعرض full واجعله flex ليكون السلايدر والمحتوى الآخر جنباً لجنب:

<div class="flex w-full">

  <section class="s-block home-slider s-block--hero-slider wide-placeholder w-2/3">
    <!-- السلايدر -->
  </section>

  <div class="w-1/3">
    <!-- باقي محتوى الصفحة -->
  </div>

</div>

عدّل paddings وmargins للتحكم بالمسافات.

أو أضف max-width للسلايدر لتجنب أن يصبح عريضًا جدًا.

هذا مثال عام لكن يمكن تعديله وفقاً للتصميم المطلوب.

Mustafa Suleiman · 20 أغسطس 2023

السؤال غير واضح، هل تقوم بإنشاء قالب، أم تعمل على تعديل الموقع من خلال CSS؟

في حال كنت تعمل على تعديل الموقع من خلال CSS في متجر سلة فليس متاح لك تعديل أكواد HTML، أي تعديل الكلاسات، بل تستطيع إختيار العناصر من خلال الكلاسات ثم تنسيقها كما تريد من خلال CSS.

أما في حال كنت تعمل على تطوير قالب فعليك استخدام محرك Twilight الخاص بمنصة سلة وبالطبع معرفة بالآتي:HTML, CSS, JS ثم معرفة بمحرك قوالب Twig، وهو نظام قوالب يستخدم في برمجة الويب للمساعدة في إنشاء وإدارة قوالب HTML، وتم تطوير Twig بلغة برمجة PHP وهو جزء من إطار عمل Symfony لتطوير تطبيقات الويب.

وستجد مزيد من التوضيح هنا:

وأيضًا من خلال المستند الرسمي:

https://salla.stoplight.io/docs/twilight-themes-documentation/44069a6e14851-meet-the-twilight

تعديل سلايدر صور متحركه

السؤال

Dxpro Sha

3 أجوبة على هذا السؤال

Recommended Posts

سمير عبود

عبدالباسط ابراهيم

Mustafa Suleiman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية