تعديل عدد العناصر داخل ال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

أسامة زيادة

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية