تعلم كيفية صنع سلايدر بإستعمال CSS

سنتعلم معاً في هذا الدرس كيفية صناعة سلايدر بأستخدام CSS ودون استخدام أو كتابة أي كود جافا سكريبت

السلام عليكم ورحمة الله وبركاته

سنتعلم معاً في هذا الدرس كيفة عمل سلايدر لعرض الصور باستخدام CSS فقط ولن نستخدم أي كود جافاسكريبت أو غيرها من لغات السكربتات فقط CSS نقية

النتيجة النهائية للدرس :

See the Pen Pure CSS Slider by Mohammed Jaffar (@MJK) on CodePen.

المهارات المتطلبة لفهم الدرس :

معرفة لغات HTML & CSS بمستوى جيد

أهم مهارات CSS التي يتوجب عليك معرفتها :

الآن دعونا نبدأ في درسنا .....

في البداية كما تعودنا سنقوم ببناء هيكلة صفحة الـ HTML الخاصة بنا كما في التالي :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Pure CSS Slider</title>
</head>
<body>
   
    <div class="wrapper">

  <div class="slider">

    <input type="radio" name="switche" id="text" checked class="switch">
    <label for="text" class="label">IMAGE 2</label>
    <div class="content">
        <img src="1.png">
    </div>

    <input type="radio" name="switche" id="image1" class="switch">
    <label for="image1" class="label">IMAGE 1</label>
    <div class="content">
      <img src="2.png">
    </div>

    <input type="radio" name="switche" id="image2" class="switch">
    <label for="image2" class="label">IMAGE 3</label>
    <div class="content">
    <img src="3.png" >
    </div>

    <div class="bottom"></div>
  </div>


</div>

</body>
</html>

كما لاحظت في الكود أعلاه في البداية قمنا بعمل حاوية (div) وقمنا بإعطائها كلاس بإسم (wrapper) وهذه الحاوية ستحتوي على كل شي خاص بالإسلايدر الخاص بنا
بداخل هذه الحاوية قمنا بعمل حاوية اخرى وقمنا بإعطائها كلاس بإسم (slider) وهذه الحاوية من أسمها لا بد من أنك تعلم بأنها حاوية الإسلايدر نفسها والتي تحتوي على كل شيء بداخل الإسلايدر.
بداخل حاوية الإسلايدر لدينا ثلاثة حاويات آخرى كل منها لديها كلاس بإسم (content) وبداخل كل واحدة منها صورة، لا تنسى استبدال (1.png) وبقية الصور بالصور الخاصة بك
لكن قبل كل حاوية (content) يجود فوقها input من نوع radio طريقة العمل هنا التي سنتبعها هي عند اختيار radio معين سيقوم بإظهار حاوية الـ (content) التي تليها
في النهاية لدينا ايضاً حاوية آخرى (bottom) وهذه ستكون الحاوية التي اسفل الإسلايدر والتي تحتوي على الإزرار كما رأيتها في النتيجة النهائية للدرس.
الآن سنقوم مباشرة بالعمل على الـ CSS وسنقوم في البداية مباشرة بإضافة الكود التالي :

.wrapper {
    width: 600px;
    height: 350px;
    margin: 0 auto;
}

هنا قمنا فقط بإضافة خلفية وقمنا بتحديد طول وعرض مساحة العمل وقمنا بتوسيط مساحة العمل عرضياً

بعد ذلك سنقوم بتنسيق مساحة الإسلايدر الخاص بنا كما في التالي :

.slider {
    width: 100%;
    height: 100%;
    border: 8px solid #fff;
    border-radius: 8px;
/*    إخفاء أي مساحة زائدة عن حدود الإسالايدر*/
    overflow: hidden;
    position: relative;
}

كما لاحظت قمنا بإعطائها (position: relative) لتكون آب لحاوية (bottom) والتي سنقوم بتنسيقها فيما بعد

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

img {
    max-width: 100%;
    height: auto;
}

والنتيجة الآن :

الآن نريد أن نقوم بإخفاء الـ radio

.switch { display: none; }

الآن سنقوم بالعمل على (<div class="bottom"></div>) لنجعله وكأنه شريط اسفل الإسلايدر كما في التالي :

.bottom {
    background: #fff;
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0;
}

هنا قمنا بتغيير position absolute
وبعد ذلك قمنا بمحاذاته اسفل الإسلايدر وقمنا بتحديد الطول والعرض ووضع خلفية
لا اعتقد بأن هناك شيء غريب في هذا الكود
الآن سنقوم بتنسيق الـ (label) ونجعلها وكأنها أزرار أو مفاتيح مربعة صغيرة اسفل الإسلايدر

.label {
    background: #00bcd4;
    height: 15px;
    width: 15px;
    border-radius: 4px;
/*لإزاحة النص*/
    text-indent: 50px;
/*اخفاء المساحة الزائدة عن حدود الزر*/
    overflow: hidden;
/*    تغيير شكل المؤشر عند التأشير*/
    cursor: pointer;
    position: absolute;
    bottom: 5px;
    z-index: 99;
/*حركة انتقالية*/
    transition: all 0.25s;
}

والنتيجة :

لا بد من أنك لاحظت اختفاء نص الـ(label) وذلك بسبب أننا قمنا أولا بتحديد الطول والعرض (15×15) وبعد ذلك قمنا بإزاحة النص قليلاً بإستخدام (text-indent) عن المساحة التي حددناها وبعد ذلك بتفعيل (overflow: hidden) لتخفي أي جزئية خارج المساحة المحددة ، فلو قمت بحذفها سيظهر لك النص

وايضاً بالنظر إلى النتيجة فإن لدينا زر (label) واحد فقط ، ولكن إن رجعت إلى صفحة الـ HTML ستجد أن لدينا ثلاثة وليس واحد

والسبب في ذلك هو أننا قمنا بتغيير التموضع (position:absolute) مما جعل جميع الأزرار تتجمع في مكان واحد وتظهر وكأنها زر واحد
ولكن في الحقية هم 3 أزرار وراء بعضهم البعض

إذا ماهو الحل ؟
الحل بسيط سنقوم بإستخدام خاصية(nth-of-type() Selector) والتي تسمح لنا بتحديد رقم أي عنصر والتعديل على خصائصه لوحده دون التأثير على العنصر الآخر حتى لو كان لدينا 100 عنصر لهم نفس اسم الكلاس أو المعرف

والآن دعنا نقوم بعمل ذلك

.label:nth-of-type(1) { left: 0px; }

.label:nth-of-type(2) { left: 30px; }

.label:nth-of-type(3) { left: 60px; }

إذاً كما شاهدت في الكود أعلاه قمنا لدينا ثلاثة label وبإستخدام nth-of-type قمنا بتحديد رقم كل واحد منهم وقمنا بإزاحته من الجهة اليسرى بمسافة معينة والنتيجة الآن :

لنذهب الآن ونقوم بالعمل على محتويات الإسلايدر والتي عرفناها مسبقاً بكلاس (content) لوقمنا بحذف خاصية (overflow: hidden;) من كلاس (slider)(لا تقم بحذفها أنا هنا فقط أقوم بالتوضيح) سترى النتيجة التالية :

الصور هنا متتابعة فوق بعضها البعض ولكننا في الواقع نريد أن نقوم بوضعها في مكان واحد خلف بعضها البعض داخل الإسلايدر إذاً ما الحل ؟

الحل هو أن نقوم أولاً بتحديد عرض المحتوى إلى 100% بعد ذلك سنقوم بمحاذاته نحو اليسار ثم اخيراً سنقوم بإزاحته نحو الجهة اليسرى بنسبة -100% كما في التالي :

.content {
    width: 100%;
    float: left;
    margin-right: -100%;
}

الآن إن شاهدت النتيجة :

جميل جداً أليس كذلك؟
الآن كل ما تبقى لنا هو إظهار الصورة عند الضغط على أحد الآزرار،

ولكن كيف سنفعل ذلك ؟
سأعطيك فرصة لتفكر قليلاً قم بالتفكير والمحاولة بنفسك وإن لم تستطع سأعطيك الحل

.... فكر .....

.... فكر .....

.... فكر .....

.... فكر ....

. .... فكر ....

. الآن إن لم تستطيع أن تصل إلى نتيجة سأقوم بإعطائك الحل

في البداية كما تتذكر في صفحة الـ HTML الخاصة بنا لدينا ثلاثة input من نوع radio كل واحد منها لديها label وهي تلك الأزرار أو المربعات الزرقاء الصغيرة اسفل الإسلايدر واسقل كل منها يوجد حاوية (content)

كما ذكرت سابقاً طريقة العمل التي سنتبعها عند اختيار radio معين سيقوم بإظهار حاوية الـ (content) التي تليها
ولعمل ذلك سنحتاج لإستخدام :not(:checked) ومن خلالها سنقوم بإخفاء كل حاوية (content) غير محددة كما في التالي:

.switch:not(:checked) + .label + .content {
    opacity: 0;
    transition: opacity 2s;
}

في هذه الجزئية (.switch:not(:checked) + .label + .content)
وكأننا نقول عندما لا يكون هناك radio محدد قم بالبحث عن كل من الكلاس label , content وقم بإضافة الخائص التالية

لا بد أن تقوم بإضافة علامة (+) وبهذه الطريقة سيقوم radio الغير محدد بالبحث أن أولlabel & contnt يأتي بعده ويقوم بإضافة الخائص له
للتعرف اكثر عن كيفة عمل (checked) زر الرابط التالي :

إن كنت تتسأل عن كيف تقوم هذه الإزرار بالتحديد على radio فلا بد بأنك نسيت أن هذه الإزرار في الإصل عبارة عن label كل واحد منها يتبع لـ radio معين فإن قمت بإزالة (display:none) من على كلاس (switch) ستتمكن من رؤية ذلك بوضوح

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

الآن إذهب وألقي نظرة على النتيجة وحاول الضغط على الإزرار وستجد الإن الإنتقال يعمل بشكل جميل جداً ومن دون أي مشاكل

الآن كخطوة اخيرة سأقوم بتغميق لون الزر المحدد عليه لنستطيع التعرف على الزر الذي قمنا بتحديده

وبنفس الطريقة وبإستخدام (checked) هذه المرة بعكس المرة السابقة التي استخدمنا فيها (:not(:checked))

.switch:checked + .label {
    background: #039baf;
}

الآن بعد إضافتك لهذا الكود ستصل إلى النتيجة النهائية كما يلي :

See the Pen Pure CSS Slider by Mohammed Jaffar (@MJK) on CodePen.

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

Menu

تعلم كيفية صنع سلايدر بإستعمال CSS

هناك تعليق واحد

المشاركات الشائعة

أقسام الموقع

تابعنا علي مواقع التواصل الاجتماعي

المقالات الاكثر مشاهدة

اقسام الموقع الرئيسية

أحدث المقالات

احدث التعليقات

إتصل بنا