swiper

ابدأ | الوثائق | العروض التوضيحية

Swiper

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

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

الرعاة

سمات

• Tree-shakenble : سيتم استيراد الوحدات النمطية التي تستخدمها فقط في حزمة تطبيقك.
• ملائمة للهاتف المحمول : يهدف إلى استخدامه في مواقع الويب المحمولة ، وتطبيقات الويب للهاتف المحمول ، وتطبيقات الأجهزة المحمولة الأصلية/الهجينة.
• Library Admnostic : Swiper لا يتطلب أي مكتبات JavaScript مثل JQuery ، مما يجعل Swiper أصغر وأسرع بكثير. يمكن استخدامه بأمان مع مكتبات مثل jQuery و Zepto و JQuery Mobile ، إلخ.
• 1: 1 حركة اللمس : بشكل افتراضي ، يوفر Swiper تفاعل حركة اللمس 1: 1 ، ولكن يمكن تكوين هذه النسبة من خلال إعدادات Swiper.
• Mutation Observer : لدى Swiper خيار لتمكين مراقب الطفرة ، مع هذه الميزة ، سيتم إعادة تعزيز Swiper تلقائيًا وإعادة حساب جميع المعلمات المطلوبة إذا قمت بإجراء تغييرات ديناميكية على DOM ، أو في أنماط Swiper نفسها.
• API Rich : Swiper يأتي مع واجهة برمجة تطبيقات غنية للغاية. يسمح بإنشاء ترقيم الصفحات الخاص بك ، وأزرار التنقل ، وتأثيرات المنظر وغيرها الكثير.
• RTL : Swiper هو شريط التمرير الوحيد الذي يوفر دعم RTL بنسبة 100 ٪ مع التصميم الصحيح.
• تخطيط شرائح الصفوف متعددة الصفوف : يسمح Swiper بتخطيط شرائح صف متعددة ، مع بضع شرائح لكل عمود.
• التأثيرات الانتقالية : FADE ، Flip ، 3D Cube ، 3D Coverflow.
• التحكم في اتجاهين : يمكن استخدام Swiper كوحدة تحكم لأي عدد من الضربات الأخرى ، وحتى يتم التحكم فيها في نفس الوقت.
• التحكم الكامل في التنقل : يأتي Swiper مع جميع عناصر الملاحة المدمجة المطلوبة ، مثل ترقيم الأسهم وسهام التنقل وربرة التمرير.
• تخطيط Flexbox : يستخدم Swiper تخطيط Flexbox الحديث لتخطيط الشرائح ، والذي يحل الكثير من المشكلات والوقت مع الحجم الحجم. يسمح هذا التصميم أيضًا بتكوين شبكة الشرائح باستخدام CSS النقي.
• شبكة تخطيط الشرائح الأكثر مرونة : لدى Swiper الكثير من المعلمات عند التهيئة لجعلها مرنة قدر الإمكان. يمكنك التحكم في الشرائح لكل عرض ، لكل عمود ، لكل مجموعة ، مساحة بين الشرائح ، وغيرها الكثير.
• الصور الكسولة : Swiper Lazy Loading تأخير تحميل الصور في شرائح غير نشطة/غير مرئية حتى ينقل المستخدم إليها. هذه الميزة يمكن أن تجعل الصفحة تحميل بشكل أسرع وتحسين أداء Swiper.
• الشرائح الافتراضية : يأتي Swiper مع ميزة الشرائح الظاهرية التي تكون رائعة عندما يكون لديك الكثير من الشرائح أو الشرائح الثقيلة في المحتوى/الثقيلة بحيث تحتفظ فقط بالكمية المطلوبة من الشرائح في DOM.
• وضع الحلقة
• اللعب التلقائي
• التحكم في لوحة المفاتيح
• موسوميل السيطرة
• متداخلة متداخلة
• التنقل التاريخ
• ملاحة التجزئة
• تكوين نقاط التوقف
• إمكانية الوصول (A11Y)
• وغيرها الكثير ...

مجتمع

يمكن العثور على مجتمع Swiper في مناقشات GitHub ، حيث يمكنك طرح الأسئلة والأفكار الصوتية ومشاركة مشاريعك

ينطبق مدونة قواعد سلوكنا على جميع قنوات مجتمع Swiper.

dist / build

في الإنتاج ، استخدم ملفات (JS و CSS) فقط من dist/ Folder ، سيكون هناك الإصدارات الأكثر استقرارًا.

بناء التنمية

تثبيت جميع التبعيات ، في جذر الريبو:

$ npm install

وبناء نسخة تطوير من Swiper:

$ npm run build

النتيجة متوفرة في dist/ Folder.

الجري العروض التوضيحية:

جميع العروض التوضيحية في مجلد ./playground . هناك ستجد Core (HTML ، JS) ، React ، Vue إصدارات. لفتح العرض التوضيحي ، قم بالتشغيل:

• Core : npm run core
• رد فعل : npm run react
• Vue : npm run vue

بناء الإنتاج

$ npm run build:prod

سوف يتوفر إصدار الإنتاج في dist/ Folder.

المساهمة

يجب أن تلتزم جميع التغييرات بـ src/ الملفات فقط. قبل فتح مشكلة ، يرجى مراجعة المبدأ التوجيهي المساهمة.

ميزات الطريق الرئيسية

• أهم طلبات الميزات (أضف أصواتك الخاصة باستخدام رد الفعل)
• أعلى الحشرات؟ (أضف أصواتك الخاصة باستخدام رد الفعل)

المساهمين

المساهمون في الكود

هذا المشروع موجود بفضل جميع الأشخاص الذين يساهمون. [يساهم].

المساهمون الماليون

كن مساهمًا ماليًا وساعدنا في الحفاظ على مجتمعنا. [يساهم]