Swiper —كيفية تدمير Swiper في نقاط التوقف ذات العرض الأدنى

أنماط Swiper مبطنة ديناميكيًا بينما يتم تغيير حجم المتصفح أو تمرير الشرائح. يحتوي API على معلمة تدمير قوية تفصل جميع مستمعي الأحداث وتنظف الأنماط المضمنة. مشكوك فيه هو أنه يتم اختيار تطبيق نقاط التوقف المتجاوبة ذات العرض الأقصى مع وحدات البكسل ، مع الأخذ في الاعتبار أنه يتم تفضيل طريقة العرض ذات الدقة القصوى مع Ems / Rems للاتجاه الأول للهاتف المحمول. الجمع بين كل من Window.matchMedia () ومعلمة التدمير ، تتمثل الخطة في إزالة Swiper بعرض دقيق: 31.25em (500px) والتبديل إلى تخطيط شبكي.

يتم تمكين Swiper على viewports أصغر. يقدم نقطة الإيقاف الأولى عمودين والمزيد من الصفوف.

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

اقرأ الإدخالات السابقة لمزيد من السياق حول خيارات التصميم والتصميم.

  • Swiper - Uno a Cuatro Column Slider
  • Swiper - نقل الأزرار السابقة والتالية

عرض

نقاط

API Swiper يحتوي على معلمة نقاط التوقف. ويستخدم بكسل وشكل أقصى عرض.

var swiper = new Swiper ('. swiper-container'، {
   // المعلمات الافتراضية
   عرض الشرائح: 4 ،
   المسافة بين: 40 ،
   // نقاط التوقف المتجاوبة
   نقاط التوقف:
   
      // عندما يكون عرض النافذة <= 320 بكسل
      320:
         عرض الشرائح: 1 ،
         المسافة بين: 10
      }،
      // عندما يكون عرض النافذة <= 480 بكسل
      480:
         عرض الشرائح: 2 ،
         المسافة بين: 20
      }،
  
      // عندما يكون عرض النافذة <= 640 بكسل
      640:
         عرض الشرائح: 3 ،
         المسافة بين: 30
      }
  
   }
})

لإزالة أي مستمع للحدث وأنماط مضمّنة ، يجب تدمير Swiper. من أجل إعادته ، سيستمع مستمع حدث تغيير الحجم لمعرفة ما إذا كان المستخدم يقوم بتغيير حجم الشاشة. نظرًا لأن حدث تغيير الحجم هو فرض الضرائب ولا يستخدم Swiper وحدات em و min-width ، فإن Window.matchMedia () بديل.

ينشئ Window.matchMedia () كائنًا مع بعض الخيارات المفيدة. واحد منهم هو متغير. إذا تم تحميل الصفحة وتم تحقيق الحد الأدنى للعرض ، فستبلغ عن ذلك بشكل صحيح. اعتمادًا على الطريقة التي يغيّر بها المستخدم حجم نافذة المتصفح ، يمكنه الإبلاغ عن صواب أو خطأ. عندما صحيح ، سيتم تدمير Swiper. عندما خاطئة ، سيتم إنشاؤه.

الكود المستخدم لتحقيق كل هذا يحدث ...

// نقطة توقف حيث سيتم تدمير swiper
// والتبديل إلى تخطيط ثنائي العمود
const breakpoint = window.matchMedia ('(min-width: 31.25em)')؛
// تتبع مثيلات swiper لتدميرها لاحقًا
اسمحوا mySwiper.
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
const breakpointChecker = function () {
   // إذا كان منفذ العرض الأكبر والتخطيط متعدد الصفوف مطلوبين
   if (breakpoint.matches === true) {
      // تنظيف المثيلات القديمة والأنماط المضمنة عند توفرها
      if (mySwiper! == undefined) mySwiper.destroy (true، true)؛
      // أو / ولا تفعل شيئًا
      إرجاع؛
   / / إذا كان هناك حاجة إلى منفذ عرض صغير وتخطيط عمود واحد
   } آخر إذا (breakpoint.matches === false) {
      // إطلاق النار viewport الصغيرة من swiper
      إرجاع enableSwiper () ؛
   }
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
const enableSwiper = function () {
   mySwiper = new Swiper ('.swiper-container' ، {
      حلقة: صحيح ،
      عرض الشرائح: "تلقائي" ،
      centeredSlides: true ،
      a11y: صحيح ،
      لوحة المفاتيحتحكم: صحيح ،
      grabCursor: صحيح ،
      // ترقيم الصفحات
      ترقيم الصفحات: "ترقيم الصفحات."
      ترقيم الصفحاتنقر: صحيح ،
   })؛
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
////////////////////////////////////////////////// ////////////////
// راقب التغييرات في حجم منفذ العرض
breakpoint.addListener (breakpointChecker)؛
// ركلة البداية
breakpointChecker ()؛

هذا هو! زيارة CodePen التجريبي ل boilerplate.

استنتاج

يعد دمج معلمة التدمير مع Window.matchMedia () طريقة فعالة لإدارة Swiper بأحجام مختلفة للشاشة. يعد الجوال أولاً اختياريًا - أقصى عرض ، على سبيل المثال ، window.matchMedia ('((أقصى عرض: 31.25em)') ، سيعمل أيضًا. حظا طيبا وفقك الله!