شريط تمرير مثير للاهتمام في jQuery. تجميع المتزلجون المستجيبون عرض شرائح jQuery ممتاز

1. عرض شرائح jQuery ممتاز

عرض شرائح كبير وفعال باستخدام تقنيات jQuery.

2. المكون الإضافي jQuery "Scale Carousel"

عرض شرائح قابل للتحجيم باستخدام jQuery. ستكون قادرًا على تعيين أبعاد عرض الشرائح التي تناسبك بشكل أفضل.

3. jQuery plugin "slideJS"

شريط تمرير الصورة مع وصف النص.

4. المكوّن الإضافي "JSliderNews"

5. شريط تمرير CSS3 jQuery

عند التمرير فوق أسهم التنقل ، تظهر صورة مصغرة دائرية للشريحة التالية.

6. شريط تمرير "دورة العرض" نيس jQuery

jQuery المنزلق مع مؤشر تحميل الصور. هناك تغيير تلقائي للشرائح.

7. jQuery plugin "Parallax Slider"

شريط تمرير مع تأثير خلفية ثلاثية الأبعاد. أهم ما يميز شريط التمرير هذا هو حركة الخلفية ، التي تتكون من عدة طبقات ، كل منها يتم تمريره بسرعة مختلفة. والنتيجة تقليد للتأثير الحجمي. يبدو جميل جدا ، يمكنك أن ترى بنفسك. يتم عرض التأثير بسلاسة أكبر في متصفحات مثل: Opera و Google Chrome و IE.

8. شريط تمرير jQuery جديد وخفيف الوزن "bxSlider 3.0"

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

9.jQuery Image Slider، "slideJS" Plugin

سيكون شريط تمرير jQuery الأنيق قادرًا بالتأكيد على تزيين مشروعك.

10. عرض شرائح jQuery الإضافي "Easy Slides" v1.1

سهل الاستخدام البرنامج المساعد jQuery لإنشاء عروض الشرائح.

11. البرنامج المساعد "jQuery Slidy"

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

12.jQuery CSS معرض مع مبدل الشريحة التلقائي

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

13. jQuery نيفو سلايدر

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

14. jQuery منزلق "MobilySlider"

منزلق جديد. شريط تمرير jQuery مع تأثيرات مختلفة لتغيير الصور.

15. jQuery Slider² البرنامج المساعد

منزلق خفيف الوزن مع تغيير الشريحة تلقائيًا.

16. شريط تمرير جافا سكريبت جديد

شريط تمرير مع تغيير تلقائي للصورة.

البرنامج المساعد لتنفيذ عرض الشرائح مع تغيير الشرائح التلقائي. من الممكن التحكم في العرض باستخدام الصور المصغرة.

jQuery CSS منزلق الصور باستخدام البرنامج المساعد NivoSlider.

19. jQuery "jShowOff" المنزلق

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

20. البرنامج المساعد "Shutter Effect Portfolio"

البرنامج المساعد الجديد jQuery لمحافظ التصوير الفوتوغرافي. المعرض له تأثير مثير للاهتمام لتغيير الصور. تتبع الصور بعضها البعض بتأثير مشابه لتشغيل مصراع العدسة.

21. شريط تمرير CSS خفيف الوزن لجافا سكريبت "TinySlider 2"

تنفيذ منزلق الصورة باستخدام جافا سكريبت و CSS.

22. شريط تمرير رائع "Tinycircleslider"

منزلق دائري أنيق. يتم الانتقال بين الصور عن طريق السحب على طول محيط شريط التمرير على شكل دائرة حمراء. سوف يتناسب تمامًا مع موقعك إذا كنت تستخدم عناصر مستديرة في تصميمك.

23. jQuery صورة المنزلق

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

24. معرض مع المنمنمات "سلايدر كيت"

معرض "سلايدر كيت". يتم تنفيذ التمرير المصغّر رأسيًا وأفقيًا. يتم الانتقال بين الصور باستخدام: عجلة الماوس أو النقر بالماوس أو التمرير فوق الصورة المصغرة.

25. شريط تمرير محتوى jQuery Slider Kit

شريط تمرير محتوى عمودي وأفقي JQuery.

26. jQuery Slider Kit Slideshow

عرض الشرائح مع التغيير التلقائي للشريحة.

27. شريط التمرير الاحترافي جافا سكريبت CSS3 خفيف الوزن

تم إنشاء شريط تمرير jQuery و CSS3 أنيق في 2011.

عرض شرائح jQuery المصغرة.

29. عرض شرائح jQuery بسيط

عرض الشرائح مع أزرار التنقل.

30. عرض شرائح jQuery رائع "Skitter"

البرنامج المساعد jQuery "Skitter" لإنشاء عروض شرائح مذهلة. يدعم البرنامج المساعد 22 (!) نوعًا من تأثيرات الرسوم المتحركة المختلفة عند تغيير الصور. يمكن أن تعمل مع خيارين للتنقل بين الشرائح: أرقام الشرائح والصور المصغرة. تأكد من مشاهدة العرض التوضيحي ، بحث عالي الجودة. التقنيات المستخدمة: CSS ، HTML ، jQuery ، PHP.

31. عرض الشرائح "محرج"

عرض الشرائح الوظيفي. في شكل شرائح يمكن أن تكون: صور بسيطة ، صور مع تسميات توضيحية ، صور مع تلميحات ، مقاطع فيديو. يمكنك التنقل باستخدام الأسهم وروابط أرقام الشرائح والمفاتيح اليسرى / اليمنى على لوحة المفاتيح. تم عمل عرض الشرائح في عدة إصدارات: مع وبدون المنمنمات. لمشاهدة جميع الخيارات ، اتبع روابط العرض التوضيحي رقم 1 - العرض التوضيحي رقم 6 الموجود أعلى صفحة العرض التوضيحي.

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

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

34. شريط تمرير "Flux Slider" في jQuery و CSS3

شريط تمرير jQuery جديد. العديد من التأثيرات المتحركة الرائعة عند تغيير الشرائح.

35. jQuery jSwitch plugin

معرض jQuery المتحرك.

عرض شرائح سهل في jQuery مع تغيير الشريحة تلقائيًا.

37. نسخة جديدة من البرنامج المساعد "SlideDeck 1.2.2"

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

38. jQuery Sudo Slider

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

39. عرض الشرائح jQuery CSS3

يدعم عرض شرائح الصور المصغرة وضع تغيير الشريحة تلقائيًا.

40. jQuery Flux Slider

شريط تمرير مع العديد من التأثيرات لتغيير الصور.

41. شريط تمرير jQuery بسيط

شريط تمرير صورة jQuery الأنيق.

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

يمكننا إجراء تغييرات على بعض هذه المكونات الإضافية وإنشاء أشرطة تمرير جديدة تتوافق بشكل أكبر مع أهداف موقعنا.

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

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

منزلقات صورة JQuery

المنزلق المستجيب Jssor

لقد عثرت مؤخرًا على شريط تمرير jQuery الوظيفي هذا وتمكنت من رؤية أنه يؤدي وظيفته بشكل جيد للغاية. يحتوي على احتمالات لا حصر لها يمكن توسيعها من خلال كود شريط التمرير مفتوح المصدر:

• تصميم متكيف
• أكثر من 15 خيارًا للتخصيص ؛
• أكثر من 15 تأثير لتغيير الصورة ؛
• معرض الصور ، الدوارات ، دعم ملء الشاشة ؛
• محور دوار عمودي ، قائمة الشرائح ؛
• دعم الفيديو.

عرض | تحميل

PgwSlider عبارة عن شريط تمرير سريع الاستجابة يعتمد على JQuery / Zepto

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

• تصميم متجاوب؛
• تحسين SEO
• مدعومة من قبل متصفحات مختلفة ؛
• انتقالات بسيطة للصورة ؛
• حجم الأرشيف 2.5 كيلو بايت فقط.

عرض | تحميل

Jquery Vertical News Slider

شريط تمرير jQuery مرن ومفيد مصمم لمصادر الأخبار مع قائمة بالمشاركات على الجانب الأيسر وصورة على اليمين:

• تصميم متكيف
• عمود عمودي لتبديل الأخبار ؛
• رؤوس ممتدة.

عرض | تحميل

منزلق Wallop

لا يحتوي شريط التمرير هذا على JQuery ، لكني أود تقديمه لأنه مضغوط جدًا ويمكنه تقليل أوقات تحميل الصفحة بشكل كبير. اسمحوا لي أن أعرف إذا كنت ترغب في ذلك:

• تصميم متجاوب؛
• تصميم بسيط؛
• خيارات مختلفة لتغيير الشرائح ؛
• كود جافا سكريبت الأدنى ؛
• الحجم 3 كيلو بايت فقط.

عرض | تحميل

معرض بولارويد ذو الطراز المسطح

يجب أن يكون معرض نمط المستند مع تخطيط مرن وتصميم جميل موضع اهتمام الكثير منكم. أكثر ملاءمة للأجهزة اللوحية والشاشات الكبيرة:

• شريط تمرير مستجيب
• تصميم شقة؛
• تغيير عشوائي للشرائح ؛
• الوصول الكامل إلى شفرة المصدر.

عرض | تحميل

سلايدر

عرض | تحميل

HiSlider - منزلق صور HTML5 و jQuery و WordPress

قدم HiSlider مكونًا إضافيًا مجانيًا جديدًا لمنزلق jQuery يتيح لك إنشاء مجموعة متنوعة من معارض الصور مع انتقالات رائعة:

• شريط تمرير مستجيب
• لا تتطلب معرفة البرمجة ؛
• العديد من الأشكال والقوالب الرائعة ؛
• تأثيرات انتقالية جميلة ؛
• دعم منصات مختلفة ؛
• متوافق مع WordPress و Joomla و Drupal ؛
• القدرة على عرض المحتوى من أنواع مختلفة: الصور ومقاطع الفيديو يوتيوب ومقاطع الفيديو Vimeo ؛
• التخصيص المرن
• وظائف إضافية مفيدة ؛
• يتم عرض محتوى غير محدود.

عرض | تنزيل

نجاح باهر المنزلق

WOW Slider عبارة عن شريط تمرير صور jQuery سريع الاستجابة مع صور مذهلة ( الدومينو ، الدوران ، التمويه ، الوجه والوميض ، الطيران للخارج ، الستائر) والقوالب الاحترافية.

يأتي WOW Slider مزودًا بمعالج التثبيت الذي يتيح لك إنشاء منزلقات رائعة في ثوانٍ دون الحاجة إلى المرور عبر التعليمات البرمجية أو تحرير الصور. متاح أيضًا لتنزيل إصدارات البرنامج المساعد لـ Joomla و WordPress:

• استجابة تامة
• دعم لجميع المتصفحات وجميع أنواع الأجهزة ؛
• دعم لأجهزة اللمس ؛
• سهولة التثبيت على WordPress ؛
• المرونة في التخصيص ؛
• مُحسَّن لكبار المسئولين الاقتصاديين.

عرض | تنزيل

Nivo Slider - برنامج jQuery Plugin مجاني

يُعرف Nivo Slider في جميع أنحاء العالم بأنه أجمل وأسهل شريط تمرير للصور. المكون الإضافي Nivo Slider مجاني وتم إصداره بموجب ترخيص MIT:

• مطلوب JQuery 1.7 أو أعلى ؛
• تأثيرات انتقالية جميلة ؛
• بسيطة ومرنة للتخصيص ؛
• مدمجة وقابلة للتكيف ؛
• المصدر المفتوح
• قوية وبسيطة
• عدة قوالب مختلفة ؛
• اقتصاص الصورة التلقائي.

عرض | تنزيل

شريط تمرير jQuery بسيط مع الوثائق الفنية

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

• تصميم متجاوب؛
• تصميم أضيق الحدود
• تأثيرات مختلفة للسقوط وتغيير الشرائح.

عرض | تنزيل

منزلق صورة jQuery بالحجم الكامل

شريط تمرير بسيط للغاية يشغل 100٪ من عرض الصفحة ويتكيف مع حجم شاشات الأجهزة المحمولة. إنه يعمل مع انتقالات CSS ، ويتم "تكديس" الصور باستخدام نقاط ارتساء. يمكن استبدال المرساة أو إزالتها إذا كنت لا تريد ربط ارتباط بالصورة.

عند التثبيت ، يتمدد شريط التمرير إلى 100٪ من عرض الشاشة. كما يمكنه تقليل حجم صور الشرائح تلقائيًا:

• شريط تمرير jQuery سريع الاستجابة ؛
• بالحجم الكامل
• تصميم أضيق الحدود.

عرض | تنزيل

شريط تمرير المحتوى المرن + البرنامج التعليمي

يقوم Elastic Content Slider تلقائيًا بضبط العرض والارتفاع بناءً على أبعاد العنصر الأصل. هذا شريط تمرير jQuery بسيط. يتكون من منطقة شريحة في الأعلى وشريط علامة تبويب تنقل في الأسفل. يضبط شريط التمرير عرضه وارتفاعه ليلائم الحاوية الرئيسية.

عند عرضها على شاشات صغيرة قطريًا ، تتحول علامات تبويب التنقل إلى رموز صغيرة:

• تصميم متكيف
• التمرير عن طريق النقر بالماوس.

عرض | تنزيل

متزلج ثلاثي الأبعاد مجاني

شريط تمرير تجريبي يقلب عبر الصور ثلاثية الأبعاد. رزمتان تشبهان رزمًا من الورق ، والتي عند التمرير خلالها ، يتم عرض الصور في منتصف شريط التمرير:

• تصميم متكيف
• فليب الانتقال
• تأثيرات ثلاثية الأبعاد.

عرض | تنزيل

Fullscreen Slit Slider مدعوم من JQuery و CSS3 + البرنامج التعليمي

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

• تصميم متكيف
• انتقال الانقسام
• شريط تمرير ملء الشاشة.

عرض | تنزيل

Unislider هو شريط تمرير jQuery صغير جدًا

لا توجد أجراس وصفارات وترميز غير ضروري ، الحجم أقل من 3 كيلو بايت. استخدم أي HTML للشرائح الخاصة بك ، وقم بتوسيعها باستخدام CSS. كل ما يتعلق بـ Unslider مستضاف على GitHub:

• دعم المتصفحات المختلفة ؛
• دعم لوحة المفاتيح ؛
• تعديل الارتفاع؛
• تصميم متكيف
• دعم الإدخال باللمس.

عرض | تحميل

الحد الأدنى من الشرائح المستجيبة

مكون إضافي بسيط ومضغوط ( الحجم 1 كيلو بايت فقط) ، مما يؤدي إلى إنشاء شريط تمرير سريع الاستجابة باستخدام عناصر داخل الحاوية. يعمل ResponsiveSLides.js مع مجموعة متنوعة من المتصفحات ، بما في ذلك جميع إصدارات IE من IE6 وما فوق:

• استجابة تامة
• الحجم 1 كيلو بايت ؛
• انتقالات CSS3 مع القدرة على التشغيل عبر JavaScript ؛
• ترميز بسيط باستخدام قائمة نقطية
• القدرة على تخصيص تأثيرات الانتقال ومدة عرض شريحة واحدة ؛
• يدعم القدرة على إنشاء عروض شرائح متعددة ؛
• التمرير التلقائي واليدوي.

عرض | تنزيل

الكاميرا - منزلق jQuery مجاني

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

• تصميم سريع الاستجابة
• التوقيعات
• القدرة على إضافة مقاطع الفيديو.
• 33 أيقونات ملونة مختلفة.

عرض | تنزيل

SlidesJS ، ملحق jQuery سريع الاستجابة

SlidesJS هو ملحق jQuery سريع الاستجابة (1.7.1 وما فوق) مع دعم انتقالات اللمس و CSS3. جربه ، جرب بعض الأمثلة الجاهزة لمساعدتك في معرفة كيفية إضافة SlidesJS إلى مشروعك:

• تصميم متكيف
• انتقالات CSS3 ؛
• دعم لأجهزة اللمس ؛
• من السهل اقامة.

عرض | تحميل

BX Jquery المنزلق

هذا شريط تمرير jQuery سريع الاستجابة:

• سريع الاستجابة - يتكيف مع أي جهاز ؛
• التغيير الأفقي والرأسي للشرائح ؛
• يمكن أن تحتوي الشرائح على صور أو مقاطع فيديو أو محتوى HTML ؛
• دعم موسع للأجهزة التي تعمل باللمس ؛
• استخدام انتقالات CSS للرسوم المتحركة للشرائح ( تسريع الأجهزة);
• واجهة برمجة تطبيقات رد الاتصال والأساليب العامة بالكامل ؛
• حجم ملف صغير
• سهل التنفيذ.

عرض | تنزيل

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

أفضل شريط تمرير سريع الاستجابة. تم تحسين الإصدار الجديد لزيادة سرعة العمل والاكتناز.

عرض | تحميل

Galleria - معرض صور سريع الاستجابة يعتمد على JavaScript

يتم استخدام Galleria بواسطة ملايين المواقع لإنشاء معارض صور عالية الجودة. عدد المراجعات الإيجابية حول عملها يتدحرج:

• مجاني تماما؛
• عرض ملء الشاشة ؛
• 100٪ مستجيب ؛
• لا تتطلب خبرة في البرمجة ؛
• دعم لأجهزة iPhone و iPad وأجهزة اللمس الأخرى ؛
• فليكر وفيميو ويوتيوب والمزيد ؛
• عدة مواضيع.

عرض | تحميل

Blueberry عبارة عن شريط تمرير صورة jQuery سريع الاستجابة

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

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

رف أفقي متكيف مع تعليمات تركيب مفصلة. إنه مصنوع بأسلوب بسيط ، ولكن يمكنك تصميمه كما تريد.

2. شريط التمرير على Glide.js

شريط التمرير هذا مناسب لأي موقع. يستخدم المصدر المفتوح Glide.js. يمكن تغيير ألوان شريط التمرير بسهولة.

3. عرض شرائح المحتوى المائل

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

4. شريط التمرير باستخدام قماش HTML5

منزلق جميل جدا ومثير للإعجاب مع الجسيمات التفاعلية. يتم تنفيذه باستخدام لوحة HTML5 ،

5. شريط تمرير "تحويل الصور"

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

6. شريط تمرير دائري

شريط تمرير على شكل دائرة مع تأثير انعكاس الصورة.

7. عدم وضوح الخلفية المنزلق

شريط التمرير التكيفي مع التبديل وطمس الخلفية.

8. شريط تمرير الموضة التكيفي

شريط تمرير موقع ويب بسيط وخفيف الوزن وسريع الاستجابة.

9. Slicebox - منزلق صورة jQuery 3D(محدث)

نسخة محدثة من شريط تمرير Slicebox مع إصلاحات وميزات جديدة.

10. شبكة الصور المتحركة المستجيبة المجانية

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

11. فليكسلايدر

البرنامج المساعد المجاني العالمي لموقع الويب الخاص بك. يأتي هذا المكون الإضافي مع العديد من خيارات شريط التمرير والعرض الدائري.

12. إطار الصورة

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

ملاحظة.أضع شريط التمرير عدة مرات وأعتقد أنه من الأفضل

13. منزلق معرض ثلاثي الأبعاد مجاني وسريع الاستجابة مع الصور المصغرة.

شريط تمرير المعرض التجريبي 3DPanelLayoutمع تأثيرات الرسوم المتحركة المتشابكة والمثيرة للاهتمام.

14. شريط التمرير على css3

تم إنشاء شريط التمرير سريع الاستجابة في css3 بتدفق سلس للمحتوى ورسوم متحركة خفيفة.

15. WOW المنزلق

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

17. مرونة

شريط تمرير مرن مستجيب بالكامل مع صور مصغرة للشرائح.

18. شق

إنه شريط تمرير سريع الاستجابة بملء الشاشة باستخدام الرسوم المتحركة css3. شريط التمرير مصنوع في نسختين. الرسوم المتحركة غير عادية وجميلة.

19. معرض الصور التكيفي زائد

معرض منزلق مجاني بسيط مع الصور التي تم تحميلها.

20. شريط تمرير مستجيب لـ WordPress

شريط تمرير سريع الاستجابة لـ WP.

21. شريط تمرير محتوى المنظر

شريط تمرير مع تأثير اختلاف المنظر والتحكم في كل عنصر باستخدام CSS3.

22. المتزلج مع ربط الموسيقى

شريط التمرير باستخدام JPlayer مفتوح المصدر. يشبه شريط التمرير هذا عرضًا تقديميًا به موسيقى.

23. المنزلق مع jmpress.js

يعتمد شريط التمرير سريع الاستجابة على jmpress.js وبالتالي يسمح لك باستخدام بعض التأثيرات ثلاثية الأبعاد الرائعة على الشرائح الخاصة بك.

24. تحوم سريع عرض الشرائح

عرض الشرائح مع التبديل السريع بين الشرائح. تبديل الشرائح عند التمرير.

25. صورة أكورديون مع CSS3

الأكورديون للصور باستخدام css3.

26. برنامج Touch Optimized Gallery Plugin

إنه معرض سريع الاستجابة تم تحسينه للأجهزة التي تعمل باللمس.

معرض 27.3D

معرض الجدار ثلاثي الأبعاد- تم إنشاؤه لمتصفح Safari ، حيث سيكون التأثير ثلاثي الأبعاد مرئيًا. إذا تم عرضها في متصفح مختلف ، فستكون الوظيفة جيدة ولكن التأثير ثلاثي الأبعاد لن يكون مرئيًا.

28. المنزلق ترقيم الصفحات

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

29. مونتاج الصور مع jQuery

تحديد المواقع التلقائي للصور بناءً على عرض الشاشة. شيء مفيد للغاية عند تطوير موقع محفظة.

30.3D معرض

منزلق دائري ثلاثي الأبعاد بسيط في css3 و jQuery.

31. وضع ملء الشاشة مع تأثير ثلاثي الأبعاد على css3 و jQuery

شريط تمرير ملء الشاشة مع انتقال جميل.

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

ترميز HTML

كل شيء بسيط للغاية هنا ، ما عليك سوى إضافة قائمة UL في البداية مباشرة بعد العلامة هيئة.

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

أنماط CSS

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

Body_slides (list-style: none؛ margin: 0؛ padding: 0؛ z-index: -2؛ background: # 000؛). Body_slides، .body_slides: after (position: fixed؛ width: 100٪؛ height: 100٪ ؛ أعلى: 0 بكسل ؛ اليسار: 0 بكسل ؛). body_slides: after (content: "" ؛ الخلفية: url الشفاف (images / pattern.png) كرر أعلى اليسار ؛) .body_slides li (العرض: 100٪ ؛ الارتفاع: 100٪ ؛ الموضع: مطلق ؛ أعلى: 0 ؛ يسار: 0 ؛ حجم الخلفية: الغلاف ؛ تكرار الخلفية: لا شيء ؛ التعتيم: 0 ؛ -مجموعة الويب الرسوم المتحركة: anim_slides 18 ثانية خطية لانهائية ؛ -moz-animé: anim_slides 18s خطي لانهائي 0 ثانية ؛ -o-animé: anim_slides 18 ثانية خطية 0 ثانية ؛ -ms-anim: anim_slides 18 ثانية خطي لانهائي 0 ثانية ؛ رسوم متحركة: anim_slides 18s خطي لانهائي 0 ثانية ؛). body_slides li: nth-child (1) (صورة الخلفية: url (الصور / 1.jpg)) Body_slides li: nth-child (2) (-webkit-animation-delay: 6.0s ؛ -moz-animation-delay: 6.0s ؛ background-image: url (images / 2.jpg)). body_slides li: nth-child (3) (-webkit-animation-delay: 12.0s ؛ -moz-animation-delay: 12.0s ؛ صورة الخلفية: url (images / 3.jpg)) @ -webkit-keyframes anim_slides (0٪ (عتامة: 0 ؛) 6٪ (عتامة: 1 ؛) 24٪ (عتامة: 1 ؛) 30٪ (عتامة: 0 ؛) 100٪ ( العتامة: 0 ؛)) @ -moz-keyframes anim_slides (0٪ (عتامة: 0 ؛) 6٪ (عتامة: 1 ؛) 24٪ (عتامة: 1 ؛) 30٪ (عتامة: 0 ؛) 100٪ (عتامة: 0؛))

إذا كنت معتادًا على CSS ، فلن يكون من الصعب عليك فهم المسؤول عن ماذا. سأخبرك بالحد الأدنى ، لأنه لا جدوى من تدريس CSS.

قائمة الشرائح لدينا فئة الانزلاقات الجسدية... تم تصميمه من أجل المظهر والإعدادات العامة.

بعد ذلك لدينا عنصر زائف - : بعد، بعدما، والتي تحدد طبقة إضافية ويتم فرض نمط على شكل نقاط أعلى الخلفية. يتم ذلك باستخدام الصورة التي تم تحديد المسار لها images / pattern.png... إذا كان لديك مسار مختلف ، فأشر إليه بشكل صحيح.

.body_slides li: nth-child (1).- هذه هي الشريحة الأولى بالترتيب ولها صورة خلفية مخصصة لها. بعد ذلك يأتي الطفل nth (2) ، بالإضافة إلى الصورة ، يتم إعطاؤه أيضًا وقتًا ويساوي 6 ثوانٍ. أي أنه سيظهر بعد 6 ثوانٍ من الشريحة الأولى. ثم الطفل nth-child (3) ، سيظهر بعد ست ثوانٍ أخرى ، بحيث يكون وقته 12 ثانية. إذا كنت بحاجة إلى إضافة 4 شرائح ، فقم بإضافة nth-child (4) ويجب أن يكون الوقت قد تم بالفعل 18 ثانية. أعتقد أنه من الواضح هنا.

بعد ذلك ، تحتاج إلى تحديد وقت الحركة الكامل ، حيث يتم تعيينه الآن body_slides liويساوي 18 ثانية. إذا أضفت 4 شريحة ، فسيساوي 24 وهكذا. إذا كنت صديقًا للرياضيات ، فيجب عليك التأقلم ، والشيء الرئيسي هو عدم ارتكاب خطأ ، لأن شريط التمرير لن يعمل تمامًا. إذا رغبت في ذلك ، يمكنك الإسراع أو الإبطاء من خلال تحديد الوقت المطلوب.

الإطارات الرئيسية anim_slidesهو ظهور واختفاء الشريحة. في البداية ، تكون الشريحة شفافة ويتم تعيين الشرط عليها - العتامة: 0؛... عندما يأتي دور أي من الشرائح ، يظهر أولاً ، ثم يبدأ في الشفافية مرة أخرى ويختفي تمامًا ، ويظهر مكان جديد في مكانه. إذا كنت تريد تغيير سرعة الظهور أو الاختفاء ، فقم بتغيير النسبة المئوية - هذه نسبة مئوية من إجمالي الوقت.

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

هذا كل شئ شكرا لاهتمامكم. 🙂