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

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

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

تشتيت الانتباه - مكون jQuery الإضافي لإنشاء شريط تمرير محتوى بملء الشاشة حساس للمس

شريط تمرير دائري لمحتوى jQuery سريع الاستجابة بملء الشاشة مع الدعم شاشات تعمل باللمس. يتم توزيع البرنامج المساعد تحت رخصة جنو العامة الإصدار 3:

Neoslide: مكون إضافي بسيط وقابل للتوسيع لـ jQuery carousel

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

Hslider: البرنامج المساعد لمعرض الصور سريع الاستجابة بالعرض الكامل

مكون إضافي آخر لعرض الصور باستخدام مكتبة jQuery سريعة الاستجابة مع عناصر تحكم ومدة تأخير مخصصة:

Carousel 3D: البرنامج المساعد jQuery carousel مع تأثيرات دوران ثلاثية الأبعاد

شريط تمرير أنيق: عرض jQuery Carousel سريع الاستجابة بملء الشاشة

مكتبة jQuery المصغرة والجذابة لعرض المحتوى والصور بأنواع مختلفة من التنقل ( أسهم SVG تحتوي على صور مصغرة أو عناصر ترقيم الصفحات أو علامات التبويب):

PaW Carousel: دائري مستجيب مدعوم من jQuery

يعد PaW Carousel (v2) مكونًا إضافيًا مصغرًا لإنشاء دوارات jQuery سريعة الاستجابة وبسيطة مع صور مصغرة:

Carousel Sharer: مكتبة jQuery لإعادة النشر على الشبكات الاجتماعية

Carousel Sharer هو مكون إضافي لـ jQuery يسمح لك بعرض منتجات متعددة على التوالي، ويسمح للزائرين بمشاركة منتجاتك على Facebook وTwitter وGoogle+ وPinterest:

ببساطة كاروسيل: دائري صور سريع الاستجابة

يعد Simply Carousel مكونًا إضافيًا صغيرًا وسريعًا لـ jQuery يسمح لك بإنشاء أشرطة تمرير ودوائر صور مرنة وسريعة الاستجابة:

الشرائح: عرض شرائح وعرض شرائح jQuery سريع الاستجابة مع دعم اللمس

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

دائري محتوى jQuery

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

Slick: مكتبة jQuery سريعة الاستجابة ومرنة

Slick عبارة عن مكون إضافي "جديد" لإنشاء دوارات وشرائح تمرير jQuery مخصصة وسريعة الاستجابة ومُحسّنة للجوال والتي يمكنها العمل مع أي عناصر HTML:

bxSlider: منزلق محتوى jQuery HTML

يعد bxSlider أحد أفضل أشرطة تمرير محتوى jQuery المتوفرة اليوم. يعد هذا البرنامج المساعد مثاليًا لتنظيم عروض الشرائح:

CarouFredSel: مرن و البرنامج المساعد القويدوارات مسج

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

دائري محتوى ركوب الدراجات مع مسج

دائري حيث ستكشف كل نقرة عن كتلة جديدة من المحتوى. سيؤدي النقر فوق العلامة المتقاطعة إلى إغلاق الكتلة النشطة وإعادتنا إلى موضع البداية لعرض الصور المصغرة:

Cloud Carousel: دائري ثلاثي الأبعاد في Javascript

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

Elastislide: دائري سريع الاستجابة مع jQuery

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

جي كاروسيل لايت

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

دائري ثلاثي الأبعاد

قم بإنشاء دائري jQuery ثلاثي الأبعاد من الصور ذات تأثيرات الظل والرسوم المتحركة التي تتفاعل مع موضع المؤشر:

البرنامج المساعد دائري JQuery

تتيح لك إعدادات هذا المكون الإضافي تحديد عدد العناصر التي سيتم عرضها في الرف الدائري، وبعد ذلك يقوم المكون الإضافي بتكييفها مع العرض المطلوب:

تدوير شريط تمرير الصورة باستخدام jQuery

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

ميزة jQuery كاروسيل

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

مسج لانهائي كاروسيل

إنه مكون إضافي لـ jQuery يسمح لك بعرض عدد غير محدود من الصور ومقاطع الفيديو في الرف الدائري. على عكس الرف الدائري الآخر، يعرض Infinite Carousel العناصر في حلقة لا نهاية لها دون الحاجة إلى استخدام التنقل:

البرنامج المساعد jQuery Liquid Carousel

Liquid Carousel هو مكون إضافي مصمم لإنشاء تصميمات مرنة. في كل مرة يتغير فيها حجم الحاوية الدائرية المستجيبة لـ jQuery، يتم ضبط عدد العناصر المعروضة وفقًا للعرض الجديد:

مسج MS كاروسيل

/* هذا هو المكان الذي يبدأ فيه عرضنا الدائري. يتم وضع Block.carousel-wrapper بشكل نسبي، ويتم وضع Wrapper.carousel-item بشكل مطلق. . */ .carousel-wrapper(position:relative; /* تحصل المربعات ذات الموضع المطلق على ارتفاعها وعرضها من الأصل. لقد جعلناها شفافة بشكل افتراضي، وبعد ذلك ستظهر بسلاسة عند النقر على links.arrow-prev و.arrow- next * / .carousel-item( Position:absolute; top:0; Bottom:0; left:0; right:0; padding:25px50px; opacity:0;transition:all0.5sease-in-out; /* لاحظت. الحشو على اليسار وعلى اليمين 50 بكسل؟ بهذه الطريقة يمكننا وضع الروابط الخاصة بنا بعرض 50 بكسل بالإضافة إلى ذلك، أستخدم روابط فارغة. صورة الخلفية بحيث تبدو الروابط مثل الأسهم. تأكد من أنك قمت بتغيير عنوان URL للروابط باستخدام عنوان URL الأصلي بحيث لا تكون الروابط الخاصة بك مجرد مستطيلات شفافة. */ .arrow( الموضع:مطلق; أعلى:0; العرض:كتلة; العرض: 50 بكسل; الارتفاع: 100%; -webkit-tap-highlight-color:rgba(0,0,0,0); الخلفية:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* لنعيد سهمنا إلى اليسار */ &.arrow-prev( left:0; ) /* والثاني هو نفس الصورة اليمنى للسهم، أقوم بتدويرها 180 درجة */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); Transform:rotate(180deg); ) ) /* أعجبني حقًا. أحب الطريقة التي تظهر بها الشرائح الدائرية على خلفية داكنة، وإذا كان block.carousel-item يحتوي على فئة "فاتح"، فسنغير نصه إلى اللون الأبيض ونستخدم الأسهم البيضاء بدلاً من الأسهم الرمادية. تحقق مرة أخرى من صحة المسار إلى صورة السهم */ &.light( color:white; .arrow( الخلفية:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* لنكتب استعلام وسائط لتغيير حجم الأسهم على الأجهزة ذات أحجام الشاشة الأصغر.*/ @media(max-width:480px)( .arrow,&.light.arrow( border-size:10px; الخلفية -position:10px50% ; ) ) /* قم بتعيين أهداف الارتباط المراد عرضها: لا شيء; بهذه الطريقة، نتخلص من انتقال المتصفح باستمرار إلى أعلى القائمة الدائرية في كل مرة ننقر فيها على الأسهم. هذه الخاصية فعالة لأي عنصر يبدأ معرفه بـ "target-item". */ (display:none;) /* أعلاه، جعلنا جميع الشرائح الدائرية لدينا شفافة، مما يعني أنه عند تحميل الرف الدائري، سنحصل على مربع فارغ كبير بدلاً من ذلك. لنغير قيمة الشفافية للشريحة الأولى إلى 1 للعرض. قمنا أيضًا بتعيين مؤشر z على 2، مما يجعله أعلى من الشرائح الأخرى. */ .item-1( z-index:2; opacity:1; ) /* لكننا لا نريد أن تحتوي الشريحة الأولى دائمًا على قيمة عتامة opacity: 1; وإلا فسيتعين علينا أن نشق طريقنا خلال هذه الشريحة أثناء تدوير الشرائح الأخرى. */ *:target~.item-1( opacity:0; ) /* ..ولكن إذا كان #target-item-1 قيد التركيز ونريد عرض الشريحة الأولى، فحددها باستخدام الرمز ~ وقم بتعيين الشفافية مرة أخرى إلى 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* إذا كان الهدف-item-# الآخر قيد التركيز، فحدده باستخدام المحدد ~، واعرضه بسلاسة لهم، ووضعهم في الأعلى باستخدام فهرس z: 3. هنا يمكنك إضافة امتدادات إضافية مع معرف العنصر الهدف إذا كان لديك أكثر من ثلاثة منها. يمكنه إضافة 10 قطع دفعة واحدة. . */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; العتامة:1; ) )

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

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

timeList- سرعة تبديل الشريحة

عرض الوقت- موعد العرض

راديو لكن- أزرار أسفل الشريحة للتنقل السريع. القيمة الافتراضية هي true، إذا استخدمت false فسوف تختفي الأزرار.

الآن دعونا نبدأ! لنقم بإنشاء ملف وفتحه Index.htm

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

الآن لنقم بإنشاء ملف وفتحه style.cssواكتب الترميز الذي نحتاجه هناك:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); الجسم (اللون: #4f4f5a؛ عائلة الخط: "Roboto"، sans-serif؛ حجم الخط: 16 بكسل؛ الحشو: 0؛ الهامش: 0؛) #slider-wrap( الحد الأقصى للعرض: 800 بكسل؛ الهامش: 0 تلقائي؛ الهامش العلوي: 80 بكسل؛) #active-slide (العرض: 100%؛ العرض: الجدول؛ الموضع: نسبي؛ الفائض: مخفي؛ -webkit-user-select: لا شيء؛ -moz-user-select: لا شيء؛ -ms- تحديد المستخدم: لا شيء؛ -o-user-select: لا شيء؛ تحديد المستخدم: لا شيء) #slider( الموضع: نسبي؛ العرض: calc(100% * 4); الأعلى: 0; اليسار: 0; الهامش: 0 الحشو: 0؛ -انتقال webkit: 1 ثانية؛ -وظيفة توقيت انتقال webkit: وظيفة توقيت الانتقال: سهولة الدخول) .slide( width: calc(100%/); 4)؛ نمط القائمة: لا شيء؛ العرض: مضمن؛ تعويم: يسار) .slide img ( العرض: 100%؛ ) .Radio-But( Margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( الهامش: 2 بكسل؛ العرض: كتلة مضمّنة؛ العرض: 16 بكسل؛ الارتفاع: 16 بكسل؛ التجاوز: مخفي؛ المسافة البادئة للنص: -9999 بكسل؛ الخلفية: url (radioBg.png) أسفل المركز بدون تكرار؛ ) .Radio-But .ctrl-select:hover ( المؤشر: المؤشر؛ موقف الخلفية: مركز المركز؛ ) .Radio-But .ctrl-select.active ( موقف الخلفية: أعلى المركز؛ ) #prewbutton، #nextbutton ( العرض :block height:100%; الزر التالي ( اليمين: 10 بكسل؛ الخلفية: url (arrowBg.png) المركز الأيمن بدون تكرار؛ ) #prewbutton:hover, # nextbutton:hover ( opacity:1; )

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

في خاصية الاسلوب #شريط التمرير (العرض: calc(100% * 4);)و .شريحة ( العرض: كالك (100%/4)؛ )قم بالإشارة إلى عدد الصور في شريط التمرير الخاص بك. في مثالنا هناك 4 منهم.

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

الآن دعونا ننشئ ملفنا ونفتحه Slider.js، والذي سيحتوي على رمز شريط التمرير. لا تنس تضمين مكتبة jQuery.

$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var SlideNum = 1; var SlideTime; SlideCount = $("#slider .slide").length; var animSlide = function(arrow)( ClearTimeout(slideTime); if(arrow == "next")( if(slideNum == SlideCount) (slideNum=1;) else(slideNum++) TranslaWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); else if(arrow == " prew ") ( if(slideNum == 1) ( SlideNum=slideCount; ) else(slideNum-=1) ترجمةWidth = -$("#active-slide").width() * (slideNum - 1); $(" # Slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); )else( SlideNum = السهم; TranslateWidth = -$("#active-slide").width() * (slideNum -1); $("#slider").css("transform": "translate(" + TranslateWidth + "px, 0)")); $(".ctrl-select.active" ). RemoveClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active" ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function())( animSlide("next"); return false; )) $("#prewbutton").click( function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + الفهرس + ""; }); $("

").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1 )); var buffer = false; animSlide) ("التالي"))، TimeView)؛) ) $("#slider-wrap").hover(function())(clearTimeout(slideTime); Pause = true;), function())(pause = false ; ( function() ( click = false; )); $(document).mouseup(function())( click = false; )); $(".slide").mousemove(function(e)( if(clicking = = صحيح ) (إذا (e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); ClearTimeout(slideTime); ) النقر = false;

) )); $(".slide").hover().css("cursor", "pointer");محور دوار()؛ ));

وظيفة

1. مكتبة jQuery "clickCarousel"

منع مع التمرير إعلانات الأخبار. استخدم الأسهم لليسار/لليمين للتمرير عبر الكتل. يحتوي الأرشيف على دائري في نمطين: فاتح وداكن.

1. مكتبة jQuery، البرنامج المساعد "carouFredSel"

دائرة صور أنيقة وجديدة في jQuery.

4. البرنامج المساعد jQuery: دائري "Elastislide"

5. البرنامج المساعد TinyCarousel

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

البرنامج المساعد "Slider Kit"، عبارة عن دائري خفيف الوزن مزود بـ بطرق مختلفةانتقل.

7. دائري جافا سكريبت

8. البرنامج المساعد jQuery "تأثيرات التنقل على الشبكة"

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

9. دائري سهل

10. دائري مصنوع من كتل "Easy Paginate".

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

11. الدوار العمودي

الدوار العمودي في jQuery: التمرير التلقائي للمحتوى على الصفحة. يتم توفير أزرار التنقل، بالإضافة إلى إمكانية إيقاف الدوران وبدءه مرة أخرى. عند تحريك مؤشر الماوس، تتوقف الحركة. على مستوى ترميز HTML، يتم تمثيل كتل التمرير بعناصر قائمة li العادية.

12. منطقة التمرير جافا سكريبت CSS

حل جافا سكريبت "TinyScroller" لإنشاء منطقة تمرير موضوعة في حاوية DIV.

13. البرنامج المساعد jQuery "Smooth Div Scroll"

البرنامج المساعد لتنفيذ التمرير الأفقي للمحتوى في منطقة معينة. عند تحريك مؤشر الماوس فوق الحافة اليسرى أو اليمنى للمنطقة، يبدأ التمرير.

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

15. دوار المحتوى "دائري المحتوى الدائري"

17. سكرولر

كتلة تحتوي على شريط التمرير الذي يظهر عند تحريك المؤشر. يمكنك تمرير المحتوى باستخدام شريط التمرير أو عجلة الماوس.

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

19. سلايدر رائع

يتم إنشاء شريط التمرير تلقائيًا. يتم أخذ البيانات التي تحتوي على اسم المنتج والوصف والرابط وعنوان الصورة من ملف Slider.db.txt. التقنيات المستخدمة: CSS، PHP، jQuery.

20. تدوير الكتل باستخدام مسج

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

على سبيل المثال، يمكن استخدام مكون إضافي لتمرير المحتوى لعرض آخر الأخبار أو لعرض منشورات Twitter على موقع ويب.

22. الكتلة الديناميكية "مراجعات العملاء"

التدوير التلقائي لمحتويات الكتلة. التقنيات المستخدمة: PHP، XML، CSS، jQuery.

يقوم هذا البرنامج المساعد بتحويل عناصر القائمة (ul li) إلى عناصر مكتبة jQuery.

26. دائرة جافا سكريبت "ImageFlow"

من السهل التمرير خلال الصور باستخدام عجلة الماوس.

27. محتوى التمرير

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

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

33. تمرير المحتوى، البرنامج المساعد Mootools "شريط التمرير"

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

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

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

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

Slick – البرنامج المساعد الحديث لشريط التمرير الدائري

Slick هو مكون إضافي لـ jquery متاح مجانًا ويدعي مطوروه أن حلهم سوف يلبي جميع متطلبات شريط التمرير الخاص بك. شريط التمرير التكيفي - يمكن أن يعمل الرف الدائري في وضع "البلاط" للأجهزة المحمولة، وفي وضع "السحب والإسقاط" لإصدار سطح المكتب.

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

الوضع التجريبي | تحميل

Owl Carousel 2.0 – jQuery – مكون إضافي للاستخدام على الأجهزة التي تعمل باللمس

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

يحتوي شريط التمرير على بعض المكونات الإضافية المضمنة لتحسين الوظائف العامة. الرسوم المتحركة، وتشغيل الفيديو، والتشغيل التلقائي لشريط التمرير، والتحميل البطيء، وتعديل الارتفاع تلقائيًا - هذه هي الميزات الرئيسية لـ Owl Carousel 2.0.

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

أمثلة | تحميل

jQuery البرنامج المساعد المسار الفضي

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

أمثلة | تحميل

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

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

أمثلة | تحميل

البومة كاروسيل – منزلق مسج – دائري

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

أمثلة | تحميل

معرض ثلاثي الأبعاد - دائري

يستخدم التحولات ثلاثية الأبعاد بناءً على أنماط CSS وقليلًا من كود Javascript.

أمثلة | تحميل

دائري ثلاثي الأبعاد باستخدام TweenMax.js وjQuery

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

أمثلة | تحميل

دائري باستخدام bootstrap

شريط تمرير سريع الاستجابة - دائري يستخدم تقنية bootstrap لموقع الويب الجديد الخاص بك فقط.

أمثلة | تحميل

شريط التمرير الدائري المتحرك يعتمد على إطار عمل Bootstrap

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

أمثلة | تحميل

سيركلسليدر الصغيرة

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

في الوضع الدائري، يبدو شريط التمرير مثيرًا للاهتمام. دعم ممتاز لطريقة السحب والإفلات ونظام تمرير الشرائح التلقائي.

أمثلة | تحميل

شريط تمرير محتوى Thumbelina

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

أمثلة | تحميل

نجاح باهر – المنزلق – دائري

يحتوي على أكثر من 50 مؤثرًا، والتي يمكن أن تساعدك في إنشاء شريط تمرير أصلي لموقعك على الويب.

أمثلة | تحميل

شريط تمرير محتوى jQuery سريع الاستجابة bxSlider

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

أمثلة | تحميل

jCarousel

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

أمثلة | تحميل

Scrollbox - البرنامج المساعد مسج

يعد Scrollbox مكونًا إضافيًا مضغوطًا لإنشاء شريط تمرير - دائري أو زحف نصي. تتضمن الميزات الرئيسية تأثيرات التمرير الرأسي والأفقي مع الإيقاف المؤقت عند تمرير الماوس.

أمثلة | تحميل

com.dbpasCarousel

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

أمثلة | تحميل

Flexisel: البرنامج المساعد لـ JQuery Slider المستجيب - Carousel

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

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

أمثلة | تحميل

Elastislide – شريط التمرير التكيفي – دائري

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

مثال | تحميل

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

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

مثال | تحميل

دائري مذهل

Amazing Carousel – شريط تمرير الصور سريع الاستجابة باستخدام jQuery. يدعم العديد من أنظمة إدارة المحتوى مثل WordPress، Drupal، Joomla. كما يدعم أيضًا أنظمة تشغيل Android وIOS وسطح المكتب دون أي مشاكل في التوافق. تتيح لك القوالب الدائرية الرائعة المدمجة استخدام شريط التمرير في الأوضاع الرأسية والأفقية والدائرية.

أمثلة | تحميل