السلام عليكم ورحمة الله وبركاته
احتاج تعديل سلايدر الصور المتحركه للموقع الخاص بي باستخدام اطار عمل 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>
