٢٠ من افضل اشرطة تمرير الصور المبنية باستخدام jQuery 

فلنكن صريحين، ان اشرطة التمرير ممتعة حقاً. ان القليل من الحركة على الصفحة يمكن ان يضفي عليها بعض الحيوية.

اشرطة التمرير - والتي يطلق عليها ايضاً "الدوارات carousels" او "اشرطة تمرير الصور image sliders" - هي عناصر تفاعلية لعرض الصور او اي نوع آخر من الوسائط على صفحات الويب.

الق نظرة على القائمة التالية والتي تحتوي على ٢٠ من اشرطة التمرير المبنية باستخدام jQuery والمتوفرة في متجر انفاتو (Envato Market) وسترى كيف ان اشرطة التمرير قد تقدم لك اكثر مما يمكن ان تتخيل.

١.  RoyalSlider

اصبح من الضرورة اليوم ، وكثر من اي وقت مضى، ان يكون شريط التمرير على موقعك متوافقاً مع الاجهزة التي تعمل باللمس (touch-friendly) وقابلاً للتعديل بشكل تلقائي مع القياسات المختلفة لشاشات الاجهزة (Responsive)، وكلا الميزتان موجودتان في رويال سلايدر.

تم تطويره باستخدام HTML5 و CSS3 وبافضل الطرق. انه حقاً خيار سليم.

هذه بعض الميزات الرائعة الاخرى:

• تم اعداده بالشكل الامثل لتسهيل اكتشافه من قبل محركات البحث (SEO optimized)
• قابل للتعديل ولتغيير الاعدادات وبشكل كبير
  
• اكثر من ١٠ قوالب بدائية (للبداية)
• يحتوي على عناصر وقائية من التحولات في ال CSS3
• والمزيد

اعتقد ان افضل ميزة هي البنية التي تعتمد على مبدأ الوحدات ، مما يعطي المطورين الخيار بحذف ما لا يحتاجونه من ملف جافاسكريبت الرئيسي، مما يجعل الامور مرنة الى ابعد الحدود.

 رويال سلايدرهو شريط تمرير متين مبني بلغة جافا سكريبت ، وسيكون اضافة جميلة الى مجموعة الادوات التي تخص اي مطور للويب.

٢. Slider Revolution

ليس من السهل ان يكون شريط التمرير "ثورياً" في مجاله. عند الحديث عن اشرطة التمرير فان هناك العديد من الخيارات المتوفرة ، ولكن هذا الشريط، Slider Revolution ، بالذات حاول وبشكل جيد ان يكون ثورياً.

عندما يتلق الامر باشرطة التمرير المبنية باستخدام jQuery فان هذا الشريط يمكنه ان يوفر لك كل ما تريده.

ان قائمة الميزات الخاصة بهذا الشريط طويلة ، لذا ساركز على ابرزها:

• تأثيرات الرسوم والخلفيات المتحركة
  
• يحتوي على خيارات للسيو SEO (التهيئة السليمة لتسهيل الاكتشاف من قبل محركات البحث) ، وتحميل عناصر الصفحة حسب طلب المستخدم (او ما يسمى ب Lazy Loading).
• امكانية اضافة عدد لا محدود من الطبقات (Layers) والشرائح (Slides) مع امكانية اضافة الوصلات (Links) اليها
  
• يحتوي على تنسيقات "جاهزة للاستخدام" وقابلة للتعديل بشكل كبير
• والعديد من المزايا الاخرى
  

ان امكانية اضافة صورة ، او مشغل للفيديو ، او مصدر لاحد الشبكات الاجتماعية يجعل من Slider Revolution احد اكثر الخيارات الاكثر مرونة التي يمكن ان تجدها.

٣. LayerSlider

ان الاسم الذي يحمله شريط التمرير هذا ، والمبني باستخدام jQuery ، لا يفيه حقه ابداً. ان قدرته على تمرير ما يزيد على ٢٠٠ من الصور الثنائية والثلاثية الابعاد لهو أمر ملفت حقاً.

هذه بعض من ميزاته البارزة:

•  يحتوي على قالب   بصيغة فوتوشوب PSD خاص لتصميم الاغلفة skin design
• ١٣ غلاف skins و ٣ طرق للتنقل بين العناصر navigation types
• امكانية اضافة صورة ثابتة فوق شريط التمرير
  
• متوافق مع السيو SEO (التهيئة لمحركات البحث) وميزة تحميل الصور حسب طلب المستخدم (Lazy Loading)
  
• تسريع تحركات عناصر CSS3 مع حماية من jQuery عن طريق العتاد (hardware)
• وهناك المزيد
  

ومثل شريط التمرير السابق، يمكنك سحب الصورة واسقاطها اياً كان نوعها - حتى لو كانت عبارة عن محتوى من الوسائط المتعددة multimedia بصيغة HTML5 وباستضافة ذاتية self-hosted.

يضفي شريط التمرير LayerSlider الكثير من الحركة في فضاء اشرطة التمرير ، وهو حقاً جذاب. 

٤.  jQuery Banner Rotator / Slideshow

 يعد شريط التمرير  jQuery Banner Rotator / Slideshow من الحلول السهلة. انه بسيط من دون التضحية بالاساسيات.

انه يحتوي على الميزات التالية:

• تلميحات للادوات، شروحات نصية ... الخ.
  
• امكانية مشاهدة العناصر كصور صغيرة thumbnails او كل عنصر على حدة component viewing
• خيارات للتوقيت ولتأخير التمرير اما بشكل عام لكل صور او بشكل منفصل لكل شريحة slide
  
• يمكن تحريك جميع الشرائح slides بعدة طرق او تحريك كل شريحة بطريقة مختلفة
• والمزيد

بينما يبدو شريط التمرير هذا "اساسياً (بدائياً)" عند مقارنته مع اشرطة التمرير الاخرى المبنية باستخدام jQuery، الا انه يجب الا تتجاهله ان كنت تريد بناء واجهة بسيطة وسهلة.

٥.  All In One Slider Responsive jQuery Slider Plugin

يأتي كل شريط تمرير الى السوق حاملاً معه تصوره الفريد ، ومقدماً حلاً لاي مجال يريد استهدافه في سوق اشرطة التمرير.

ما عدا هذا الشريط.

 ان  All In One Slider Responsive jQuery Slider Plugin هو ، وحسب ما يستدل من اسمه، All in one، اي "الكل في واحد".

اعتقد ان لدى كل مطور للويب حلاً يلجأ اليه في كل حالة معينة، الا ان مطوري الويب دائماً ما يتطلعون الى  ما هو جديد.

قد يكون هذا هو الجديد الذي يقدمه هذا الشريط:

• آلية دوران البانرات banner rotator
• بانر لعرض الصور المصغرة thumbnails banner
• بانر مع لائحة تشغيل banner with playlist
• شريط تمرير للمحتوى
• دائرة للصور carousel

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

هل يمكن ان يكون "شريط التمرير الكل في واحد" هذا هو الحل الذي يحتوي على كل ما تحتاجه في شريط تمرير الصور؟

٦. UnoSlider

ان لم يكن شريط التمرير الخاص بك متوافقاً مع الاجهزة التي تعمل باللمس touch-enabled ، وقابلاً للتعديل بشكل تلقائي مع تغير حجم شاشة العرض responsive ، فأنت على خطأ.

ان شريط التمرير UnoSlider يعمل بالطريقة الصحيحة.

يجمع شريط التمرير هذا ما بين البساطة والغنى بالميزات.

من ميزاته:

• سهولة تعديل القالب
• يأتي مجهزاً ب ١٢ قالباً themes 
• ٤٠ طريقة للتحرك من شريحة الى اخرى transitions
  
• يدعم متصفح انترنت اكسبلورر ٦ فما فوق IE6+ (لان هناك من لايزال يستخدمه!)
• والمزيد من الميزات

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

٧. ماستر سلايدر

هل تبحث عن شريط تمرير (مبني باستخدام jQuery) يتغلب على جميع اشرطة التمرير؟

اذاً فلتقم بتجربة ماستر سلايدر ... 

عنما يتعلق الامر بجمال المظهر ، فان شريط التمرير هذا يصنف ضمن الطبقة العليا:

• التجهيز للتحميل بطريقة ذكية
• ما يزيد عن ٢٥ قالب themes
• يدعم تسريع الانتقالات (الخاصة ب CSS) باستخدام العتاد hardware-accelerated
• يدعم اللمس والمسح بالاصابع Swipe gestures(على شاشات الاجهزة التي تعمل باللمس) 
• والكثير من الميزات
  

ما سيلفت نظرك بحق هو الانتقالات التفاعلية  interactive transitions ، والطبقات المتحركة animated layers ، والنقاط الساخنة hotspots.

ان مجموعة ماستر سلايدر هي بحق تحفة.

٨. TouchCarousel

يتبع تتش كاروسيل نهج " الدعم والتحديث بالمجان" ، الا لدى شريط التمرير jQuery ذي نمط الدوران carousel خفيف الوزن هذا ما هو اكثر بكثير لكي يقدمه

لانه يحمل كلمة "Touch" (اي اللمس) في اسمه ، فمن الواضح انه يتكيف بشكل تلقائي وكامل مع تغير قياس شاشات العرض (Responsive) ويدعم التنقل بين الصفحات باللمس (Navigation).

من ميزاته الاخرى ايضاً:

• متوافق مع السيو SEO (التهيئة لمحركات البحث)
  
• ميزة التشغيل التلقائي الذكي (smart autoplay)
• انتقالات CSS3 المسرعة عن طريق العتاد (hardware-accelerated CSS3 transitions)
• واجهة استخدام قابلة للتعديل باستخدام اربعة اغلفة فوتوشوب Photoshop skins
• والمزيد

مع ذلك، فان TouchCarousel يأخذ تجربة الاجهزة المتحركة (الموبايل) الى مستوى آخر عن طريق التمرير المعتمد على الفيزياء (physics-based scrolling).

٩. Adavnced Slider

لا تستخدم اشرطة التمرير المبنية باستخدام jQuery لمواقع الويب فقط. يمكن ان تكون مفيدة ايضاً عند دمجها في التطبيقات، تماماً مثل ما يمكن فعله مع الشريط المتقدم.

باتسخدام لغة HTML او XML ، يحتوي هذا الشريط المتقدم على الكثير:

• الطبقات المتحركة والفيديو الذكي
• ما يزيد عن ١٠٠ طريقة للانتقال بين الشرائح (transitions) وما يزيد عن ١٥٠ خاصية قابلة للتعديل
• ١٥ غلاف خاص بشريط التمرير slider skins، ٧ اغلفة خاصة بعمد التمرير scrollbar skins، ودعم تلقائي لمكتبة lightbox
• يمكن استخدام لوحة المفاتيح للتنقل  keyboard navigation, دعم شاشات اللمس touchscreen ، وواجهة قابلة للتعديل بشكل كامل 
• وغير ذلك الكثير والكثير

الا ان افضل ميزة هي واجهة برمجة التطبيقات الخاصة بهذا الشريط Advanced Slider API - مما يجعله الخيار الافضل لتطبيقك.

١٠.  jQuery Slider Zoom In/Out Effect Fully Responsive

انه احد اشرطة التمرير المبنية باستخدام jQuery التي تجعلك تريد رؤية عرض له قبل ان تبدأ في القراءة عن ميزاته، لانك بالتأكيد ستود معرفة ما الذي يعنيه "مؤثر التكبير والتصغير  (zoom in/out effect)".

فكر بحافظ الشاشة screensaver.

زغم ان المؤثر بسيط نوعاً ما، الا ان خاصية التكبير والتصغير تضفي لمسة جميلة على الموقع ، خاصة وان الانترنت مليئة باشرطة التمرير التي تعرض صوراً ثابتة.

من ميزات هذا الشريط الانيق:

• دعم انتقالات طبقات  CSS3
• معاملات لطريقة خروج الطبقات المتحركة
• خيارات لملء الشاشة، او عرض الشاشة، او المقاسات الثابتة
• التصوص المتحركة والمكتوبة بصيغة HTMLو CSS
• والمزيد
  

بينما تحاول معظم اشرطة التمرير توفير اكبر عدد ممكن من المؤثرات في رزمة واحدة، الا ان هذا الشريط يوفر تأثير كين بيرنز السينمائي Ken Burns وبشكل متقن.

١١. Content Timeline

Content Timeline هو شريط تمرير قوي ومصمم بشكل جميل - انه مثالي لتصميم الخط الزمني Timeline.

من اجهزة الحاسوب الشخصية (desktop) الى الاجهزة المتحركة (mobile) ، يحافظ تصميم الخط الزمني (timeline) على جمال شكله.

ان الامر بسيط، خذ المحتوى الخاص بك، ورتبه بحسب التسلسل الزمني، تم استدعي الوظيفة function ، وانتهينا!

من ضمن الميزات:

• عالي القدرة وخفيف
• ١١ من الاعدادات القابلة للتعديل
• تفاعلي بالكامل، مرن ، وسهل الاستخدام (بشكل بديهي)
• مبني لاجهزة سطح المكتب desktop والمتنقلة mobile مع ميزة التعديل التلقائي عند تغير مقاس الشاشة responsive
• والمزيد

مع وجود سبع طرق للتحكم عن طريق البرمجة والمؤثرات المسهلة ، يكون Content Timeline افضل شريط تمرير للخط الزمني يمكن ان تجده.

١٢. Sexy Slider

لم يعد شريط التمرير المثير Sexy Slider مثيراً كما كان من قبل، الا انه قد حافظ على نفسه بالرغم من تقدمه في السن، فهو لا يزال حلاً موثوقاً.

لن يبدو هذا الشريط مثيراً للاهتمام عند النظرة الاولى، ولكن مع بعض التعدلات البسيطة ، يمكن تعديل هذا الشريط المرن لكي يتلاءم مع تصميمك بشكل مثالي. 

ما يتضمنه هذا الشريط:

• التمرير التلقائي auto slide
  
• شروحات توضيحية للصور  image captions
• التمرير المستمر continuous sliding
  
• ٦ مؤثرات لتحريك الشرائح transition effects
• والمزيد
  

ان Sexy Slider بانتظارك لكي تقوم باكتشاف قوته وقدراته الكامنة.

١٣. Master Slider jQuery Slider Plugin with Visual Builder

يمكنك بناء شريط تمرير باستخدام هذا الشريط وادواته بسرعة فائقة ، دون التضحية بجمال المظهر.

هذا الشريط المتميز لتمرير الصور والمحتوى يوفر بعضاً من طرق التمرير الجميلة والمُسرعة عن طريق العتاد.

من ضمن ميزاته:

• التجهيز للتحميل بطريقة ذكية smart preloading
• مبني لاجهزة سطح المكتب والاجهزة النقالة
• ما يزيد عن ٨٠ عينة من اشرطة التمرير الجاهزة للاستخدام 
• تحركات مقنّعة للطبقات masked layer transitions، مؤثرات للطبقات ، وطقات للتغطية
• والمزيد

هذا الشريط قابل للتعديل بشكل كامل ، متوافق مع السيو SEO (التهيئة لمحركات البحث) ، كما انه يدعم الفيديو. وبالطبع ، الميزة الاكثر وضوحاً : برنامج بناء مرئي (بدون الاعتماد بشكل كامل على البرمجة) Visual Builder

١٤. Translucent

تتضمن معظم اشرطة التمرير المبنية باستخدام jQuery نوعاً من عناصر التصميم "المحيطية" (الذي تحيط ببيانات المستخدم وتسمى عادة design chrome)، ومع انه يمكنك تعديلها كما تشاء ، الا انك احياناً تود ابقاء كل شيء ضمن الشريحة slide نفسها.

وهنا يأتي شريط التمرير Translucent.

هناك العديد من الاعدادات المسبقة، لذا ، فان كل ما عليك فعله هو تعديله فقط، وسيصبح بذلك جاهزاً للعمل!

تتضمن ميزاته:

• ٦ خيارات مختلفة للتنسيق style
• ٤ مؤثرات لتحريك الصور / الشرائح transition effects
• ٢ من طرق التحريك المعتمدة على تحريك الاصابع على الشاشات التي تعمل باللمس
• شروحات وازرار قابلة للتعديل
• والمزيد
  

مثل اشرطة التمرير الاخرى، هذا الشريط متوافق مع الشاشات التي تعمل باللمس، مع ميزة التعديل التلقائي عند تغير حجم الشاشة responsive، ولديه القدرة على التسريع باستخدام العتاد hardware acceleration.

Translucent هو شريط تمرير بالحد الادنى من المواصفات والذي يقوم بدفع المحتوى الى المقدمة بشكل مذهل.

١٥. Unleash

هل تبحث عن شريط تمرير شبيه بآلة الاكورديون الموسيقية (اي انه يعرض الصور مثل ازرار الاكورديون)؟ اذاً فهذا الشريط هو ما تبحث عنه!

هذا الشريط مليء بالميزات، انه احد افضل اشرطة التمرير الشبيهة بالاكورديون التي يمكن ان تجدها.

من ضمن ميزاته:

• دعم فيديو HTML5 لاجهزة سطح المكتب
• تسريع تحريك الصور باستخدام العتاد
• متوافق بشكل تلقائي مع احجام الشاشات المختلفة fully responsive
• يدعم الشاشات التي تعمل باللمس
• والمزيد من الميزات الاخرى

اطلق شريط التمرير Unleash (والذي يعني اسمه "اطلق") الشبيه بالاكورديون الآن.

١٦. AviaSlider

AviaSlider هو شريط تمري آخر ذو مظهر جميل وميزات رائعة حقاً.

هذه الوظيفة الخاصة بشريط التمرير slideshow plugin السهلة الاستخدام (والمبنية باستخدام jQuery) ، تتضمن ثمانية طرق معرفة مسبقة للتحرك بين الصور ، ولكن يمكنك ان تصنع المزيد باستخدامه.

من ضمن الميزات الاخرى:

• يحتوي على اداة للتحميل المسبق للصور
• يتوقف التشغيل التلقائي عندما يبدأ المستخدم بالتفاعل
• جاهز للعمل بشكل فوري مع مكتبات prettyPhoto و Lightbox 
• والمزيد من الميزات

ان AviaSlider ذو قدرات عالية ، بالرغم من ان النسخة الكاملة يبلغ حجمها ٨ كيلوبايت فقط.

١٧. Slider Evolution

اصنع ثورة مع Slider Evolution (والذي يعني اسمه تطور اشرطة التمرير)! الآن يمكنك وبسهولة بناء اشرطة تمرير مع افضل المؤثرات باستخدام لغة جافاسكريبت.

مع Slider Evolution، يمكنك بناء عدد غير محدود من اشرطة التمرير، لكل منها اعداداته الخاصة، ويمكن ان تضعها في اي مكان في موقعك.

١٨.  Accordionza

لا يمكن لاي شريط تمرير مبني باستخدام jQuery ان يكون اخف من ذلك.

لا يحتاج سوى ل ٣ كيلوبايت للتحميل، ان Accordionza هو شريط تمرير فائق الخفة وشبيه بالاكورديون.

وان لم تعجبك التنسيقات الثلاثة التي تأتي معه، يمكنك تعديل نص ال HTML و ال CSS الخاص بهذا الشريط المرن الشبيه بالاكورديون.

من ضمن ميزاته:

• امكانية استخدام لوحة المفاتيح للتنقل بين الصور (الشرائح) المعروضة
• مؤثرات وادوات تحكم سهلة التعديل
  
• خاصية الاضافة التدريجية للمحتوى progressive enhancement (والتي تعني عرض المحتوى الاساسي اولاً ومن ثم تحميل المؤثرات والمحتوى الاضافي ... الخ) (دون الحاجة الى تفعيل الجافا سكريبت في المتصفح)
• والمزيد من الميزات

لا ننسى ان Accordionza يمكنه ان يعرض انواعاً كثيرة من المحتوى ، مما يجعل منه خياراً ممتازاً لمن يبحث عن شريط تمرير مرن شبيه بالاكورديون. 

١٩. mightySlider

ان mightySlider (والذي يعني اسمه شريط التمرير القوي او الجبار)  قوي بالفعل.

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

انه يحمل الكثير من الخيارات في جعبته:

• دعم لوحة المفاتيح، الفأرة، وشاشات اللمس
• تنقلات CCS3 المسرّعة باستخدام العتاد
• تصميم خالي من التعقيدات ومتوافق مع مقاييس التصميم ، ومهيأ لمحركات البحث SEO
• عدد لا محدود من الشرائح slides، طبقات خاصة للشروحات caption layers، ومؤثرات خاصة بالشروحات caption effects
• وهناك المزيد والكثير ايضاً

كما ان واجهة برمجة التطبيقات API الخاصة به سهلة الاستخدام للمطورين ، مما يضيف المزيد من طرق الاستخدام.

كما شيفرته (نص البرنامج الخاص بالشريط) سهلة القراءة مع شروحات وتعليقات كافية بين سطور البرنامج ، مما يجعل من mightySlider شريط تمرير (مبني على jQuery) ممتاز لاصحاب الفكر التقدمي (المبتكرين).

٢٠. Parallax Slider

يعمل Parallax Slider  بنفس الطريقة التي يعمل بها jQuery Responsive OneByOne Slider Plugin ، مما يسمح لك بتحريك كل طبقة بشكل منفصل ضمن كل شريحة على حدة.

يمكنك فعل ذلك مع عدة شرائح، او حتى مع شريحة واحدة، مما يضيف لموقعك بعض الخلفيات المتحركة المدهشة.

كل هذا يأتي مع اربعة انواع مختلفة من الشرائح، توفر جميعها نفس التأثير المتحرك للخلفية (الصورة الخلفية) المتحركة.

مثل العديد من اشرطة التمرير المبنية باستخدام jQuery، يحتوي هذا الشريط ايضاً على الميزات التالية:

• قابل للتعديل بشكل كامل
  
• يدعم الشاشات التي تعمل باللمس
• التعديل بشكل تلقائي مع احجام الشاشات المختلفة وبشكل كامل مع عدد غير محدود من الطبقات
• معايير خاصة للتشغيل التلقائي، واعادة التشغيل بشكل مستمر (loop)، للعرض والارتفاع، وللتوقيت
• والمزيد من الميزات
  

لا تقتصر الطبقات المتحركة على النص والصور. يمكن ايضاً اضافة فيديوهات يوتيوب ، وفيميو، و HTML5

 The Parallax Slider هو مثال آخر بيبن لنا كيف ان تأثيرات الفلاش Flash يمكن تنفيذها بطريقة افضل من فلاش نفسه - مع امكانية دعمها على جميع انواع الاجهزة.

ختاماً

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

ان لم يعجبك ايٌ من اشرطة التمرير في هذه القائمة، يمكنك دائماً ان تتبع تمرين انفاتو الخاص ب jQuery وان تقوم بعدها بتطوير شيء مختلف تماماً وفريد. او ، يمكنك البحث بين العديد من اشرطة التمرير الاخرى الموجودة في متجر انفاتو - هناك الكثير من الخيارات.

ما هو شريط التمرير المبني باستخدام jQuery المفضل لديك؟ ولماذا؟