203 lines
8.2 KiB
Markdown
203 lines
8.2 KiB
Markdown
|
---
|
|||
|
|
title: Guide to Build a Sliding Image Gallery
|
|||
|
|
localeTitle: دليل لبناء معرض الصور الانزلاقية
|
|||
|
|
---
|
|||
|
|
سيرشدك هذا البرنامج التعليمي خلال إنشاء شريط تمرير للصور باستخدام مكتبة [jQuery](https://jquery.com/) .
|
|||
|
|
|
|||
|
|
[](https://codepen.io/atjonathan/pen/BKMxxq)
|
|||
|
|
|
|||
|
|
سيحتوي هذا البرنامج التعليمي على أربعة أجزاء:
|
|||
|
|
|
|||
|
|
* [HTML](#html)
|
|||
|
|
* [SCSS](#scss)
|
|||
|
|
* [JS](#js)
|
|||
|
|
* [المراجع](#references)
|
|||
|
|
|
|||
|
|
## HTML
|
|||
|
|
|
|||
|
|
[سنستخدم Bootstrap](http://getbootstrap.com/) لهذا البرنامج التعليمي للحفاظ على الأشياء تبدو جيدة ، دون قضاء الكثير من الوقت.
|
|||
|
|
|
|||
|
|
سيكون هيكلنا على النحو التالي:
|
|||
|
|
|
|||
|
|
`<div class="container">
|
|||
|
|
|
|||
|
|
<!-- The wrapper for our slider -->
|
|||
|
|
<div class="slider">
|
|||
|
|
<ul class="slides"><!-- Each image will be inside this unordered list --></ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="buttons"><!-- Pause and play buttons will go in here --></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
داخل لدينا `ul` مع فئة من `slides` سيكون لدينا ما يلي:
|
|||
|
|
|
|||
|
|
`<li class="slide"><img src="#" /></li>
|
|||
|
|
<li class="slide"><img src="#" /></li>
|
|||
|
|
<li class="slide"><img src="#" /></li>
|
|||
|
|
<li class="slide"><img src="#" /></li>
|
|||
|
|
<li class="slide"><img src="#" /></li>
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
داخل فئة `.buttons` لدينا يجب أن يكون لديك ما يلي:
|
|||
|
|
|
|||
|
|
`<button type="button" class="btn btn-default pause">
|
|||
|
|
<span class="glyphicon glyphicon-pause"></span>
|
|||
|
|
</button>
|
|||
|
|
<button type="button" class="btn btn-default play">
|
|||
|
|
<span class="glyphicon glyphicon-play"></span>
|
|||
|
|
</button>
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
في ما يلي مثال لما يجب أن تبدو عليه `html` :
|
|||
|
|
|
|||
|
|
> ملاحظة: يجب استبدال السمة `src` للصورة بالمحتوى الخاص بك.
|
|||
|
|
|
|||
|
|
`<div class="container">
|
|||
|
|
|
|||
|
|
<div class="slider">
|
|||
|
|
<ul class="slides">
|
|||
|
|
<li class="slide"><img src="https://unsplash.it/1280/720/?image=120" /></li>
|
|||
|
|
<li class="slide"><img src="https://unsplash.it/1280/720/?image=70" /></li>
|
|||
|
|
<li class="slide"><img src="https://unsplash.it/1280/720/?image=50" /></li>
|
|||
|
|
<li class="slide"><img src="https://unsplash.it/1280/720/?image=170" /></li>
|
|||
|
|
<li class="slide"><img src="https://unsplash.it/1280/720/?image=190" /></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="buttons">
|
|||
|
|
<button type="button" class="btn btn-default pause">
|
|||
|
|
<span class="glyphicon glyphicon-pause"></span>
|
|||
|
|
</button>
|
|||
|
|
<button type="button" class="btn btn-default play">
|
|||
|
|
<span class="glyphicon glyphicon-play"></span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
## SCSS
|
|||
|
|
|
|||
|
|
نحن نستخدم قواعد [Sass](http://sass-lang.com/) و SCSS حتى نتمكن من استخدام المتغيرات واستخدامها 
|
|||
|
|
|
|||
|
|
يمكننا استخدام SCSS التالية لتحديد التصميم الخاص بنا:
|
|||
|
|
|
|||
|
|
`// Variables
|
|||
|
|
$width: 720px;
|
|||
|
|
|
|||
|
|
.slider {
|
|||
|
|
width: $width;
|
|||
|
|
height: 400px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.slides {
|
|||
|
|
display: block;
|
|||
|
|
width: 6000px;
|
|||
|
|
height: 400px;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slide {
|
|||
|
|
float: left;
|
|||
|
|
list-style-type: none;
|
|||
|
|
width: $width;
|
|||
|
|
height: 400px;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buttons {
|
|||
|
|
margin: 0;
|
|||
|
|
width: $width;
|
|||
|
|
position: relative;
|
|||
|
|
top: -40px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
|
|||
|
|
.play {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
display: flex;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
## JS
|
|||
|
|
|
|||
|
|
#### المتغيرات
|
|||
|
|
|
|||
|
|
_في مقتطف الشفرة التالي ، نحدد المتغيرات المستخدمة لاحقًا في الشفرة._
|
|||
|
|
|
|||
|
|
`var animationSpeed = 1000; // How quickly the next slide animates.
|
|||
|
|
var pause = 3000; // The pause between each slide.
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
سنستخدم متغيرًا فارغًا حيث سنتصل بطريقة `setInterval` :
|
|||
|
|
|
|||
|
|
`var interval;
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
#### الرسوم المتحركة سنقوم بلف رسوم متحركة المنزلق الخاصة بنا داخل إحدى الوظائف:
|
|||
|
|
|
|||
|
|
`function startSlider() {}
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
نحن نستخدم طريقة جافا سكريبت الأصلية `setInterval()` لأتمتة محتويات الدالة على مشغل يستند إلى الوقت.
|
|||
|
|
|
|||
|
|
`interval = setInterval(function() {}, pause);
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
نستخدم متغير `pause` لمعرفة عدد المللي ثانية للانتظار قبل استدعاء الوظيفة مرة أخرى. اقرأ المزيد عن طريقة `setInterval` المحلية هنا: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. داخل وظيفتنا ، سنستخدم jQuery لتتلاشى بين الشرائح بسرعة متغير animationSpeed:
|
|||
|
|
|
|||
|
|
`$('.slides > li:first')
|
|||
|
|
.fadeOut(animationSpeed)
|
|||
|
|
.next()
|
|||
|
|
.fadeIn(animationSpeed)
|
|||
|
|
.end()
|
|||
|
|
.appendTo('.slides');
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
* نحن نستهدف الشريحة الأولى باستخدام `$('.slides > li:first')` . - `.fadeOut(animationSpeed)` الشريحة الأولى ثم تستخدم `.next()` ، ننتقل إلى الشريحة التالية. - بمجرد أن ننتقل إلى الشريحة التالية ، سوف `.fadeIn(animationSpeed)` في: `.fadeIn(animationSpeed)` . - سيستمر هذا التسلسل حتى الشريحة الأخيرة ( `.end()` ) ، ثم نوقف الرسم المتحرك. سنقوم الآن باستدعاء وظيفة `startSlider` لبدء الرسوم المتحركة:
|
|||
|
|
|
|||
|
|
startSlider ()؛
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### Play and Pause _هذه الميزة اختيارية ، ولكنها سهلة التنفيذ._ سنخفي زر التشغيل ، لذلك لا نرى أزرار التشغيل والإيقاف المؤقت:
|
|||
|
|
|
|||
|
|
`$('.play').hide(); // Hiding the play button.
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
سنقوم الآن بإنشاء زر الإيقاف المؤقت (يظهر تلقائيًا عند تحميل الصفحة):
|
|||
|
|
|
|||
|
|
`$('.pause').click(function() {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
$(this).hide();
|
|||
|
|
$('.play').show();
|
|||
|
|
});
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
* سنتصل بوظائفنا في كل مرة يتم النقر فوق زر الإيقاف المؤقت باستخدام jQuery. - سنقوم بإزالة الفاصل الزمني باستخدام طريقة `clearInterval` واستخدام متغير `interval` بنا `clearInterval` ، مع الإشارة إلى الفاصل الزمني للتوقف. - نظرًا لأن شريط التمرير متوقف مؤقتًا ، فسوف نخفي زر الإيقاف المؤقت باستخدام `$(this).hide();` . ملاحظة: نحن نستخدم `this` ، والذي سيشير إلى ما يتصل به `.pause` أي. - سنقوم بعد ذلك بعرض زر التشغيل الخاص بنا بحيث يمكن للمستخدم استئناف الرسوم المتحركة: `$('.play').show();` . تعمل التعليمة البرمجية التالية على إعداد زر التشغيل (مخفي تلقائيًا عند تحميل الصفحة):
|
|||
|
|
|
|||
|
|
$ (". play"). انقر فوق (function () { startSlider ()؛ $ (هذا) .hide ()؛ $ ( '. قفة') عرض ()؛ })؛
|
|||
|
|
|
|||
|
|
* سنقوم باستدعاء وظيفتنا في كل مرة يتم فيها النقر على زر التشغيل باستخدام jQuery.
|
|||
|
|
|
|||
|
|
* سنبدأ الفاصل الزمني أو نعيد تشغيله باستخدام وظيفة `startSlider` .
|
|||
|
|
* نظرًا لأن شريط التمرير يعمل حاليًا ، فسوف نخفي زر التشغيل باستخدام `$(this).hide();` . ملاحظة: نحن نستخدم `this` ، والذي سيشير إلى ما يقوم به `.play` .
|
|||
|
|
* سنقوم بعد ذلك بإظهار زر الإيقاف المؤقت الخاص بنا بحيث يمكن للمستخدم إيقاف الرسم المتحرك حسب الرغبة: `$('.pause').show();` .
|
|||
|
|
|
|||
|
|
## المراجع
|
|||
|
|
|
|||
|
|
* الخروج من التعليمات البرمجية المصدر والمثال على [CodePen](https://codepen.io/atjonathan/pen/BKMxxq) لهذا البرنامج التعليمي.
|