الدرس 1: سلايدر بسيط لجميع المهام

 الدرس 1: سلايدر بسيط لجميع المهام

مقدمة:

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

 

ماذا يقدم لنا هذا السلايد:

–  امكانية التبديل بين السلايدات التي تحوي صور، فيديو، نص . . .

– توافقية مع تغير أبعاد الشاشة “Responsive” .

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

 

لنبدأ سريعاً . . .  🙂

­

 

التركيب:

1- كل ما نحتاجه بداية هو استدعاء مكتبة “jquery” ومن ثم استدعاد ملفين الأول ملف الجافاسكربت المسمى “sss.min.js” والثاني هو ملف الستايل المسمى “sss.css” أي اننا سوف نحتاج لملفين فقط.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/sss.min.js"></script>
<link rel="stylesheet" href="css/sss.css" type="text/css" media="all">

<script>
jQuery(function($) {
$('.slider').sss();
});
</script>
</head>

 كما هو واضح أيضاُ قمنا ياستدعاء السلايدر عن طريق دالة جافاسكربت بسيطة.

 

2- الأن نقوم بعمل السلايدر داخل صفحة HTML أو داخل أي صفحة مطلوبة كما في الكود التالي

<div class="slider">
   <img src="images/img1.jpg" />
   <img src="images/img2.jpg" />
   <img src="images/img3.jpg" />
   <div class="just_text">This slide just text.</div>
   <div><img src="images/img4.jpg" /><span class="caption">This slider image + text .</span></div>
</div>

كما نرى يمكن ادراج صور أو نصوص أو صور ونصوص في نفس الوقت، كمثال عندما نريد ادراج صورة نقوم بكتابة كود الصورة فقط  <img src=”images/img1.jpg” /> وعمدما نريد اضافة نص إلى الصورة نستخدم الكلاس <span class=”caption”> وعندما نريد نص بدون صورة نستخدم الكلاس <div class=”just_text”> .

 

3- لعمل تعديلات متقدمة على السلايدر نقوم باستخدام الكود التالي في الاستدعاء حيث قمت بتوضيح كل خاصية

$('.slider').sss({
   slideShow : true, // لتشغيل التنقل التلقائي بين السلايدات // false
   startOn : 0, // السلايد الذي سوف يبدأ من عنده حيث 0 هو الأول
   transition : 400, // مدة الانتقال بين السلايدات بالميلي ثانية
   speed : 3500, // مدة بقاء السلايد بالميلي ثانية
   showNav : true // لعرض الأزرار الخاصة بالتنقل بين السلايدات // false
});

 

 هذا السلايدر متوافق مع متصفحات Google Chrome و FireFox و Internet Explorer الإصدار السابع فما فوق إضافة إلى Edge .

 

لمشاهدة مثال أون لاين  من هنا

لتحميل السلايدر  من هنا

 إذا واجهتكم أي مشاكل في التركيب أو أي استفسار أخر يمكنكم ترك تعليق هنا أو على الفيسبوك.

issam

Related post

2 Comments

  • مشكورين ….
    درس رائع

    • لا شكر على واجب أهلا بك 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *