🌟 سلايدر بطاقات احترافي بتصميم زجاجي باستخدام HTML, CSS و Swiper JS

إذا كنت تبحث عن طريقة مبتكرة لعرض محتوى بصري جذاب على موقعك أو مدونتك، فإن سلايدر البطاقات الاحترافي بتصميم زجاجي Glassmorphism هو الحل الأمثل. هذا التصميم يجمع بين HTML وCSS وSwiper JS لإنشاء سلايدر سلس،

 متجاوب، وخفيف الوزن يعرض الصور، الكروت، أو المنتجات بطريقة جذابة واحترافية.

---

ما هو تأثير Card Slider Glassmorphism؟

Glassmorphism هو أسلوب تصميم عصري يعتمد على خلفيات شبه شفافة مع تأثير زجاجي (Blur) لإضفاء إحساس بالعمق واللمعان على التصميم.
عند دمجه مع Swiper JS، نحصل على سلايدر كروت تفاعلي يمكن للمستخدمين السحب والتنقل بين البطاقات بسهولة، مع إمكانية عرض تقييمات أو معلومات إضافية على كل بطاقة.

---

المميزات الرئيسية للسلايدر

1. تصميم زجاجي احترافي (Glassmorphism UI)
   
   كل بطاقة تحتوي على تأثير زجاجي شفاف مع ظل وBlur خلفي.
   
   يعطي شعورًا بالعمق والاحترافية للمحتوى المعروض.

2. تأثير Card Slider من Swiper JS
   
   حركة انسيابية بين البطاقات مع دعم Loop و Mousewheel.
   
   يمكن عرض 3 بطاقات في الشاشات الكبيرة وبطاقة واحدة على الموبايل.

3. خلفية متحركة ديناميكية
   
   تمنح السلايدر مظهرًا جذابًا وتفاعليًا مع المستخدم.

4. متجاوب 100%
   
   يعمل على جميع الأجهزة: كمبيوتر، تابلت، موبايل، مع إعادة ضبط تلقائية عند تغيير حجم الشاشة.

5. سهولة التخصيص
   
   تعديل الصور، العناوين، التقييمات أو أي عنصر داخل البطاقات بسهولة تامة.
   
   تغيير الألوان أو درجة الشفافية لملائمة هوية موقعك.

6. كود نظيف وخفيف وسريع التحميل
   
   يعتمد على HTML, CSS وSwiper JS فقط، بدون مكتبات إضافية ثقيلة.

---

كيفية تركيب السلايدر

1. HTML

انسخ كود HTML الخاص بالبطاقات وضعه داخل المشاركة أو صفحة ثابتة:

<div class='cards'> <div class='text-card'> <h1>Allito</h1> <p>Cards slider Electric Border Effect Hover</p> </div> <div class='weraper'> <button aria-label='Previous' class='slider-control prev'>❮</button> <div aria-label='Simple slider' class='my-slider'> <div class='my-slider__track'> <!-- card1 Start --> <div class='slide'> <div class='slide-inner'> <svg class='svg-container'> <defs> <filter colorInterpolationFilters='sRGB' height='140%' id='turbulent-displace' width='140%' x='-20%' y='-20%'> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise1'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='700; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise2'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -700'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise3'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='490; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise4'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -490'/> </feOffset> <feComposite in='offsetNoise1' in2='offsetNoise2' result='part1'/> <feComposite in='offsetNoise3' in2='offsetNoise4' result='part2'/> <feBlend in='part1' in2='part2' mode='color-dodge' result='combinedNoise'/> <feDisplacementMap in='SourceGraphic' in2='combinedNoise' scale='30' xChannelSelector='R' yChannelSelector='B'/> </filter> </defs> </svg> <div class='card-container'> <div class='inner-container'> <div class='border-outer'> <div class='main-card'/> </div> <div class='glow-layer-1'/> <div class='glow-layer-2'/> </div> <div class='overlay-1'/> <div class='overlay-2'/> <div class='background-glow'/> <div class='content-container'> <div class='card-image'> <img alt='Design Trends' src='https://i.top4top.io/p_3608jzx3y1.jpg'/> </div> <div class='slide__content'> <h3 class='card-title'>Modern UI Trends for 2026</h3> <p class='card-text'>Explore the latest user interface design trends that are shaping the digital landscape this year. From neumorphism to glassmorphism and beyond.</p> <div class='card-footer'> <div class='card-profile'> <img alt='Alex Smith' src='https://j.top4top.io/p_3608umprw6.jpg'/> <div class='card-profile-info'> <span class='card-profile-name'>Allito</span> <span class='card-profile-role'>UI Designer</span> </div> </div> <a class='card-button' href='#'>Read More</a> </div> </div> </div> </div> </div> </div> <!-- card1 Start --> <div class='slide'> <div class='slide-inner'> <svg class='svg-container'> <defs> <filter colorInterpolationFilters='sRGB' height='140%' id='turbulent-displace' width='140%' x='-20%' y='-20%'> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise1'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='700; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise2'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -700'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise3'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='490; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise4'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -490'/> </feOffset> <feComposite in='offsetNoise1' in2='offsetNoise2' result='part1'/> <feComposite in='offsetNoise3' in2='offsetNoise4' result='part2'/> <feBlend in='part1' in2='part2' mode='color-dodge' result='combinedNoise'/> <feDisplacementMap in='SourceGraphic' in2='combinedNoise' scale='30' xChannelSelector='R' yChannelSelector='B'/> </filter> </defs> </svg> <div class='card-container'> <div class='inner-container'> <div class='border-outer'> <div class='main-card'/> </div> <div class='glow-layer-1'/> <div class='glow-layer-2'/> </div> <div class='overlay-1'/> <div class='overlay-2'/> <div class='background-glow'/> <div class='content-container'> <div class='card-image'> <img alt='Design Trends' src='https://j.top4top.io/p_36082jini2.jpg'/> </div> <div class='slide__content'> <h3 class='card-title'>Best Frontend Frameworks</h3> <p class='card-text'>A comprehensive comparison of the most popular frontend frameworks and libraries that developers are using to build modern web applications..</p> <div class='card-footer'> <div class='card-profile'> <img alt='Alex Smith' src='https://e.top4top.io/p_36084638x1.jpg'/> <div class='card-profile-info'> <span class='card-profile-name'>Alex Smith</span> <span class='card-profile-role'>UI Designer</span> </div> </div> <a class='card-button' href='#'>Read More</a> </div> </div> </div> </div> </div> </div> <!-- card1 Start --> <div class='slide'> <div class='slide-inner'> <svg class='svg-container'> <defs> <filter colorInterpolationFilters='sRGB' height='140%' id='turbulent-displace' width='140%' x='-20%' y='-20%'> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise1'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='700; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise2'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -700'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise3'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='490; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise4'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -490'/> </feOffset> <feComposite in='offsetNoise1' in2='offsetNoise2' result='part1'/> <feComposite in='offsetNoise3' in2='offsetNoise4' result='part2'/> <feBlend in='part1' in2='part2' mode='color-dodge' result='combinedNoise'/> <feDisplacementMap in='SourceGraphic' in2='combinedNoise' scale='30' xChannelSelector='R' yChannelSelector='B'/> </filter> </defs> </svg> <div class='card-container'> <div class='inner-container'> <div class='border-outer'> <div class='main-card'/> </div> <div class='glow-layer-1'/> <div class='glow-layer-2'/> </div> <div class='overlay-1'/> <div class='overlay-2'/> <div class='background-glow'/> <div class='content-container'> <div class='card-image'> <img alt='Design Trends' src='https://k.top4top.io/p_3608mlnmx3.jpg'/> </div> <div class='slide__content'> <h3 class='card-title'>AI User Experience Design</h3> <p class='card-text'>How artificial intelligence is revolutionizing user experience design and enabling more personalized, intuitive interfaces for digital products.</p> <div class='card-footer'> <div class='card-profile'> <img alt='Alex Smith' src='https://f.top4top.io/p_3608msqao2.jpg'/> <div class='card-profile-info'> <span class='card-profile-name'>Allito</span> <span class='card-profile-role'>UI Designer</span> </div> </div> <a class='card-button' href='#'>Read More</a> </div> </div> </div> </div> </div> </div> <!-- card1 Start --> <div class='slide'> <div class='slide-inner'> <svg class='svg-container'> <defs> <filter colorInterpolationFilters='sRGB' height='140%' id='turbulent-displace' width='140%' x='-20%' y='-20%'> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise1'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='700; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise2'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -700'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise3'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='490; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise4'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -490'/> </feOffset> <feComposite in='offsetNoise1' in2='offsetNoise2' result='part1'/> <feComposite in='offsetNoise3' in2='offsetNoise4' result='part2'/> <feBlend in='part1' in2='part2' mode='color-dodge' result='combinedNoise'/> <feDisplacementMap in='SourceGraphic' in2='combinedNoise' scale='30' xChannelSelector='R' yChannelSelector='B'/> </filter> </defs> </svg> <div class='card-container'> <div class='inner-container'> <div class='border-outer'> <div class='main-card'/> </div> <div class='glow-layer-1'/> <div class='glow-layer-2'/> </div> <div class='overlay-1'/> <div class='overlay-2'/> <div class='background-glow'/> <div class='content-container'> <div class='card-image'> <img alt='Design Trends' src='https://l.top4top.io/p_3608h3nzf4.jpg'/> </div> <div class='slide__content'> <h3 class='card-title'>Workspace Design for Focus</h3> <p class='card-text'>Designing workspaces that maximize productivity and minimize distractions for creative professionals in the hybrid work environment.</p> <div class='card-footer'> <div class='card-profile'> <img alt='Alex Smith' src='https://g.top4top.io/p_3608cug2l3.jpg'/> <div class='card-profile-info'> <span class='card-profile-name'>Alex Smith</span> <span class='card-profile-role'>UI Designer</span> </div> </div> <a class='card-button' href='#'>Read More</a> </div> </div> </div> </div> </div> </div> <!-- card1 Start --> <div class='slide'> <div class='slide-inner'> <svg class='svg-container'> <defs> <filter colorInterpolationFilters='sRGB' height='140%' id='turbulent-displace' width='140%' x='-20%' y='-20%'> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise1'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='700; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise2'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -700'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise3'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='490; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise4'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -490'/> </feOffset> <feComposite in='offsetNoise1' in2='offsetNoise2' result='part1'/> <feComposite in='offsetNoise3' in2='offsetNoise4' result='part2'/> <feBlend in='part1' in2='part2' mode='color-dodge' result='combinedNoise'/> <feDisplacementMap in='SourceGraphic' in2='combinedNoise' scale='30' xChannelSelector='R' yChannelSelector='B'/> </filter> </defs> </svg> <div class='card-container'> <div class='inner-container'> <div class='border-outer'> <div class='main-card'/> </div> <div class='glow-layer-1'/> <div class='glow-layer-2'/> </div> <div class='overlay-1'/> <div class='overlay-2'/> <div class='background-glow'/> <div class='content-container'> <div class='card-image'> <img alt='Design Trends' src='https://k.top4top.io/p_3608mlnmx3.jpg'/> </div> <div class='slide__content'> <h3 class='card-title'>Micro Animation Designs</h3> <p class='card-text'>Explore the latest user interface design trends that are shaping the digital landscape this year. From neumorphism to glassmorphism and beyond.</p> <div class='card-footer'> <div class='card-profile'> <img alt='Alex Smith' src='https://h.top4top.io/p_3608vfyfp4.jpg'/> <div class='card-profile-info'> <span class='card-profile-name'>Allito</span> <span class='card-profile-role'>UI Designer</span> </div> </div> <a class='card-button' href='#'>Read More</a> </div> </div> </div> </div> </div> </div> <!-- card1 Start --> <div class='slide'> <div class='slide-inner'> <svg class='svg-container'> <defs> <filter colorInterpolationFilters='sRGB' height='140%' id='turbulent-displace' width='140%' x='-20%' y='-20%'> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise1'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='700; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='1' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise2'> <animate attributeName='dy' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -700'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise1' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise1' result='offsetNoise3'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='490; 0'/> </feOffset> <feTurbulence baseFrequency='0.02' numOctaves='10' result='noise2' seed='2' type='turbulence'/> <feOffset dx='0' dy='0' in='noise2' result='offsetNoise4'> <animate attributeName='dx' calcMode='linear' dur='6s' repeatCount='indefinite' values='0; -490'/> </feOffset> <feComposite in='offsetNoise1' in2='offsetNoise2' result='part1'/> <feComposite in='offsetNoise3' in2='offsetNoise4' result='part2'/> <feBlend in='part1' in2='part2' mode='color-dodge' result='combinedNoise'/> <feDisplacementMap in='SourceGraphic' in2='combinedNoise' scale='30' xChannelSelector='R' yChannelSelector='B'/> </filter> </defs> </svg> <div class='card-container'> <div class='inner-container'> <div class='border-outer'> <div class='main-card'/> </div> <div class='glow-layer-1'/> <div class='glow-layer-2'/> </div> <div class='overlay-1'/> <div class='overlay-2'/> <div class='background-glow'/> <div class='content-container'> <div class='card-image'> <img alt='Design Trends' src='https://i.top4top.io/p_3608jzx3y1.jpg'/> </div> <div class='slide__content'> <h3 class='card-title'>Allito slider 2026</h3> <p class='card-text'>Explore the latest user interface design trends that are shaping the digital landscape this year. From neumorphism to glassmorphism and beyond.</p> <div class='card-footer'> <div class='card-profile'> <img alt='Alex Smith' src='https://i.top4top.io/p_3608q1iza5.jpg'/> <div class='card-profile-info'> <span class='card-profile-name'>Allito</span> <span class='card-profile-role'>UI Designer</span> </div> </div> <a class='card-button' href='#'>Read More</a> </div> </div> </div> </div> </div> </div> </div> </div> <button aria-label='Next' class='slider-control next'>❯</button> </div> </div> نسخ الكود

---

2. CSS

أضف كود الـ CSS داخل تنسيق القالب أو داخل <style> لتصميم البطاقات والخلفية الزجاجية:

* { box-sizing: border-box; } :root { --electric-border-color: #dd8448; --electric-light-color: oklch(from var(--electric-border-color) l c h); --gradient-color: oklch(from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4); --color-neutral-900: oklch(0.185 0 0); --border-color: rgba(221, 132, 72, 0.5); } .cards { min-height: 100vh; width: 100%; background-color: oklch(0.145 0 0); color: oklch(0.985 0 0); } .text-card { width: 100%; text-align: center; padding-top: 23px; } .text-card h1 { font-size: 58px; text-transform: uppercase; color: var(--electric-border-color); font-weight: bold; line-height: 1; } .text-card p { font-size: 20px; color: #fff; text-align: center; font-weight: 600; } .weraper { display: flex; align-items: center; justify-content: center; padding: 24px; font-family: 'Poppins', sans-serif; width: 100%; margin: auto; align-content: center; position: relative; overflow: hidden; } .my-slider { width: min(1100px, 96vw); position: relative; overflow: hidden; padding: 18px 24px; border-radius: 12px; } /* viewport */ .my-slider__track { display: flex; gap: 24px; transition: transform 0.55s cubic-bezier(.22,.9,.3,1); will-change: transform; align-items: stretch; user-select: none; -webkit-user-drag: none; touch-action: pan-y; } .slide { flex: 0 0 calc((100% - 48px) / 3); height: 404px; display: flex; overflow: hidden; position: relative; flex-direction: column; border-radius: 25px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05); transition: transform .4s ease; } .slide-inner { transition: transform .5s ease, background-position .5s ease; border-radius: 25px; } .slide:hover .slide-inner { background-position: 80% 20%; transform: rotate3d(0.5, 1, 0, 30deg); box-shadow: rgb(211, 121, 60) 12px 34px 17px -56px, rgb(186, 92, 31) -1px 5px 11px 5px; } .slide:hover .overlay-1, .slide:hover .overlay-2 { background: none; } .svg-container { position: absolute; } .card-container { padding: 2px; border-radius: 24px; position: relative; background: linear-gradient( -30deg, var(--gradient-color), transparent, var(--gradient-color) ), linear-gradient( to bottom, var(--color-neutral-900), var(--color-neutral-900) ); } /* Inner container */ .inner-container { position: relative; } /* Border layers */ .border-outer { border: 2px solid var(--border-color); border-radius: 24px; padding-right: 4px; padding-bottom: 4px; } .main-card { width: 328px; height: 395px; border-radius: 24px; border: 2px solid var(--electric-border-color); margin-top: -4px; margin-left: -4px; filter: url(#turbulent-displace); } /* Glow effects */ .glow-layer-1 { border: 2px solid rgba(221, 132, 72, 0.6); border-radius: 24px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; filter: blur(1px); } .glow-layer-2 { border: 2px solid var(--electric-light-color); border-radius: 24px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; filter: blur(4px); } /* Overlay effects */ .overlay-1 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; border-radius: 24px; opacity: 1; mix-blend-mode: overlay; transform: scale(1.1); filter: blur(16px); background: linear-gradient( -30deg, white, transparent 30%, transparent 70%, white ); } .overlay-2 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; border-radius: 24px; opacity: 0.5; mix-blend-mode: overlay; transform: scale(1.1); filter: blur(16px); background: linear-gradient( -30deg, white, transparent 30%, transparent 70%, white ); } /* Background glow */ .background-glow { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; border-radius: 24px; filter: blur(32px); transform: scale(1.1); opacity: 0.3; z-index: -1; background: linear-gradient( -30deg, var(--electric-light-color), transparent, var(--electric-border-color) ); } .content-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: flex; flex-direction: column; } .card-image { position: relative; } .slide .card-image img { width: 100%; padding: 10px; border-radius: 22px; object-fit: cover; aspect-ratio: 16 / 9; } .slide__content { color: #000; flex: 1; display: flex; flex-direction: column; padding: 10px 25px 25px; } .card-title { color: var(--electric-border-color); font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; transition: all 0.5s ease-in-out; } .card-title:hover { transform: translate3d(20px, -7px, 4px); } .card-text { color: #747474; font-size: 0.95rem; line-height: 1.6; margin-bottom: 13px; height: 74px; overflow: hidden; transition: all 0.5s ease-in-out; } .card-text:hover { transform: translate3d(10px, -7px, 4px); } .card-footer { display: flex; margin-top: auto; align-items: center; padding-top: 15px; justify-content: space-between; border-top: 1px solid rgba(0, 0, 0, 0.08); } .card-profile { display: flex; align-items: center; } .card-profile img { width: 35px; height: 35px; margin-right: 10px; object-fit: cover; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: all 0.5s ease-in-out; } .card-profile img:hover { box-shadow: -10px 8px 13px rgba(213, 123, 63, 0.78); transform: translate3d(3px, -7px, 4px); } .card-profile-info { display: flex; flex-direction: column; } .card-profile-name { font-size: 0.875rem; font-weight: 600; color: var(--electric-border-color); transition: all 0.5s ease-in-out; } .card-profile-role { font-size: 0.8rem; color: #7A7A7A; transition: all 0.5s ease-in-out; } .card-profile-name:hover, .card-profile-role:hover { transform: translate3d(9px, -4px, 4px); } .card-button { color: #fff; padding: 10px 20px; border-radius: 30px; font-size: 0.81rem; font-weight: 600; text-decoration: none; background: linear-gradient(135deg, #dd8448 0%, #b35416 100%); box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2); transition: all 0.5s ease-in-out; } .card-button:hover { box-shadow: -10px 8px 13px rgba(213, 123, 63, 0.78); transform: translate3d(10px, -7px, 4px); } .slider-control { position: absolute; top: 50%; transform: translateY(-50%); color: var(--electric-border-color); border: 2px solid var(--electric-border-color); font-size: 1.6rem; border-radius: 8px; width: 52px; height: 52px; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; z-index: 10; display: grid; place-items: center; backdrop-filter: blur(4px); user-select: none; -webkit-tap-highlight-color: transparent; background: rgba(255,255,255,0.1); } .slider-control:hover { transform: translateY(-50%) scale(1.05); background: rgba(0, 255, 255, 0.25); box-shadow: 0 6px 18px rgba(0,255,255,0.12); } .slider-control:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 6px 18px rgba(0,255,255,0.08); } .slider-control.prev { left: 12px; } .slider-control.next { right: 12px; } .slider-control[disabled] { opacity:0.45; pointer-events:none; } .slider-control[disabled] { opacity:0.45; pointer-events:none; } /* ======= responsive: mobile =========== */ @media (max-width: 768px) { .slide { flex: 0 0 100%; height: 360px; } .my-slider__track { gap: 16px; } .my-slider { padding:12px; } .slide .card-image img { height: 185px; } .slide__content { padding: 0px 20px 22px; } .card-text { margin-bottom: 0px; } .card-title { margin-bottom: -8px; } .slider-control.prev { left: 8px; } .slider-control.next { right: 8px; } } نسخ الكود

---

3. JavaScript مع Swiper

أضف مكتبة Swiper JS عبر CDN وشغّل السلايدر:

(function(){ const track = document.querySelector('.my-slider__track'); const slides = Array.from(track.children); const prev = document.querySelector('.slider-control.prev'); const next = document.querySelector('.slider-control.next'); let index = 0; function getGap(){ const cs = window.getComputedStyle(track); const gap = cs.getPropertyValue('gap') || cs.getPropertyValue('column-gap') || '0px'; return parseFloat(gap); } function itemsPerView(){ return window.innerWidth <= 768 ? 1 : 3; } function stepWidth(){ const gap = getGap(); const slideRect = slides[0].getBoundingClientRect(); return slideRect.width + gap; } function clamp(i){ const max = Math.max(0, slides.length - itemsPerView()); return Math.min(Math.max(0, i), max); } function updateButtons(){ prev.disabled = index <= 0; next.disabled = index >= slides.length - itemsPerView(); } function goTo(i, instant = false){ index = clamp(i); const s = stepWidth(); const offset = -(s * index); if (instant){ track.style.transition = 'none'; track.style.transform = `translateX(${offset}px)`; // force reflow then restore transition requestAnimationFrame(()=> { track.style.transition = 'transform 0.55s cubic-bezier(.22,.9,.3,1)'; }); } else { track.style.transform = `translateX(${offset}px)`; } updateButtons(); } prev.addEventListener('click', ()=> goTo(index - 1)); next.addEventListener('click', ()=> goTo(index + 1)); let isDown = false; let startX = 0; let currentTranslate = 0; let prevTranslate = 0; function getTranslateX(){ const style = window.getComputedStyle(track); const matrix = new DOMMatrixReadOnly(style.transform); return matrix.m41; } function setTranslate(x){ track.style.transform = `translateX(${x}px)`; } function onPointerDown(clientX){ isDown = true; startX = clientX; track.style.transition = 'none'; prevTranslate = getTranslateX(); } function onPointerMove(clientX){ if(!isDown) return; const dx = clientX - startX; currentTranslate = prevTranslate + dx; setTranslate(currentTranslate); } function onPointerUp(){ if(!isDown) return; isDown = false; track.style.transition = 'transform 0.55s cubic-bezier(.22,.9,.3,1)'; const moved = currentTranslate - prevTranslate; const s = stepWidth(); const threshold = Math.min(80, s * 0.2); if (Math.abs(moved) > threshold){ if (moved < 0) index = index + 1; else index = index - 1; } goTo(index); } // touch events track.addEventListener('touchstart', e => onPointerDown(e.touches[0].clientX), {passive:true}); track.addEventListener('touchmove', e => onPointerMove(e.touches[0].clientX), {passive:false}); track.addEventListener('touchend', onPointerUp); // mouse events track.addEventListener('mousedown', e => { e.preventDefault(); onPointerDown(e.clientX); }); window.addEventListener('mousemove', e => onPointerMove(e.clientX)); window.addEventListener('mouseup', onPointerUp); // keyboard window.addEventListener('keydown', e => { if(e.key === 'ArrowLeft') goTo(index - 1); if(e.key === 'ArrowRight') goTo(index + 1); }); window.addEventListener('resize', ()=> { index = clamp(index); goTo(index, true); }); track.style.transition = 'transform 0.55s cubic-bezier(.22,.9,.3,1)'; goTo(0, true); })(); نسخ الكود

---

التخصيص والتحسين

• تغيير الخلفية الزجاجية: تعديل قيمة rgba أو blur في CSS.

• تغيير عدد البطاقات المعروضة: تعديل خاصية slidesPerView في JS.

• إضافة محتوى جديد: يمكن إضافة أي عنصر HTML داخل .swiper-slide.

• تأثيرات إضافية: يمكنك إضافة Hover Animation للبطاقات، أو تغيير ألوان النصوص لتتناسب مع موقعك.

---

الاستخدامات العملية

• عرض منتجات، صور أو فيديوهات على مدونات ومواقع تجارية.

• مواقع البورتفوليو Portfolio لعرض أعمالك بطريقة جذابة.

• صفحات الهبوط Landing Pages لجذب الزوار بشكل بصري قوي.

• مواقع المسلسلات والأفلام لعرض التقييمات والصور بأسلوب عصري.