albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

Create Images Slider Using CSS & HTML

– فى هذا التمرين البسيط هتتعلم ( كيفية عمل Slider ) باستخدام HTML & CSS للصور.

 

أولًا: انشاء ملف index.html لكتابة أكواد HTML الخاصة بال Slider به، كالتالى:-

 

File: index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Create Images Slider</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>

		<!-- Start Images Slider Container-->
	<div class="imgs-slider-container">
		  <ul>
		    <li>
		      <div class="head-content">
		        <a href="#"> Header One </a>
		      </div>
		      <img src="https://via.placeholder.com/250x320/FF0000/FFFFFF">
		    </li>
		    <li>
		      <div class="head-content">
		        <a href="#"> Header Two </a>
		      </div>
		      <img src="https://via.placeholder.com/250x320/0000FF/808080">
		    </li>
		    <li>
		      <div class="head-content">
		        <a href="#"> Header Three </a>
		      </div>
		       <img src="https://via.placeholder.com/250x320/FFFF00/000000">
		    </li>
		    <li>
		      <div class="head-content">
		        <a href="#"> Header Four </a>
		      </div>
		       <img src="https://via.placeholder.com/250x320/FF0000/FFFFFF">
		    </li>
		    <li>
		      <div class="head-content">
		        <a href="#"> Header Five </a>
		      </div>
		      <img src="https://via.placeholder.com/250x320/FF0000/000000">
		    </li>
		  </ul>
		</div>
		<!-- End Images Slider Container-->

	</body>
</html>

ثانيًا : يأتي دور التصميم وتحريك عناصر HTML ب CSS ، هقسم لك فى خطوات قليلة كالتالي :-

 

1- تنسيق المحتوى Container ( الأب ) الخاص بالصور كالتالى:-

.imgs-slider-container {
  width: 954px;
  height: 357px;
  overflow: hidden;
  margin : 54px auto;
  box-shadow: 10px 13px 14px 1px #0000ff36;
}

 

2- تنسيق كلا من ( ul – li ) واضافة تأثير Transition، كالتالى:-

.imgs-slider-container ul { width: 200%; }

.imgs-slider-container ul li {
  position: relative;
  display: block;
  width: 160px;
  float: left;
  box-shadow: 0 0 20px 5px #151515;
  transition: all 2s ease .300ms;
}

.imgs-slider-container ul:hover li { width: 45px }
.imgs-slider-container ul li:hover { width: 640px }

 

3- تنسيق العنوان Header والرابط الخاص بكل بالصور، كالتالى:-

.head-content {
  background:rgba(0,0,0,.5);
  position: absolute;
  bottom: 0;
  width: 650px;
}

.head-content a {
  text-decoration: none;
  padding: 19px;
  color: #cdc3c3;
  display: block;
  background-color: #0a7acd;
}

 

2. ملف style.css  كامل:-

File: style.css

body { background: #1465a1; }

.imgs-slider-container {
  width: 954px;
  height: 357px;
  overflow: hidden;
  margin : 54px auto;
  box-shadow: 10px 13px 14px 1px #0000ff36;
}

.imgs-slider-container ul { width: 200%; }

.imgs-slider-container ul li {
  position: relative;
  display: block;
  width: 160px;
  float: left;
  box-shadow: 0 0 20px 5px #151515;
  transition: all 2s ease .300ms;
}

.imgs-slider-container ul:hover li { width: 45px }
.imgs-slider-container ul li:hover { width: 640px }

.head-content {
  background:rgba(0,0,0,.5);
  position: absolute;
  bottom: 0;
  width: 650px;
}

.head-content a {
  text-decoration: none;
  padding: 19px;
  color: #cdc3c3;
  display: block;
  background-color: #0a7acd;
}

 

ملحوظة: يمكنك التغيير فى ملف style أو فى ملف HTML حسب فكرتك أنت.

 

الكود كامل على Codepen.

Quote This Training:-

“Think twice, code once.”
― Waseem Latif

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

الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

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

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements