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

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

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

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

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

انتباه! في هذا المثال، يتم استخدام النص لتشغيل الشريحة؛ وإذا كنت تريد استخدام صورة، فقم بوضع كل صورة من صورك في علامة

.

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

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

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

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html، body (الارتفاع: 100%؛) body (اللون: #4f4f5a؛ عائلة الخط: "Roboto"، sans-serif؛ حجم الخط: 16px؛ الحشو: 0؛ الهامش: 0؛) #slider-wrap (الحد الأقصى - العرض: 650 بكسل؛ الهامش: 100 بكسل تلقائي؛ ) #slider ( الموضع: نسبي؛ الارتفاع: 200 بكسل؛ الفائض: مخفي؛ الحدود: #fafafa Solid 10 بكسل؛ ) .slide ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق ؛ الأعلى: 0؛ اليسار: 0؛ محاذاة النص: الوسط؛ المسافة البادئة للنص: 40 بكسل؛ -99999 بكسل؛ ctrl-select:hover (المؤشر: المؤشر؛ موضع الخلفية: مركز المركز؛) .Radio-But .ctrl-select.active( موقف الخلفية: مركز أعلى;) #prewBut, #nextBut( عرض: كتلة; العرض: 40 بكسل؛ الارتفاع: 100%؛ الموضع: مطلق؛ الفائض: مخفي؛ الخلفية: url("arrowBg.png") في المركز الأيسر بدون تكرار؛ العتامة: 0.5؛ مؤشر z: 3؛ الخطوط العريضة: لا شيء! مهم؛ ) #prewBut ( يسار: 10px; ) #nextBut ( يمين: 10px; خلفية: url("arrowBg.png") يمين الوسط بدون تكرار;) #prewBut:hover, #nextBut:hover ( opacity: 1; )

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

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

$(document).ready(function () ( var timeList = 300; var TimeView = 5000; var RadioBut = true; $(".slide").hide().eq(0).show(); var SlideNum = 0; var SlideTime; SlideFloatNum).fadeOut(timeList); ) وظيفة SlideDirectionShow(slideFloatNum, directTo, Pause)( $(".slide").eq(slideFloatNum).fadeIn(timeList, function() ( if(pause == true) ( ​​​​rotator( ) )); var old_slideNum = SlideNum; SlideNum++) SlideDirectionShow(slideNum, "right, true ) else if(arrow == "prew") ( SlideDirectionHide(slideNum, "right"); if(slideNum == 0)(slideNum=slideCount-1;) else (slideNum -=1) SlideDirectionShow(slideNum, "left", true )else( if(arrow !== old_slideNum) ( if(arrow > old_slideNum) ( SlideDirectionHide(slideNum, "left"); SlideNum = سهم; SlideDirectionShow(slideNum, "right", true); )إلا إذا(السهم< old_slideNum) { slideDirectionHide(slideNum, "right"); slideNum = arrow; slideDirectionShow(slideNum, "left", true); } } } $(".ctrl-select.active").removeClass("active"); $(".ctrl-select").eq(slideNum).addClass("active"); } if(RadioBut){ var linkArrow = $("<>").prependTo("#slider"); $("#nextBut").click(function())( animSlide("next"); return false; )) $("#prewBut").click(function( ) ( animSlide("prew"); return false; )) ) var addSpan =""; $(".slide").each(function(index) ( addSpan += "; " + الفهرس + ""; }); $("

").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum )); var buffer = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")) , TimeView);) ) $("#slider-wrap").hover(function())(clearTimeout(slideTime); Pause = true;), function())(pause = false; rotator(); ) ); var click = false; var prevX; $(".slide").mousedown(function(e)( Click = true; prevX = e.clientX; )); $(".slide").mouseup(function() ) ( Click = false )); $(document).mouseup(function())( Click = false; )); $(".slide").mousemove(function(e)( if(clicking == true) ( ​​if (e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); ClearTimeout(slideTime); ) النقر = false; ) )); $(".slide").hover().css("cursor", "pointer"); محور دوار()؛ ));

وظيفة animSlideيقبل ثلاثة أنواع من القيم: التالي, prew، وقيمة رقمية. معامل التاليالتبديل إلى الشريحة التالية، prewالسابقة، والقيمة الرقمية هي الشريحة المحددة خصيصًا من خلال أزرار الاختيار الموجودة أسفل الشريحة. المهام SlideDirectionHideو SlideDirectionShowمتشابهة ومتطابقة تقريباً، الأول مسؤول عن اختفاء الشريحة واتجاه حركة الشريحة الصادرة، والثاني عن مظهر الشريحة واتجاه حركتها عند ظهورها، وكذلك عن زمن العرض المحدد فاصلة.

عند تحريك مؤشر الفأرة فوق شريط التمرير، تتوقف الشاشة مؤقتًا.

هذا كل شيء، إذا كان هناك أي شيء غير واضح أو لديك أي أسئلة، فاكتب واطرح.

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

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

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

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

هل أنت جائع؟ قم بإلقاء نظرة على هذا الموقع واختر أي برجر لتتناوله كوجبة خفيفة.

الحديث

موقع جذاب للغاية يحتوي على الكثير من أشرطة التمرير المصممة بشكل إبداعي.

جلالة أندريه

أربعة مواقع جميلة وجذابة تتغير تلقائيا.

تصميم ماركس

بالنظر إلى شريط التمرير هذا، يبدو أنك أمام جهاز كمبيوتر محمول

بوردام

موقع رائع مع الحد الأدنى من التصميم ومنزلق رائع جدًا.

تطبيق جولة الشاي

مورد إبداعي يحتوي على شريط تمرير مثير للاهتمام في هاتفك

هذه هي الأشياء

موقع رائع، مع شريط تمرير ضخم ومبتكر.

استوديو XL

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

موضوع

موقع رائع يحتوي على شريط تمرير كبير مع تأثير تمرير مثير للاهتمام.

تصميم جوش سميث

هذا موقع ويب، أو بالأحرى شريط تمرير. بشكل عام، الموقع بأكمله عبارة عن شريط تمرير :)

سفر يوتا

شريط تمرير رائع يشبه كومة من الصور.

زيارة فيلي

شريط تمرير صور رائع وكبير وملفت للنظر للغاية.

TravelBuzz

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

نحن إشارات

موقع مظلم باستخدام شريط تمرير بسيط ولكنه إبداعي للغاية

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

رموز المصدر المنزلق والعرض التوضيحي

يوجد مشروع منزلق يسمى ChiefSlider على GitHub. يمكنك الذهاب إليه باستخدام هذا الرابط.

شريط تمرير يحتوي على شريحة نشطة واحدة (بدون حلقات):

شريط تمرير يحتوي على ثلاث شرائح نشطة (بدون حلقات):

مثال يوضح كيف يمكنك استخدام شريط التمرير لتدوير المقالات:

مميزات برنامج ChiefSlider

دعونا ندرج المزايا الرئيسية لهذا شريط التمرير:

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

تثبيت ChiefSlider

يستغرق تثبيت شريط التمرير 3 خطوات:

• إضافة ChiefSlider CSS إلى الصفحة أو إلى ملف CSS متصل بالصفحة؛
• وضع كود HTML الخاص بشريط التمرير في المكان المطلوب بالصفحة؛
• أدخل كود JavaScript في الصفحة أو في ملف js متصل بالصفحة.

يُنصح بتقليل كود CSS وJavaScript إلى الحد الأدنى؛ سيضمن هذا الإجراء تحميلًا أسرع للصفحة.

كيفية تطوير شريط تمرير بسيط لموقع ويب (بدون تكرار)

إنشاء شريط التمرير com. ChiefSliderسيتألف من إنشاء كود HTML وCSS وJavaScript (بدون jQuery).

كود HTML المنزلق com. ChiefSlider:

كما ترون، يحتوي شريط التمرير على بنية HTML بسيطة جدًا. يبدأ بالكتلة الرئيسية التي تحتوي على فئة شريط التمرير. تتكون هذه الكتلة من 3 عناصر.

العنصر الأول هو .slider__wrapper . إنه بمثابة غلاف لعناصر .slider__item (الشرائح).

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

كود ChiefSlider CSS:

/* الأنماط الرئيسية */ .slider ( الموضع: نسبي؛ الفائض: مخفي؛ ) .slider__wrapper ( العرض: flex؛ الانتقال: تحويل 0.6 ثانية بسهولة؛ /* 0.6 مدة تغيير الشريحة بالثواني */ ) .slider__item ( flex: 0 0 50% /* يحدد عدد الشرائح النشطة (في هذه الحالة 2 */ max-width: 50%; /* يحدد عدد الشرائح النشطة (في هذه الحالة 2 */ ) /* أنماط الأزرار الخلفية والأمامية *; / .slider__control ( الموضع: مطلق؛ العرض: لا شيء؛ الأعلى: 50%؛ التحويل: ترجمة Y(-50%))؛ محاذاة العناصر: المركز؛ ضبط المحتوى: المركز؛ محاذاة النص: المركز؛ العرض: 40 بكسل؛ /* عرض الزر */ الارتفاع: 50 بكسل؛ /* ارتفاع الزر */ العتامة: .5؛ /* الشفافية */ الخلفية: #000؛ /* لون الخلفية */ .slider__control_show ( العرض: flex; ) .slider__control:hover, :التركيز ( زخرفة النص: لا شيء؛ المخطط التفصيلي: 0؛ العتامة: .9؛ /* الشفافية */ ) .slider__control_left ( يسار: 0; ) .slider__control_right ( يمين: 0; ) .slider__control::before ( content: " " عرض: كتلة مضمنة؛ العرض: 20 بكسل؛ /* عرض الأيقونة (السهم) */ height: 20px; /* ارتفاع الأيقونة (السهم) */ الخلفية: مركز مركزي شفاف غير متكرر؛ حجم الخلفية: 100% 100%؛ ) .slider__control_left::before ( صورة الخلفية: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( صورة الخلفية: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

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

كود CSS الذي يحدد عدد العناصر النشطة:

/* يحدد عدد الشرائح النشطة (في هذه الحالة 2) */ flex: 0 0 50%; أقصى عرض: 50%؛

يضبط هذا الرمز عدد العناصر النشطة لشريط التمرير على 2.

لكي يكون شريط التمرير، على سبيل المثال، عنصر نشط واحد، يجب تغيير هذه التعريفات إلى ما يلي:

/* يحدد عدد الشرائح النشطة (في هذه الحالة 1) */ flex: 0 0 100%; أقصى عرض: 100%؛

خلق شريط التمرير التكيفييتم تنفيذها من خلال استفسارات وسائل الإعلام.

على سبيل المثال، شريط التمرير، الذي يجب أن يحتوي على شريحة واحدة نشطة على الأجهزة ذات الشاشة الصغيرة، وعلى الأجهزة الكبيرة - أربعة:

Slider__item ( مرن: 0 0 100%; الحد الأقصى للعرض: 100%; ) @media (الحد الأدنى للعرض: 980 بكسل) ( .slider__item ( مرن: 0 0 25%; الحد الأقصى للعرض: 25%; ) )

كود جافا سكريبت لشريط التمرير ChiefSlider:

"استخدام صارم"؛ var multiItemSlider = (function () ( وظيفة الإرجاع (محدد) ( var _mainElement = document.querySelector(selector)، // عنصر الكتلة الرئيسية _sliderWrapper = _mainElement.querySelector(".slider__wrapper")، // غلاف for.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item")، // العناصر (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control")، // عناصر التحكم _sliderControlLeft = _mainElement.querySelector(".slider__control_left")، // " LEFT" Button _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // الزر "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // عرض الغلاف _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / عرض عنصر واحد _positionLeftItem = 0، // موضع العنصر النشط الأيسر _transform = 0، // قيمة التحويل.slider_wrapper _step = _itemWidth / _wrapperWidth * 100، // حجم الخطوة (للتحويل) _items = ; العناصر // ملء مصفوفة _items _sliderItems.forEach(function (item, Index) ( _items.push(( item: item, Position: Index, Transform: 0 )); )); فار الموضع = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = الوظيفة (الاتجاه) ( if (direction === "right") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= الموضع .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >=position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++;<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

يتم تنفيذ الإجراء الرئيسي في كود JavaScript بواسطة وظيفة _transformItem. تقوم هذه الوظيفة، اعتمادًا على الاتجاه الذي تم تمريره إليها، بتحويل العنصر.slider__wrapper.

تهيئة شريط التمريريتم تنفيذها على النحو التالي:

var Slider = multiItemSlider(".slider") عرض توضيحي لشريط التمرير

كيفية إنشاء شريط تمرير حلقات؟

يمكن إجراء حلقات الشرائح عن طريق تحويل عناصر .slider__item.

للقيام بذلك، تحتاج إلى ربط قيم موضعها الحالي والتحول لكل element.slider__item.

يمكن تنفيذ هذه الإجراءات على النحو الأمثل باستخدام المصفوفة _items:

Var_items = ; // ملء المصفوفة بالعناصر.slider__item _sliderItems.forEach(function (item, Index) ( _items.push(( item: item, Position: Index, Transform: 0 )); ));

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

الخطوة التالية هي إنشاء وظائف لحساب .slider__item بموضع الحد الأدنى والحد الأقصى.

موضع var = ( getItemMin: function () ( var IndexItem = 0; _items.forEach(function (item, Index) ( if (item.position< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) ( IndexItem = Index; ) )); عنصر فهرس الإرجاع؛ ) ، getMin: الوظيفة () ( return _items.position; ) ، getMax: الوظيفة () ( return _items.position; ) )

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

var _transformItem = وظيفة (اتجاه) ( var nextItem; if (direction === "right") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >position.getMax()) ( nextItem =position.getItemMin() _items.position =position.getMax() + 1; _items.transform += _items.length * _step ) if (direction === "left") ( _positionLeftItem--;< position.getMin()) {
 nextItem = position.getItemMax();
 _items.position = position.getMin() - 1;
 _items.transform -= _items.length * 100;
 _items.item.style.transform = "translateX(" + _items.transform + "%)";
 }
 _transform += _step;
 }
 _sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}

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

للانتقال إلى الشريحة السابقة، يتم تنفيذ إجراءات مماثلة، ولكن في الاتجاه المعاكس.

بالإضافة إلى ذلك، بالنسبة لشريط التمرير الحلقي، لا تحتاج إلى تبديل رؤية الزرين الأيسر والأيمن.  سيتم دائمًا عرض هذه الأزرار الموجودة في هذا الإصدار من شريط التمرير.
للقيام بذلك تحتاج:
قم بإزالة فئة Slider__control_show من عنصر التحكم "الأيمن"؛
 
في CSS لـ Selector.slider__control قم بتغيير قيمة خاصية العرض إلى flex .
عرض المنزلق 
كيفية إنشاء شريط تمرير مع التكرار وتغيير الشرائح تلقائيًا؟
يمكنك برمجة التغييرات التلقائية للشرائح على فترات زمنية معينة باستخدام الدالة setInterval.
var _cycle = الوظيفة (الاتجاه) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction; ), _config.interval); )
ستقوم الدالة setInterval في هذا المثال بتشغيل الدالة _transformItem على فترات زمنية محددة تساوي قيمة المتغير _config.interval.
بالإضافة إلى ذلك، يُنصح بإضافة نقطة توقف للتغيير التلقائي للشرائح عند تحريك المؤشر إلى شريط التمرير.
يمكنك تنفيذ هذه الوظيفة على النحو التالي:
إذا (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter"، function () ( ClearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( ClearInterval(_interval); _cycle( _config.direction);
كيف يمكن إيقاف التغيير التلقائي للشرائح إذا كان العنصر غير مرئي للمستخدم؟
يُنصح بتعطيل تغيير الشرائح التلقائي في حالتين:
عندما تكون الصفحة (التي يوجد عليها شريط التمرير) غير نشطة؛
 
عندما يكون شريط التمرير خارج منطقة رؤية الصفحة.
يمكن معالجة الحالة الأولى باستخدام حدثVisibilitychange.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
وظيفة معالج حدث Visionchange:
// التعامل مع حدث "تغييرات رؤية المستند" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( ClearInterval(_interval); ) else ( ClearInterval(_interval); _cycle(_config.direction); ))
يمكن حساب رؤية العنصر باستخدام الدالة _isElementVisible :
الدالة _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = function (x, y) ( إرجاع document.elementFromPoint(x, y);< 0 || rect.bottom < 0 || rect.left >العرض ||  rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) ||. element.contains(elemFromPoint(rect.left, rect.bottom)));  )
يمكنك إجراء استدعاء _isElementVisible، على سبيل المثال، في بداية الدالة _transformItem.  سيؤدي هذا الإجراء إلى إلغاء تغيير الشريحة التلقائي إذا كان شريط التمرير خارج إطار العرض حاليًا.
var _transformItem = function (direction) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
شريط التمرير الذي يستجيب لتغيير حجم نافذة المتصفح
يختلف هذا الإصدار من شريط التمرير التكيفي عن الإصدارات السابقة من حيث أنه يسمح بذلك تغيير عدد العناصر النشطة (الشرائح) عند تغيير حجم نافذة المتصفح.  عادةً لا يقوم المستخدمون بتغيير حجم متصفحهم، ولكن لا يزال من الممكن حدوث ذلك.
يتم تنفيذ ذلك باستخدام حدث تغيير الحجم ومصفوفة _states.  يتم استخدام المصفوفة لإجراء العمليات الحسابية.  سيسمح لك استخدامه بتجنب إعادة تهيئة شريط التمرير عندما لا يكون ذلك مطلوبًا.
4 نوفمبر 2019 
 تم تحديث المشاركة
 
يوري نيميتس
 
أشرطة تمرير CSS خالصة + شريط تمرير إضافي
تتمتع أشرطة تمرير CSS ببعض المزايا مقارنة بشرائح تمرير Javascript.  إحدى هذه الفوائد هي سرعة التحميل.  لا يتم استخدام صور أشرطة التمرير بأحجام كبيرة فقط (إذا لم يكن هناك تحسين للشاشات المختلفة)، ولكن يتم أيضًا قضاء بعض الوقت في تحميل البرامج النصية.  لكن في المقالة لن ترى سوى أشرطة التمرير التي تستخدم CSS خالصًا.
إليك ما وجدته على موقع ويب حول أشرطة التمرير:

1. منزلق صورة CSS3
شريط تمرير CSS يستخدم أزرار الاختيار للتنقل بين الشرائح.  توجد أزرار الاختيار هذه أسفل أشرطة التمرير.  أيضًا، بالإضافة إلى أزرار الاختيار، يتم التنقل باستخدام الأسهم الموجودة على اليسار واليمين.  لتتبع الصورة المعروضة حاليًا، يتم استخدام الفئات الزائفة:checked.
2. شريط تمرير الصور CSS3 مع الصور المصغرة
على عكس شريط تمرير CSS السابق، يوجد هنا صور مصغرة لجميع الصور بدلاً من أزرار الاختيار الموجودة في الأسفل، وهو أمر مناسب أيضًا عند إنشاء معرض صور.  تتغير الصور بتأثير غريب: فهي تختفي بسلاسة عند تكبيرها.
3. معرض مع CSS
لكن شريط تمرير CSS هذا مثالي لصفحات المبيعات.  كقاعدة عامة، عند تطوير الصفحات المقصودة (بيع الصفحات)، يضع العديد من مطوري الويب شريط تمرير في البداية، بحيث يرى الزائر على الشاشة الأولى (بدون التمرير) على الفور جميع المزايا المتاحة له في هذه الصفحة.  إلى جانب كل شيء، فإن شريط التمرير هذا قابل للتكيف، وهو أمر لطيف أيضًا.
4. شريط تمرير CSS بدون روابط
أود أن أشير على الفور إلى أن شريط التمرير هذا لا يستخدم الروابط!  افتراضيًا، بالإضافة إلى الصورة الرئيسية (الشريحة)، تظهر شريحتان أخريان.  تقع خلف الرئيسي.  يتم تغيير الشرائح في وضع جميل: أولاً، يتم نقل شريحتين بعيدًا عن بعضهما البعض وتصبح الشريحة التي ستصبح بعد ذلك الشريحة الرئيسية في المنتصف.  يتم بعد ذلك تكبير الشريحة ووضعها أمام الشرائح الأخرى.
5. منزلق CSS3 سريع الاستجابة
شريط تمرير تكيفي آخر، يعتمد التحكم فيه على أزرار الاختيار.  لمعرفة كيف سيبدو شريط التمرير هذا على أجهزة مختلفة، يمكنك إما تغيير نافذة المتصفح بنفسك، أو على الصفحة التي تحتوي على شريط التمرير توجد أيقونات خاصة للأجهزة المختلفة، من خلال النقر عليها سترى كيف سيبدو شريط التمرير على جهاز الكمبيوتر أو الجهاز اللوحي أو الهاتف الذكي.
*** مكافأة المنزلق ***
بالإضافة إلى جميع أشرطة التمرير المذكورة أعلاه، أريد إرضائك بواحدة أخرى.  يعتبر شريط التمرير هذا مثاليًا لإنشاء معرض للصور.  لا يمكنك أن تشرح بالكلمات ما يفعله، لذا من الأفضل مشاهدة كل شيء في الفيديو:

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


في التعليقات على المنشور، سألوا مؤخرًا عما إذا كانت هناك أي خدمات عبر الإنترنت لإنشائها.  من حيث المبدأ، إذا كان مشروعك يعمل على أحد أنظمة إدارة المحتوى (CMS) الشائعة (WordPress، Drupal)، فيجب أن تكون هناك مكونات إضافية مناسبة هناك.  ولكن ماذا تفعل عندما يكون الموقع مكتوبًا بلغة HTML أو لا توجد وحدات مناسبة؟  سأخبرك اليوم عن بعض الخيارات لحل هذه المشكلة.
بشكل عام، تختلف طرق إنشاء أشرطة التمرير.  أتذكر عندما كنت أعمل مع TYPO3، كانت هناك وحدة تقوم تلقائيًا بتحويل الصور إلى Flash لعرضها على الموقع.  هناك أيضًا برامج سطح مكتب خاصة تسمح لك بإنشاء محركات أقراص فلاش مماثلة أو إنشاء كود HTML + CSS الضروري.  في الوقت الحاضر، يتم تنفيذ أشرطة التمرير بشكل أساسي باستخدام Javascript والمكتبات المقابلة، على سبيل المثال، jQuery.  علاوة على ذلك، هناك الكثير من النصوص المختلفة.  سوف ننظر في اثنين منهم.
هي خدمة ممتازة لإنشاء شريط التمرير عبر الإنترنت.  لا تحتاج إلى الخوض في أي نصوص برمجية؛ فجميع الإعدادات تقريبًا متاحة للتحرير التفاعلي: الأحجام، والتأثيرات، والتنقل، وما إلى ذلك.  ما عليك سوى تحميل صورك وتحديد الخيارات التي تحتاجها وتنزيل رمز شريط التمرير الجاهز.  كل هذا مجاني.  يحتوي ملف HTML النهائي على رابط لهذه الخدمة، ولكن من الناحية النظرية يمكن إزالته؛ ولا توجد علامات مائية إضافية على الصور.  احترام للمطورين!
كومسيدر

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

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

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

يعد HTML5Maker مثالاً آخر على الخدمة المدفوعة التي تعمل على أساس الاشتراك.  في الإصدار المجاني، سيتعين عليك تحمل علامة مائية، لكن تعريفة Starter تسمح لك بالتخلص منها.  وفي الوقت نفسه، يتميز بسعر معقول نسبيًا (5 دولارات شهريًا) ويسمح لك بإنشاء ما يصل إلى 3 أشرطة تمرير مع جميع التأثيرات والعديد من القوالب.
زلق

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

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

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

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

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

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

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

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

— برنامج نصي منزلق jQuery بسيط وعملي وقابل للتخصيص بلغة HTML5 وCSS3.  الحل متوافق مع جميع المتصفحات ويدعم التصميم سريع الاستجابة.  سوف يحبها المطورون.

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

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

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

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



                                

                                    
إقرأ أيضاً...
                                    

                                                                                
كيفية صنع كابل VGA طويل من كابل شبكة من الفئة 5؟
                                                                                
كيفية إنشاء ونشر قصة فكونتاكتي من جهاز كمبيوتر أو هاتف
                                                                                
تحميل تطبيقات تحميل العاب للاندرويد
                                                                                
خدمة الخط المباشر - الدفع بواسطة الهاتف النقال