منزلق CSS3 مع انتقال سلس. معرض الصور التكيفي زائد

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

إذا كنت ترغب في تثبيت شريط تمرير أو دائري عالمي على موقع الويب الخاص بك، فيمكنك الانتقال إلى

المتزلجون للموقع

1. منزلق المشاركات الأفقية المستجيبة

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

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

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

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

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

شريط تمرير جميل جدًا ومثير للإعجاب يحتوي على جزيئات تفاعلية. تم إنشاؤه باستخدام قماش HTML5،

5. صورة تحوير المنزلق

شريط التمرير مع تأثير تتحول. في هذا المثال، يكون شريط التمرير مناسبًا تمامًا لمحفظة مطور الويب أو استوديو الويب في شكل محفظة.

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

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

7. شريط التمرير بخلفية غير واضحة

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

8. منزلق الموضة المستجيب

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

9. Slicebox - شريط تمرير الصور ثلاثي الأبعاد jQuery (محدث)

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

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

سلايدر للموقع الجزء الثاني .

11. شريط التمرير المرن

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

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

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

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

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

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

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

تم إنشاء شريط التمرير التكيفي باستخدام CSS3 مع المظهر السلس للمحتوى والرسوم المتحركة الخفيفة.

هو شريط تمرير الصور مع مذهلة تأثيرات بصريةوالرسوم المتحركة.

17. مطاطا

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

18. الشق

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

19. معرض الصور التكيفي بلس

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

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

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

21. منزلق محتوى المنظر

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

22. شريط التمرير مع وصلة الموسيقى

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

سلايدرز للموقع الجزء الثالث.

23. شريط التمرير مع jmpress.js

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

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

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

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

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

مجموعة من الأمثلة المجانية لرموز شريط التمرير بتنسيق HTML وCSS: بطاقة، مقارنة، ملء الشاشة، سريعة الاستجابة، بسيطة، إلخ. تحديث مجموعة مارس 2018. 2 عناصر جديدة.

جدول المحتويات مقالات ذات صلة حول الكود

مجموعة من شاشات الإعداد بتنسيق HTML/CSS/JS. تجربة شخصية مع طبقات أيقونات PNG، وانتقالات CSS3، وflexbox.

شريط تمرير بطاقة معلومات HTML وCSS وJavaScript.
صنع بواسطة آندي تران
23 نوفمبر 2015

يعمل شريط تمرير الصور على متصفحات سطح المكتب والجوال.
من صنع تارون
29 سبتمبر 2014

المقارنة (قبل / بعد) المتزلجون

حول الكود

شريط تمرير بسيط ونظيف لمقارنة الصور، وسريع الاستجابة وجاهز للاستخدام باللمس، ومُصمم باستخدام CSS وjQuery.

حول الكود

شريط تمرير قبل وبعد باستخدام html وcss فقط.

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

Vanilla JS، الحد الأدنى، جميل المظهر.
صنع هوو
3 يوليو 2017

حول الكود

عنصر منزلق "تقسيم الشاشة" مع JavaScript.

تجربة صغيرة لشريط التمرير قبل وبعد، كل ذلك داخل ملف SVG. الإخفاء يجعل الأمر بسيطًا جدًا. نظرًا لأنها كلها بصيغة SVG، فإن الصور والتعليقات التوضيحية تتناسق معًا بشكل جيد. تم استخدام المكونات الإضافية الخاصة بـ GreenSock Draggable و ThrowProps للتحكم في شريط التمرير.
من صنع كريج روبلوسكي
17 أبريل 2017

يستخدم إدخال النطاق المخصص لشريط التمرير.
صنع بواسطة دودلي ستوري
14 أكتوبر 2016

شريط تمرير سريع الاستجابة لمقارنة الصور باستخدام HTML وCSS وJavaScript.
صنع بواسطة إيجي جورجولو
3 أغسطس 2016

شريط تمرير فيديو HTML5 وCSS3 وJavaScript قبل وبعد المقارنة.
صنع بواسطة دودلي ستوري
24 أبريل 2016

شريط تمرير سهل الاستخدام وقابل للسحب لمقارنة صورتين بسرعة، مدعوم بـ CSS3 وjQuery.
صنع بواسطة كودي هاوس
15 سبتمبر 2014

المتزلجون ملء الشاشة

حول الكود

تأثير انتقال لطيف لشريط تمرير ملء الشاشة.

حول الكود

شريط التمرير الأفقي المنظر مع Swiper.js.

حول الكود

منزلق منظور ثلاثي الأبعاد سلس وسريع الاستجابة عند تحريك الماوس.

شريط تمرير الصورة الرئيسية بملء الشاشة (موضوع لوحات التمرير) مع HTML وCSS وJavaScript.
من صنع توبياس بوجليولو
25 يونيو 2017

شيء تفاعلي منزلق يستخدم تأثيرات السرعة والسرعة (UI Pack) لتحسين الرسوم المتحركة. يتم تشغيل الرسوم المتحركة عبر مفاتيح الأسهم، أو النقر على التنقل، أو مقبس التمرير. يتضمن هذا الإصدار الحدود كجزء من التفاعل.
من صنع ستيفن سكاف
11 مايو 2017

شريط تمرير بسيط بأسلوب بسيط لإظهار الصور. ينبثق جزء من الصورة على كل شريحة.
صنع بواسطة ناثان تايلور
22 يناير 2017

الشيء سهل جدًا للتخصيص. يمكنك تغيير الخط وحجم الخط ولون الخط وسرعة الرسوم المتحركة بأمان. سيظهر الحرف الأول من سلسلة جديدة في المصفوفة في JS على شريحة جديدة. من السهل إنشاء (أو حذف) شريحة جديدة: 1. أضف مدينة جديدة في المصفوفة في JS. 2. تغيير متغير عدد الشرائح ووضع صورة جديدة في قائمة scss في CSS.
من صنع رسلان بيفوفاروف
8 أكتوبر 2016

مسار مقطع لحدود مستطيلة لإخفاء الصورة (مجموعة أدوات الويب فقط).

وضع المزج لهذا القناع.

نظام ألوان ذكي، ما عليك سوى وضع اسم اللون والقيمة في خريطة sass ثم إضافة فئة مناسبة باسم اللون هذا إلى العناصر وسيعمل كل شيء!

القائمة الجانبية الرائعة للاعتمادات (انقر فوق الزر الصغير في وسط العرض التوضيحي).

فانيليا شبيبة مع فقط< 200 lines of code (basically it’s just adds/removes classes).

صنع نيكولاي تالانوف
7 أكتوبر 2016

هذا شريط التمرير المنحرف مع التمرير استنادًا إلى JS وCSS النقي (بدون مكتبات).
صنع فيكتور بيلوزيروف
3 سبتمبر 2016

رسم متحرك منزلق بتصميم بوكيمون.
صنع بواسطة فام ميكون
18 أغسطس 2016

شريط تمرير HTML وCSS وJavaScritp مع رسوم متحركة معقدة ونص بزاوية نصف ملونة.
من صنع رسلان بيفوفاروف
13 يوليو 2016

تأثير المنظر المنزلق مع HTML وCSS وJavaScript.
صنع بواسطة مانويل ماديرا
28 يونيو 2016

شريط تمرير HTML وCSS وJavaScript بتأثير مضاعف.
صنع بيدرو كاسترو
21 مايو 2016

شريط تمرير يكشف مسار المقطع باستخدام HTML وCSS وJavaScript.
صنع نيكولاي تالانوف
16 مايو 2016

GSAP + شريط التمرير Slick مع معاينة الشرائح السابقة/التالية.
من صنع كارلو فيديك
27 أبريل 2016

HTML وCSS وJavaScript منزلق الصفحة الكاملة.
صنع بواسطة جوزيف مارتوتشي
28 فبراير 2016

نموذج أولي لشريط التمرير الكامل مع HTML وCSS وJavaScript.
من صنع جلوبر سامبايو
6 يناير 2016

عرض شرائح بملء الشاشة، سريع الاستجابة، ومتحرك باستخدام Greensocks TweenLite/Tweenmax.
من صنع أردن
12 ديسمبر 2015

من صنع أردن
5 ديسمبر 2015

شريط تمرير ملء الشاشة (GSAP Timeline) رقم 1 مع HTML وCSS وJavaScript.
صنع بواسطة دياكو م.لطف اللهي
23 نوفمبر 2015

شريط تمرير HTML وCSS مع تأثيرات مخصصة.
صنع نيكولاي تالانوف
12 نوفمبر 2015

شريط تمرير بملء الشاشة مع اختلاف المنظر مع HTML وCSS وJavaScript.
صنع نيكولاي تالانوف
12 نوفمبر 2015

إثبات مفهوم المنزلق الدوار. يستخدم مقطع المسار والكثير من الرياضيات.
من صنع تايلر جونسون
16 أبريل 2015

CSS بسيط بملء الشاشة & شريط تمرير مسجباستخدام TranslationX وترجمة نعومة 3D!
صنع بواسطة يوسف
19 أغسطس 2014

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

حول الكود

الصورة والمحتوى مع تأثير المنظر.

حول الكود

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

حول الكود

منزلق/دائري صورة Flexbox بسيط مصنوع باستخدام JavaScript الفانيليا.

حول الكود

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

حول الكود

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

حول الكود

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

استكشاف بعض التحولات المنزلق. شريط التمرير Swiper مع تمكين خيار المنظر. اللعب مع مرشحات CSS في الغالب هنا.
صنع بواسطة ميركو زوريتش
12 يونيو 2017

شريط تمرير GSAP بسيط مع بعض الرسوم المتحركة الدقيقة.
صنع بواسطة جوران فربان
9 يونيو 2017

واجهة المستخدم المنزلقة مع HTML وCSS وJavaScript.
صنع بواسطة ميرجيم أوجكاني
6 يونيو 2017

شريط التمرير GSAP الإصدار 2.
صنع بواسطة إم آن
4 مايو 2017

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

تم الاستفادة من صورة حدود CSS ومسار المقطع لإنشاء تأثير حركة شريط التمرير.
من صنع إميلي هايمان
31 ديسمبر 2016

شريط تمرير صغير مصمم باستخدام flexbox. سريع الاستجابة إلى حد ما، ويمكن أن يحتوي على عناصر ثابتة بجانب منطقة شريط التمرير.
صنع بواسطة روبرت
28 نوفمبر 2016

HTML، CSS قماش التمرير.
صنع بواسطة نفاجيليس
29 أكتوبر 2016

شريط تمرير سلس بتنسيق HTML وCSS وJavaScript ثلاثي الأبعاد.
صنعه إدواردو أليجريني
19 أكتوبر 2016

HTML وCSS شريط تمرير كب كيك مع الرشات!
من صنع جيمي كولتر
14 أكتوبر 2016

من صنع ماريو ماسيلي
12 أكتوبر 2016

استكشاف الرسوم المتحركة لواجهة المستخدم رقم 2 باستخدام HTML وCSS وJavaScript.
من صنع ماريو ماسيلي
22 سبتمبر 2016

استكشاف الرسوم المتحركة لواجهة المستخدم رقم 3 باستخدام HTML وCSS وJavaScript.
من صنع ماريو ماسيلي
22 سبتمبر 2016

التجارة الإلكترونية المتزلج v2.0 مع HTML، CSS وجافا سكريبت.
صنع بيدرو كاسترو
17 سبتمبر 2016

HTML وCSS وJavaScript منزلق نظيف بخلفية منحنية.
من صنع رسلان بيفوفاروف
13 سبتمبر 2016

استكشاف الرسوم المتحركة لواجهة المستخدم رقم 1 باستخدام HTML وCSS وJavaScript.
من صنع ماريو ماسيلي
8 سبتمبر 2016

استمتع بقوة CSS: أعلى وأسفل كل صورة وسطية وشريط تمرير مرقّم مع العرض المبسط.
صنع بواسطة كسيسو
15 أغسطس 2016

التعرض المزدوج هو أسلوب تصوير يجمع بين صورتين مختلفتين في صورة واحدة.
صنع بواسطة ميساكي ناكانو
3 أغسطس 2016

شريط التمرير باستخدام مقطع خاصية CSS3.
صنع بيدرو كاسترو
1 مايو 2016

شريط تمرير CSS سريع الاستجابة.
صنع بواسطة جيكوين
19 أبريل 2016

هذه تجربة شريط تمرير بسيطة تعرض كلمات ذات معاني جميلة لا يمكن ترجمتها مباشرة. التركيز: الطباعة الأنيقة والانتقالات البسيطة والمغرية.
صنع بواسطة جو هاري
5 أبريل 2016

فكرة الرسوم المتحركة هي تغيير قيمة مسار مقطع CSS، وبالتالي إحداث تأثير اخفاء.
صنع بهاكتي الأكبر
31 مارس 2016

شريط التمرير النقطي مع HTML وCSS وJavaScript.
صنع بواسطة ديريك نجوين
16 مارس 2016

منزلق تأثير المنشور مع HTML وCSS وJavaScript.
صنعها المنتصر
12 مارس 2016

معرض خلفية منزلق باستخدام HTML وCSS وJavaScript.
صنع بواسطة رون جيرلاخ
30 نوفمبر 2015

حل شريط تمرير HTML وCSS وJavaScript.
صنع بواسطة يورغن جينسر
30 سبتمبر 2015

شريط تمرير المنتج مدعوم من Sequence.js. Sequence.js - إطار الرسوم المتحركة CSS سريع الاستجابة لإنشاء أشرطة تمرير وعروض تقديمية ولافتات فريدة وتطبيقات أخرى تعتمد على الخطوات.
صنع بواسطة إيان لون
15 سبتمبر 2015

دائرة صغيرة مخصصة المنزلق.
صنع برام دي هان
11 أغسطس 2015

شريط تمرير GTA V سريع الاستجابة مع HTML وCSS وJavaScript.
من صنع إدوارد ماير
24 يناير 2014

إنه يشبه شريط التمرير ولكنه يدور بشكل مكعب لأسباب غير معروفة.
صنع بواسطة اريك بروير
4 ديسمبر 2013

صنع بواسطة هوغو داربي براون
28 أغسطس 2013

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

شريط تمرير تراكب الصور باستخدام HTML وCSS وJavaScript الفانيليا.
من صنع يوغام
7 يونيو 2017

HTML وCSS يتميز بشريط تمرير الصور.
صنع بواسطة جوشوا هيبرت
16 يونيو 2016

حول الكود

نقية بسيطة مصنوعة من

ميزة شريط التمرير مع HTML وCSS وJavaScript.
صنع بواسطة آندي لوريمر
23 أكتوبر 2015

CSS فقط.
من صنع ألبرتو هارتزيت
6 مايو 2015

الميزات: - عرض الشرائح التلقائي - إيقاف مؤقت عند التمرير - عداد الشرائح الديناميكي - إظهار / إخفاء عناصر التحكم عند التمرير.
صنع أندريه كورتيليني
14 أغسطس 2014

شريط تمرير الصور متعدد المحاور مع HTML وCSS وJavaScript.
من صنع بوراك كان
22 يوليو 2013

شريط التمرير المكعب، تجربة صغيرة مع تحويلات HTML5/CSS3 ثلاثية الأبعاد.
صنع ايليا ك.
26 يونيو 2013

05/18/15 48.9 ألف

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

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

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

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

منزلقات الصور JQuery Jssor Responsive Slider

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

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

تجريبي | تحميل

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

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

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

تجريبي | تحميل

مسج عمودي أخبار المنزلق

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

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

تجريبي | تحميل

والوب سلايدر

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

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

تجريبي | تحميل

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

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

تجريبي | تحميل

HiSlider – شريط تمرير الصور بتنسيق HTML5 وjQuery وWordPress

قدم HiSlider تطبيقًا مجانيًا جديدًا البرنامج المساعد مسج- شريط التمرير، والذي يمكنك من خلاله إنشاء مجموعة متنوعة من معارض الصور ذات التحولات الرائعة:

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

تجريبي | تحميل

واو سلايدر

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

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

استجابة تامة؛
يدعم جميع المتصفحات وجميع أنواع الأجهزة؛
دعم الأجهزة التي تعمل باللمس.
سهولة التثبيت على ووردبريس؛
المرونة في التكوين.
تحسين محركات البحث.

تجريبي | تحميل

Nivo Slider - مكون إضافي مجاني لـ jQuery

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

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

تجريبي | تحميل

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

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

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

تجريبي | تحميل

شريط تمرير صورة jQuery بالحجم الكامل

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

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

منزلق JQuery التكيفي؛
الحجم الكامل؛
تصميم بسيط.

تجريبي | تحميل

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

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

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

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

تجريبي | تحميل

سلايدر مكدس ثلاثي الأبعاد مجاني

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

التصميم التكيفي
الوجه - الانتقال؛
تأثيرات ثلاثية الأبعاد.

تجريبي | تحميل

شريط التمرير ذو ملء الشاشة استنادًا إلى البرنامج التعليمي 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 مجاني وسريع الاستجابة:

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

تجريبي | تحميل

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

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

تجريبي | تحميل

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

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

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

تجريبي | تحميل

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

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

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

تجريبي | تحميل

مسج بوباي 2.1

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

التصميم التكيفي
دعم التوقيع؛
وضع عرض الشرائح.

تجريبي | تحميل

FractionSlider - مكون إضافي مجاني لشريط التمرير jQuery مع تأثير اختلاف المنظر

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

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

تجريبي | تحميل

شريط تمرير الصور المستجيب مجانًا مع الدليل

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

التصميم التكيفي
آثار التلاشي؛
أسهم لليسار، لليمين؛
أزرار خضراء.

تجريبي | تحميل

Sequence هو مكون إضافي مجاني مع انتقالات CSS3.

إنه يأتي مع أربعة سمات، والموضوعات الأكثر تطورًا فقط، مثل شريط التمرير على نمط Apple وشريط تمرير المنظر الأفقي، لا يستجيب:

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

جيد سيئ

أهلاً بكم. أريد أن أقدم انتباهكم إلى شريط تمرير رائع جدًا. أوه... أرى أنك نسيتني تماماً. نعم، نعم، لقد اختفيت بالفعل، ربما لمدة ستة أشهر أو سنة، ولا أعرف على الإطلاق كيف أجبر نفسي على نشر مقال كل يوم (على الرغم من أن هذا ممكن تمامًا). حسنًا، حسنًا، هذا ليس ما نتحدث عنه الآن. يتم توفير شريط التمرير بواسطة Tympanus Codrops ويعمل على HTML5 وCSS3 وTweenMax.js.

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

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

ربط المعرض أمر سهل

تحتاج أولاً إلى تنزيل الكود المصدري من موقع الويب الخاص بي باستخدام رابط مباشر. من الأرشيف، تحتاج إلى تحميل مجلدات img وcss وjs إلى جذر الموقع

ثم نقوم بربط البرامج النصية والأنماط. يتم تضمين الأنماط عن طريق إضافة الكود التالي إلى العلامة

والبرامج النصية أسفل الصفحة إلى علامة الإغلاق

أولاً، سنقوم بإضافة التنقل إلى أعلى الموقع.

سهم قطرة سهم طويل نافارو

ثم شريط التمرير نفسه

ذكريات وأفكار 1 الأتمتة التجوال العشوائي 2 الآلات الكلمات التعسفية 3 التعايش الدليل الوحيد هو قلبك الانجراف المسكون 4 متعة بيلاميو تباعد 5 المراعي الآمال والأحلام 6 التركيز 1 الأتمتة يجب أن تكون الشجرة صديقتك إذا كنت سترسمه فقط دع هذا يحدث، نحن فقط نترك هذا يتدفق من عقولنا، فقط استرخي واتركه يتدفق. إنها صورة باردة جدًا، ربما يتعين علي الذهاب لإحضار معطفي. إنه على وشك تجميدي حتى الموت. سيكون هذا منظرًا بحريًا صغيرًا سعيدًا. فلنصعد هنا، ونبدأ في الاستمتاع ببعض المرح على الأقل يمكن أن تفعل الكثير. العمل على شيء واحد في وقت واحد. لا تنجرف - لدينا متسع من الوقت. ضع مشاعرك فيه، وقلبك، إنه عالمك. هذه الأشجار ممتعة للغاية. أبدأ بهم وأجد صعوبة في التوقف. 2 آلات ربما يكون هذا هو أعظم شيء حدث في حياتي. نحن لا نحاول أن نعلمك شيئًا لتقليده. نحن هنا فقط لتعليمك أسلوبًا ما، ثم نسمح لك بالانطلاق في العالم. الآن، سنقوم بإزالة هذه السحابة. ليس لدينا أي شيء سوى الأشجار السعيدة هنا. دعونا نفعل ذلك مرة أخرى، استخدم ما تراه، لا تخطط لذلك. هيا بنا نصعد إلى هنا، ونبدأ في الاستمتاع ببعض المرح، فالقليل القليل يمكن أن يفعل الكثير. اعمل على شيء واحد في كل مرة. لا تنجرف - لدينا متسع من الوقت. ضع مشاعرك فيه، قلبك، إنه عالمك. هذه الأشجار ممتعة جدًا. لقد بدأت عليها وأجد صعوبة في التوقف. 3 التعايش الدليل الوحيد هو قلبك، دعنا نصعد هنا ، وابدأ في الاستمتاع ببعض المرح، فالقليل القليل يمكن أن يفعل الكثير. العمل على شيء واحد في وقت واحد. لا تنجرف - لدينا متسع من الوقت. ضع مشاعرك فيه، وقلبك، إنه عالمك. هذه الأشجار ممتعة للغاية. أبدأ بهم وأجد صعوبة في التوقف. لكننا لم نصل إلى هذه المرحلة بعد، لذا لا داعي للقلق بشأن ذلك. الآن دعونا نضع بعض السحب الصغيرة السعيدة هنا. يا إلهي. سوف يلتصق الطلاء الرقيق بالطلاء السميك. سأقوم بخلط القليل من الألوان. 4 بيلاميو الشرط الوحيد هو أن يجعلك سعيدًا. نأخذ زاوية الفرشاة ونتركها تلعب ذهابًا وإيابًا. هذا غير مخطط له، إنه يحدث بالفعل. أنا شخص لطيف نوعًا ما، ولا أستطيع تصوير بامبي إلا بالكاميرا. أعتقد أنني غريب بعض الشيء. أحب التحدث إلى الأشجار والحيوانات. لا بأس، فأنا أستمتع أكثر من معظم الناس اليوم. ألا تعلم أن لديك هذا القدر من القوة؟ يمكنك تحريك الجبال. يمكنك فعل أي شيء. فلنصعد إلى هنا، ونبدأ في الاستمتاع ببعض الأشياء. القليل منها يمكن أن يفعل الكثير. العمل على شيء واحد في وقت واحد. لا تنجرف - لدينا متسع من الوقت. ضع مشاعرك فيه، وقلبك، إنه عالمك. هذه الأشجار ممتعة للغاية. أبدأ بهم وأجد صعوبة في التوقف. 5 المراعي هيا بنا نصعد إلى هنا ونبدأ في الاستمتاع ببعض المرح في كثير من الأحيان نتجنب المياه الجارية، والمياه الجارية ممتعة للغاية. سيرى الجميع الأشياء بشكل مختلف - وهذه هي الطريقة التي ينبغي أن تكون عليها الأمور. الشجرة القوية الكبيرة تحتاج إلى جذور قوية كبيرة. يريد ستيف التفكير، لذلك دعونا نعطيه أفكارًا. ليس علينا أن نكون ملتزمين. نحن نلعب هنا فقط. صنع كل تلك الزغبات الصغيرة التي تعيش في السحاب. هيا بنا نصعد إلى هنا، ونبدأ في الاستمتاع ببعض المرح، فالقليل القليل يمكن أن يفعل الكثير. اعمل على شيء واحد في كل مرة. لا تنجرف - لدينا متسع من الوقت. ضع مشاعرك فيه، قلبك، إنه عالمك. هذه الأشجار ممتعة للغاية. لقد بدأت عليها وأجد صعوبة في التوقف. 6 ركز هذا أمر غير مخطط له، إنه يحدث بالفعل لكننا لسنا هناك ومع ذلك، لا داعي للقلق بشأن ذلك. الآن دعونا نضع بعض السحب الصغيرة السعيدة هنا. ما هذا الشيطان. سوف يلتصق الطلاء الرقيق بالطلاء السميك. سأقوم بخلط القليل من الألوان. سنستخدم بني فان دايك، والأحمر الدائم، والقليل من اللون الأزرق البروسي. فلنصعد هنا، ونبدأ في الاستمتاع ببعض المرح، على الأقل القليل يمكنه فعل ذلك كثيراً. العمل على شيء واحد في وقت واحد. لا تنجرف - لدينا متسع من الوقت. ضع مشاعرك فيه، وقلبك، إنه عالمك. هذه الأشجار ممتعة للغاية. أبدأ بهم وأجد صعوبة في التوقف.

هذا كل شئ. المنزلق جاهز! حظا سعيدا في العمل

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

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

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

تأثيرات CSS أسرع. وهذا واضح للعيان على الأجهزة المحمولة.
لإنشاء شريط تمرير، لا توجد مهارات برمجية مطلوبة.

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

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

من أجل الراحة، يبلغ العرض 80% من النافذة، والحد الأقصى للعرض هو حجم كل صورة على حدة (1000 بكسل في مثالنا) لأننا لا نريد أن يتم تمديد الصورة:

شريط التمرير (العرض: 80%؛ الحد الأقصى للعرض: 1000 بكسل؛)

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

يعمل الإعداد Font-size: 0 على امتصاص كل الهواء من الشكل، مما يؤدي إلى إزالة أي مسافة بيضاء حول الصور وفيما بينها. الموضع: يسمح لك بتحريك الشكل بسهولة أثناء الرسوم المتحركة.

نحن بحاجة إلى تقسيم الصور بالتساوي داخل شريط الصورة. الصيغة بسيطة للغاية: إذا افترضنا أن عرض الشكل هو 100%، فيجب أن تشغل كل صورة 1/5 من المساحة الأفقية:

هناك حاجة لاستخدام قواعد CSS التالية:

شريط الصور img (العرض: 20%؛ الارتفاع: تلقائي؛)

لنقم الآن بتغيير خاصية تجاوز السعة لـ div:

شريط التمرير (العرض: 80%؛ الحد الأقصى للعرض: 1000 بكسل؛ التجاوز: مخفي)

وأخيرا، نحن بحاجة إلى جعل شريط الصورة يتحرك من اليسار إلى اليمين. إذا كان عرض div الخاص بالحاوية 100%، فسيتم قياس كل حركة لشريط الصورة إلى اليسار كنسبة مئوية من تلك المسافة:

@keyframes منزلق ( 20% ( يسار: 0%; ) 25% ( يسار: -100%; ) 45% ( يسار: -100%; ) 50% ( يسار: -200%; ) 70% ( يسار: -200 %; ) 75% ( اليسار: -300%; ) 95% ( اليسار: -300%; ) 100% ( اليسار: -400%; ) )

سيتم وضع كل صورة على شريط التمرير ضمن div وستتحرك بنسبة 5%.

شكل شريط التمرير (الموضع: نسبي؛ العرض: 500%؛ الرسوم المتحركة: 30 ثانية لا نهائية؛ حجم الخط: 0؛ الحشو: 0؛ الهامش: 0؛ اليسار: 0؛)

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

لذلك، رمز HTML الخاص بنا:

الآن دعونا نهتم بتحريك الشرائح لدينا. لسوء الحظ، سيكون الأمر مختلفًا بالنسبة لعدد مختلف من الشرائح:

/* لشريط تمرير مكون من شريحتين */ @keyframes Slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100% ( العتامة:0;) ) /* لشريط تمرير من ثلاث شرائح */ @keyframes Slider__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% ( العتامة: 0;) 100%(opacity:0;) ) /* لشريط تمرير رباعي الشرائح */ @keyframes Slider__item-autoplay_count_4 ( 0%(opacity:0;) 8% (opacity:1;) 25% (opacity: 0;) :1; ) 33% (التعتيم:0;) 100%(التعتيم:0;) ) /* لشريط تمرير مكون من خمس شرائح */ @keyframes Slider__item-autoplay_count_5 ( 0%(opacity:0;) 7% (التعتيم: 1;) 20%(التعتيم:1;) 27% (التعتيم:0;) 100%(التعتيم:0;) )

حزين، أليس كذلك؟ بالإضافة إلى ذلك، لا تنس أنه بالنسبة لـ Opera وChrome وIE وMozilla، يتعين عليك كتابة كل شيء بنفس الطريقة، ولكن باستخدام البادئة المناسبة. الآن دعنا نكتب الكود لتحريك الشرائح الخاصة بنا (فيما يلي سيتم عرض الكود الخاص بثلاث شرائح. يمكنك رؤية الكود لمزيد من المواقع في كود المثال):

Slider_count_3 .item ( -moz-animation: Slider__item-autoplay_count_3 15s infinite; -webkit-animation: Slider__item-autoplay_count_3 15s infinite; -o-animation: Slider__item-autoplay_count_3 15s infinite; الرسوم المتحركة: Slider__item-autoplay_count_3 15s infinite; .ite) m: nth -of-type(2) ( -moz-animation-delay: 5s; -webkit-animation-delay:5s; -o-animation-delay:5s; الرسوم المتحركة-delay:5s; ) .item:nth-of- النوع (3) ( -moz-animation-delay: 10s؛ -webkit-animation-delay: 10s؛ -o-animation-delay: 10s؛ تأخير الرسوم المتحركة: 10s؛)

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

شريط التمرير: تحويم .item (-moz-animation-play-state: متوقف مؤقتًا؛ -webkit-animation-play-state: متوقف مؤقتًا؛ -o-animation-play-state: متوقف مؤقتًا؛ حالة تشغيل الرسوم المتحركة: متوقف مؤقتًا؛)

وأخيرا، وصلنا إلى تبديل الشرائح لدينا. وكما هو معروف، هناك خط كاملالأحداث التي تسمح لك بتغيير خصائص العنصر باستخدام CSS. للنقر بالماوس، يمكن أن تساعدنا الفئات الزائفة :focus، أو:target، أو :checked على أحد عناصر الصفحة. يمكن أن تحتوي الفئة الزائفة :focus على عنصر واحد فقط في كل صفحة، :target يسد سجل المتصفح ويتطلب وجود علامة؛ الطبقة الزائفة: محددة تتذكر الحالة قبل مغادرة الصفحة، وفي حالة أزرار الاختيار، لا يمكن تحديدها إلا على عنصر واحد في المجموعة. دعونا نستفيد من هذا. أدخل كود HTML التالي من قبل

وثم :

1 2 3

/* نمط أشرطة التمرير في الحالة "غير المحددة" */ .slider .item ~ .item ( العتامة: 0.0; ) /* نمط أشرطة التمرير في الحالة "المحددة" */ .slider input:nth-of-type( 1): محدد ~ .item: nth-of-type(1)، .إدخال شريط التمرير: nth-type(2): محدد ~ .item:nth-of-type(2)، .إدخال شريط التمرير: nth- من النوع ( 3): محدد ~ .item: nth من النوع (3)، .إدخال شريط التمرير: nth من النوع (4): محدد ~ .item: nth من النوع (4)، .slider الإدخال:الرقم من النوع(5):محدد ~ .العنصر:الرقم من النوع(5) (التعتيم: 1.0;)

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

Slider .item ( -moz-transition: العتامة 0.2 ثانية خطية؛ -webkit-transition: العتامة 0.2 ثانية خطية؛ -o-انتقال: العتامة 0.2 ثانية خطية؛ الانتقال: العتامة 0.2 ثانية خطية؛)

يمكن إيقاف الرسوم المتحركة لجميع الشرائح والأزرار عند تحديد أي شريحة باستخدام كود CSS التالي:

إدخال شريط التمرير: محدد ~ .item ( العتامة: 0.0؛ -moz-animation: لا شيء؛ -webkit-animation: لا شيء؛ -o-animation: لا شيء؛ الرسوم المتحركة: لا شيء؛ )

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

Slider .item ( العتامة: 1.0؛ - انتقال moz: العتامة 0.0 ثانية خطية 0.2 ثانية؛ - انتقال webkit: العتامة 0.0 ثانية خطية 0.2 ثانية؛ - انتقال o: العتامة 0.0 ثانية خطية 0.2 ثانية؛ الانتقال: العتامة 0.0 ثانية خطية 0.2s; ) .إدخال شريط التمرير: nth-of-type(1): محدد ~ .item:nth-type(1)، .إدخال شريط التمرير: nth-of-type(2): محدد ~ .item:nth -من النوع (2)، إدخال شريط التمرير: العدد من النوع (3): محدد ~ .العنصر: العدد من النوع (3)، إدخال شريط التمرير: العدد من النوع (4): محدد ~ .item:nth-type(4)، .إدخال شريط التمرير:nth-type(5):محدد ~ .item:nth-type(5) (الانتقال: العتامة 0.2 ثانية خطية؛ -moz-transition : العتامة 0.2 ثانية خطية؛ - انتقال webkit: العتامة 0.2 ثانية خطية؛ -o- الانتقال: العتامة 0.2 ثانية خطية؛

للتأكد من أن الشرائح لا تتعارض مع عناصر الموقع الأخرى (على سبيل المثال، لا تتداخل مع قائمة منسدلة بمؤشر z أقل من أو يساوي 6)، نقوم بإنشاء سياق خاص بنا للكتلة عن طريق تعيين الحد الأدنى مؤشر z مطلوب للرؤية:

شريط التمرير (الموضع: نسبي؛ الفهرس z: 0؛)

هذا كل شيء، في الواقع. كل ما تبقى هو وضع عناصرنا باستخدام كود CSS التالي وستكون سعيدًا:

شريط التمرير (الموضع: نسبي؛ مؤشر z:0؛) .إدخال شريط التمرير (العرض: لا شيء؛) .تسمية شريط التمرير (أسفل: 10 بكسل؛ العرض: كتلة مضمّنة؛ مؤشر z: 2؛ العرض: 26 بكسل؛ الارتفاع: 27 بكسل؛ الخلفية: #f4f4f5؛ الحدود: 1 بكسل صلب #e6e6e6؛ لون الحد السفلي: #bfbfbf؛ نصف القطر الداخلي: 4 بكسل؛ ، اللون: #333؛ .slider .selector_list ( الموضع: مطلق؛ الأسفل: 15 بكسل؛ اليمين: 15 بكسل؛ فهرس z: 11؛ ) .slider .item ( الموضع: نسبي؛ العرض: 100%؛ .slider .item ~ . العنصر (الموضع: مطلق؛ الأعلى: 0px؛ اليسار: 0px;)

هذا هو نوع شريط التمرير التكيفي الذي لا يحتوي على Javascript ويستخدم CSS3 والذي يجب أن ينتهي بك الأمر إليه.