تعديل عدد العناصر داخل الcarousel على حسب حجم الشاشة

Muhammed Hacibrahim · 23 أبريل 2022

كيف يمكنني اضافة ثلاث عناصر داخل الcarousel في شاشات الكبيرة و عنصرين في الصغيرة

أسامة زيادة · 23 أبريل 2022

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

هنا مثال لتوضيح الطريقة لديك . في حال كان لديك أربع عناصر وأردت إخفاء عنصر ما في الشاشات الصغيرة يمكنك إعطائه الخاصية display: none; أو visibility: hidden; بهذا الشكل .

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>aa</title>
	<style type="text/css">
		.box-1{width: 50px; height: 50px; background-color: red;}
		.box-2{width: 50px; height: 50px; background-color: green; }
		.box-3{width: 50px; height: 50px; background-color: gray;}
		.box-4{width: 50px; height: 50px; background-color: yellow;}
		@media (max-width: 600px) {
			.box-4{width: 50px; height: 50px; background-color: yellow; visibility: hidden; }
			.box-3{width: 50px; height: 50px; background-color: gray; display: none;}
		}
	</style>
</head>
<body>

	<section>
		<div class="box-1"></div>
		<div class="box-2"></div>
		<div class="box-3"></div>
		<div class="box-4"></div>
	</section>

</body>
</html>

تعديل عدد العناصر داخل الcarousel على حسب حجم الشاشة

السؤال

Muhammed Hacibrahim

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

أسامة زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية