أفضل 18 منزلقًا مجانيًا لصورة ومعرض jQuery لعرض صورك 2021

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

كان بحث Google أيضًا مصدر قلق إلى حد ما للمطورين الذين يرغبون في استخدام المكونات الإضافية للمحتوى المرئي لـ jQuery. هذا لأنه يتطلب نوعًا معينًا من المكونات الإضافية ليكون متوافقًا تمامًا مع أحدث معايير البحث ، وللفهرسة المحتوى المرئي في المقام الأول. لذلك عند البحث عن المكون الإضافي الصحيح ، من الضروري البحث عن ميزات مثل خيارات المرونة والتخصيص ، وقاعدة التعليمات البرمجية خفيفة الوزن وسلاسة تفاعل المحتوى ، والتكامل سريع الاستجابة لجميع أنواع الأجهزة والمتصفح ، وجودة تصميم شاملة تعكس الأفضل والأكثر ديناميكية تتوفر عناصر واجهة المستخدم.

مع مئات من المكونات الإضافية الرائعة للاختيار من بينها ، اخترنا عددًا قليلاً من المكونات التي تستخدم معايير تصميم الويب الحديثة ، والمتوافقة مع المتصفحات المتقاطعة والأجهزة المتقاطعة ، ولدينا مجتمع كبير يتابعها ، فضلاً عن توفير وثائق رائعة وخيارات الدعم لمساعدتك على دمج أشرطة التمرير هذه والمكونات الإضافية للمعرض بأكثر طريقة ملائمة ممكنة. العديد من أشرطة التمرير / عروض الشرائح التالية متوافقة تمامًا أيضًا مع تثبيتات WordPress الخاصة بك. كما أنها توفر مكونات إضافية منفصلة لهذا التكامل. نحن منفتحون على الاقتراحات الخاصة بمزيد من أشرطة تمرير jQuery ليتم تضمينها في هذه القائمة. سننتظر بفارغ الصبر اقتراحاتكم في التعليقات!

Swiper

عند الدخول إلى الصفحة الرئيسية لـ Swiper ، فإنه يشبه إحساس Ionic Framework ، ولأسباب وجيهة. Swiper هو المكون الافتراضي لإمكانيات شريط التمرير داخل Ionic Framework. إنه أيضًا شريط التمرير الافتراضي لـ Framework7. Swiper هو شريط تمرير يعمل باللمس مجاني للاستخدام للأجهزة المحمولة. يستخدم تأثيرات انتقال محسّنة للأجهزة ، ويشعر وكأنه تكامل أصلي داخل مشاريع iOS و Android و Windows و Desktop. سوف تكمل Swiper تطبيقات الجوال وتطبيقات الويب للجوال ومواقع الويب للجوال.

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

عرض شرائح العرض

عادةً ما يتم إنشاء أدوات وتطبيقات العروض التقديمية باستخدام لغات البرمجة الأصلية كتطبيقات فردية. ولكن هذه المرة ، يستفيد البرنامج الإضافي Presentation Slideshow بالكامل من jQuery ويقدم لنا مكونًا إضافيًا دقيقًا يبدو وكأنه تطبيق أصلي. على الرغم من أن العروض التقديمية التقليدية تستخدم وظائف لوحة المفاتيح للتنقل ، إلا أن هذه المكتبة المعينة تستخدم تفاعل لوحة المفاتيح والماوس لمقياس التفاعل الكامل. إن قاعدة الشفرة لهذا واحد واضحة إلى حد ما. وبالتالي ، لن يكون التصميم مشكلة كبيرة. صدر عن كلوديا رومانو نيابة عن كوديهاوس.

بسيط jQuery المتزلج

القليل من JavaScript وبعض HTML5 ولمسة من CSS3 هو ما يجعل شريط التمرير هذا بسيطًا. يشارك John Urbank فكرته عن شريط تمرير jQuery بسيط على CodePen. أي أنه موقع ويب للمطورين والمصممين لمشاركة إبداعاتهم الأمامية للاستكشاف والتحسين والاستخدام العام. لا يُظهر العرض التوضيحي الافتراضي سوى خيار شريط تمرير النص. ولكن مع بعض التعديلات ، يمكن لأي شخص تضمين محتوى مرئي مثل الصور ومقاطع الفيديو.

الة تصوير

يمكنك الآن الاستمتاع بمنزلق معرض صور jQuery مجانًا ، والكاميرا ، وتقديم كل المحتوى الخاص بك بشكل مذهل إلى المستخدم النهائي. يمكنك استخدام الأداة لجميع أنواع مواقع الويب ، والمحافظ ، والمدونات ، سمها ما شئت ، الكاميرا تتعامل معها. الكاميرا عبارة عن مشروع مفتوح المصدر يعتمد على عرض شرائح Diapo مع الكثير من التحسينات ، مما يجعله أفضل. بينما يعمل شريط التمرير ويعمل مع متصفحات الويب الأحدث دون أي عوائق ، اختبره المؤلف أيضًا على بعض الإصدارات القديمة ، فقط لمعرفة مدى إتقانه. علاوة على ذلك ، أنت بحاجة إلى مكونات إضافية لجعل الكاميرا قابلة للعمل بشكل كامل على الأجهزة المحمولة (وهو أمر ضروري في هذا اليوم وهذا العصر).

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

تسلسل. js

يمكنك دائمًا اتخاذ خطوة إلى الأمام وتزيين مشروعك باستخدام شريط تمرير مؤثر. لحسن الحظ ، لا تحتاج إلى بناء الأشياء من الألف إلى الياء. هيك ، لا تحتاج حتى إلى إنفاق عشرة سنتات ، لأن جميع أشرطة تمرير معرض الصور المختلفة القائمة على jQuery التي لدينا هنا مجانية تمامًا للاستخدام. نعم ، يتضمن ذلك Sequence.js. ولكن يمكنك أيضًا استخدام الأداة لجميع أنواع النوايا الأخرى ، مثل العروض التقديمية واللافتات والمزيد. باختصار ، إذا كنت تبحث عن تطبيق قائم على الخطوة ، فإن Sequence.js هو كذلك.

Sequence.js مرن تمامًا وقابل للتمديد ، ويعمل على جميع الأجهزة ومتصفحات الويب الشائعة. علاوة على ذلك ، فهو يدعم انتقالات اللمس والسلسة أيضًا. بفضل السمات الجاهزة للاستخدام وأكثر من ثلاثين خيارًا وإمكانية ، يمكنك تخصيص Sequence.js وفقًا لاحتياجاتك بسهولة.

معرض صور jQuery

معرض أو عرض شرائح ، كلاهما ممكن مع جزء jQuery Image Gallery من Amazing Slider. الأداة مليئة بالميزات الرائعة التي ستساعدك على استيراد شريط التمرير إلى التطبيق الخاص بك بشكل أبسط بكثير. أولاً وقبل كل شيء ، لا تحتاج إلى القيام بكل الأحمال الثقيلة بنفسك. علاوة على ذلك ، يمكنك الاختيار من بين أنماط مختلفة وتوفير المزيد من الوقت على نفسك. ضع في اعتبارك ، إذا كنت ترغب في عرض محتوى الفيديو في شريط التمرير ، فإن jQuery Image Gallery يدعم ذلك أيضًا.

مع وجود أكثر من مليون عملية تنزيل ، فأنت تعلم أن هذا هو الحل الذي سيفي بالغرض. بالإضافة إلى ذلك ، كلما شعرت أنك ترغب في المزيد من الخيارات ، يمكنك دائمًا الانتقال إلى المستوى التالي مع الإصدار المحترف. ومع ذلك ، يمكنك الاستمرار في استخدام البديل المجاني للمدة التي تريدها (يعمل لكل من مستخدمي Windows و Mac).

متحرك صورة SVG منزلق

الفريق في CodyHouse هو الأفضل عندما يتعلق الأمر بإضافات jQuery الحديثة والمتجاوبة. يتضمن إنشاء آخر لهم منزلق صورة SVG متحرك يستخدم أسلوب انزلاق الصورة التقليدي ، مع تضخيم تأثيرات انتقال SVG. قم بإنشاء منزلقات jQuery مذهلة واختر من بين ثلاثة تأثيرات SVG مختلفة لنقل الصور من واحدة إلى أخرى. إذا كنت تواجه مشكلة في تشغيل هذا ، فإن قسم التعليقات في CodyHouse يعد مكانًا رائعًا لبدء البحث عن إجابة.

متحرك SVG Hero Slider

يعمل CodyHouse بجد لتحقيق أقصى استفادة من تكنولوجيا الويب الحديثة. بالفعل أول ذكر لهؤلاء الأشخاص في قائمتنا ، نحن ننظر إلى شريط تمرير jQuery مذهل آخر مُحسّن لـ SVG يستخدم الرسوم المتحركة لإنشاء تأثيرات منزلقة جميلة. سيعمل هذا بشكل رائع مع التطبيقات ومشاريع مواقع الويب التي تحتاج إلى خيارات شريط تمرير الصفحة الكاملة لصفحات الويب أو المحتوى وحده. عند الإعداد ، يمكن لمسؤول الموقع تحديد عناصر مختلفة للصفحة وربطها بالصفحة الأولى. بعد ذلك ، يمكن للمستخدم تصفح العناصر بسهولة من خلال تضخيم تأثير صفحة الويب المنزلقة.

زووم سلايدر

Zoom Slider هو نهج جديد تمامًا نحو تصميم الويب الحديث ومعالجة العناصر من خلال ميزات الانزلاق المتحركة. الميزة الرئيسية لـ Zoom Slider هي القدرة على تصفح الشرائح ، ولكن أيضًا لتكبيرها للحصول على تفاصيل أكثر إيجازًا. يؤدي كل تكبير إلى ظهور صفحة ويب جديدة وحديثة يمكنك استخدامها لعرض مزيد من التفاصيل. بمجرد النقر فوق رمز التكبير / التصغير ، يتم قياس منطقة التكبير / التصغير وكذلك الصفحة. هذا يخلق الوهم بأن العارض يقترب من العنصر. علاوة على ذلك ، بمجرد تغطية الصفحة بأكملها ، تظهر بعض التفاصيل الأخرى. إن استخدام تحولات Dynamic.js و CSS3 هو ما يمكّن Zoom Slider من أن يكون سريع الاستجابة وموضعًا بشكل جميل.

المنزلق ذو الطبقات المستجيبة

هل تعمل في مشروع كبير في المجال الإبداعي؟ ستحتاج بالتأكيد إلى شريط تمرير يمكنه نقل المحتوى إلى المستوى التالي. ونحن نؤمن تمامًا بأن شريط تمرير الطبقات المتجاوب هو الحل الأول بالنسبة لك لهذا الطلب. إنه ليس حديثًا فحسب ، بل إنه يعتمد بالكامل على JavaScript. لا تحتاج حتى للتلاعب باستخدام CSS للعمل مع خيارات الانتقالات والتصميم ؛ كل ذلك مُعبأ مسبقًا في ملف JavaScript الرئيسي. استمتع بالاستكشاف!

Bootstrap Carousel مع Ambilight

لم يكن Bootstrap اسمًا متكررًا في قائمة شريط تمرير jQuery الخاصة بنا حتى الآن ، ولكن شباب Adobe WordPress يكسرون هذا الحاجز من خلال تقديم مكون إضافي منزلق فريد يستخدم تأثير Ambilight لإنشاء تجربة شريط التمرير أكثر خصوصية وأكثر جاذبية لشخصية معينة و / أو حشد. شريط التمرير مستجيب تمامًا ويستخدم مؤقتًا آليًا قابل للتعديل للتنقل بين عناصر شريط التمرير المحددة.

هيرو سلايدر

آخر مكون إضافي من CodyHouse في قائمتنا يحمل اسم Hero Slider البسيط. تم إنشاء هذا المكون الإضافي على أساس فهم أننا نرغب في عرض المحتوى الخاص بنا بشكل منظم قدر الإمكان ، دون شغل مساحة كبيرة فوق أو أسفل الجزء المرئي من الصفحة. يأتي شريط التمرير الجاهز هذا مزودًا بميزات مثل خلفيات الصور والفيديو. يأتي أيضًا مع القدرة على محاذاة النص بعدة طرق. بدلاً من استخدام رموز التنقل البسيطة ، فإنه يستخدم الأزرار التي تزيد من مشاركة شريط التمرير بشكل عام. توفر الأزرار خيارًا لإضافة نص لمساعدة المستخدمين على فهم الجزء التالي من المحتوى بشكل أفضل. وهذا بدوره يشجعهم على قلب شريط التمرير بالكامل. محسن لجميع المتصفحات والأجهزة.

سوبر سلايدر بسيط

تم تصميم Super Simple Slider مع وضع شيء واحد في الاعتبار: البساطة. في حين أن العديد من أشرطة التمرير تبدو منتفخة بالميزات والخيارات القابلة للتوسيع ، فإن Super Simple Slider يركز فقط على شيء واحد. وذلك لمنح مستخدميها القدرة على عرض المحتوى المنزلق دون الدهون الزائدة. اعرض المحتوى المرئي الخاص بك مع القدرة على إضافة عناوين لكل جزء من المحتوى لزيادة معدل المشاركة.

جسور

ربما تكون Jssor أقدم وأغنى مكتبة شريط تمرير jQuery في هذه القائمة. مع ما يقرب من 400 من تأثيرات الشرائح للاختيار من بينها ، يجعل Jssor من السهل إنشاء شرائح سريعة الاستجابة ومحسّنة للهاتف المحمول لكل موقف ممكن يمكن تخيله. يمكنك استخدامه لانزلاق المحتوى وانزلاق الصورة. تتوفر إصدارات من jQuery و no-jQuery للمشاريع واسعة النطاق. يمكنك استخدام Jssor في العالم الحقيقي بمساعدة أكثر من 30 نموذجًا تجريبيًا فريدًا قدمته الوثائق. إنه يمنح مستخدميها فرصة لتوفير الوقت والإنتاجية أثناء ذهابهم.

bxSlider

يعد مشروع المنزلق الخاص بـ Steven Wanderski أحد أكثر مشاريع المنزلق شهرة على GitHub ، مع أكثر من 3000 نجمة ومجموعة متنوعة من الشوكات بواسطة مطورين آخرين. سوف يتكيف bxSlider أصلاً مع الأجهزة والمتصفحات المفضلة لديك. يسمح لك بإنشاء شرائح من المحتوى المرئي. يمكنك أيضًا إنشاء شرائح ديناميكية باستخدام محتوى HTML5 الخاص بك. بالنسبة للأجهزة المحمولة ، هناك دعم حديث لميزة اللمس والتمرير لتحقيق أقصى قدر من المشاركة وسهولة الاستخدام. يتم تنفيذ الرسوم المتحركة لشريط التمرير باستخدام وحدات الانتقال CSS3. هناك واجهة برمجة تطبيقات تمنحك تحكمًا كاملاً في الطريقة التي يتفاعل بها شريط التمرير مع صفحاتك. الكثير من خيارات التكوين والتحسين أيضًا!

فليكس سلايدر 2

WooThemes هو اسم مألوف في مجتمع WordPress ، ويكتسب FlexSlider نفس القدر من الزخم مثل WooCommerce المنتج الرئيسي لـ WooThemes. يستخدم FlexSlider أسلوب ترميز بسيط ودلالي لتسهيل عملية دمجها في مشاريعهم وتطبيقاتهم على المطورين. يتيح تسريع الأجهزة الحصول على تأثيرات التمرير واللمس بسلاسة ، وهناك الكثير من معلومات الدعم في الوثائق ، ويمكنك بسهولة اختيار استخدام FlexSlider على مدونة WordPress الخاصة بك من خلال مكون إضافي منفصل. لن تجد منزلق معرض jQuery أكثر حداثة من هذا ؛ يمكننا أن نضمن ذلك.

نفض الغبار

Flickity هو معرض ويب وهاتف محمول سهل الاستخدام وسريع الاستجابة وقابل للنقر للمطور الحديث. مناسبة لإنشاء عروض شرائح ومعارض كاملة الحجم ، فإن خيارات التصميم الحديثة لـ Flickity هي التي تجعل المطورين يعودون للمزيد. الاستخدام الكامل لـ HTML5 و CSS3 داخل هذه المكتبة.

بريميوم jQuery Slider و Gallery Plugins

بعد استكشاف شريط تمرير jQuery ومكونات المعرض المجانية الأبرز والأكثر نجاحًا ، حان الوقت للانتقال إلى أسلحة أكبر قليلاً: الإضافات المتميزة. سيضم اختيارنا أفضل أشرطة التمرير المتميزة من مطورين رائعين نشروا أعمالهم على Codecanyon. المكونات الإضافية التالية ليست بالضرورة أفضل من أي شيء آخر عرضناه حتى الآن. على الرغم من أنهم يعدون بنهج أكثر تركيزًا على الدعم (والذي قد يكون العامل الأكثر جاذبية للجميع). في المجموع ، تم شراء هذه المكونات الإضافية وتنزيلها عدة مرات. سنحاول تقديم كل واحد بأفضل طريقة ممكنة ، لكن في النهاية نترك القرار النهائي لك.

ثيتا كاروسيل 3D

تعد الأبعاد الثلاثية نوعًا ما من الأشياء داخل المجال المرئي على الويب ، ولكنها ليست شائعة كما نود أن تكون. أول مكون إضافي لشريط تمرير معرض ثلاثي الأبعاد في هذه القائمة هو Theta Carousel. يسمح التكامل المتجاوب داخل Theta Caoursel بإمكانيات التحجيم الآلي لأي حجم شاشة للجهاز. إنه مرن حقًا ، مما يسمح لك بالبقاء مسؤولاً عن كيفية تدفق البرنامج المساعد وشكله وشعوره وتفاعله مع المستخدم. تسهل لوحة التكوين المدمجة فهم ما يمكن أن يفعله المكون الإضافي ، كما أنه يجعل من السهل جدًا تكوين المكون الإضافي حسب رغبتك. يمكنك الاختيار من بين مجموعة محددة مسبقًا من معلمات نقل الكائنات ، أو تحديد معلماتك الخاصة.