كيفية إخفاء الـ overlay linear background في شرائح Swiper

Mohamed Boumlik · 26 أبريل 2023

السلام عليكم

لدي مشكلة صغيرة وهي من slidesperview حيث يظهر داك الجانب الرمادي

كما تشاهدون اود ان ازيله ويبقى الشكل كما هو عليه

كيفما فعلت اجد المنطقة الرمادية باslide على اليمين او باليسار وهي تظهر ك shadow

تم التعديل في 26 أبريل 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 26 أبريل 2023

يتم إضافة shadow تلقائيًا على الشرائح في swiper أو للدقة يتم إضافة linear-gradient من خلال خاصية background-image فكما ترى في الصورة هناك كلاس باسم:

وهو المسؤول عن إضافة الظل الذي تراه، ولحل تلك المشكلة، يمكنك استخدام التنسيق التالي في ملف App.css لديك:

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  background-image: none !important;
}

Adnane Kadri · 26 أبريل 2023

جرب ضبط تنسيقات sliderpreview وفق css بشكل عادي:

.swiper-slide {
    background-position: center;
    background-size: cover;
}

او قم باسناد القيمة القيمة 0 للخاصية slidesOffsetAfter في مكون Swiper:

<Swiper 
       ..
       ..
       slidesOffsetAfter=(0)

السؤال