أفضل سلايدر كروت احترافي للويب – تصميم عصري متجاوب بالكامل مع الهواتف والكمبيوتر

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

في هذا الموضوع نقدم سلايدر كروت احترافي بستايل عصري وجذاب، متجاوب بالكامل مع جميع الشاشات، سواء الهواتف، التابلت، أو الكمبيوتر.

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

1. تصميم عصري وجذاب
   
   الكروت ذات حواف كهربائية متحركة (Electric Edge Effect) تعطي شعورًا ديناميكيًا وحديثًا.
   
   تأثير الحركة الكهربائية يظهر عند تمرير الماوس على الكرت أو عند الانتقال بين الصور.

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

3. أداء سلس وخفيف
   
   خفيف جدًا ولا يؤثر على سرعة تحميل الموقع.
   
   يعمل بسلاسة عالية دون أي مشاكل عرض أو تقطع الصور.

4. تفاعل المستخدم
   
   يمكن السحب والافلات للصور بواسطة الماوس على الكمبيوتر أو اللمس على الموبايل.
   
   التنقل بواسطة الأسهم الجانبية أو المؤشرات أسفل السلايدر.

5. تصميم ديناميكي للكروت
   
   كل كرت يحتوي على:
   
        صورة أو أيقونة.
       عنوان جذاب.
       زر CTA (Call To Action) جاهز للنقر.
   
   الحواف الكهربائية (Electric Border) تعطي تأثير حركة كهرباء حية حول الكرت عند المرور عليه.

6. تكرار الحركة بدون توقف
   
   السلايدر مصمم بطريقة Loop، بحيث بعد آخر صورة ينتقل تلقائيًا لأول صورة.
   
   الحركة سلسة وطبيعية، بدون أي انقطاع أو تقطع.

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

• المواقع الشخصية: لعرض مشاريعك وأعمالك بطريقة جذابة.

• مدونات بلوجر: لإضافة لمسة احترافية على صفحة المقالات أو الصفحة الرئيسية.

• مواقع الشركات: لعرض الخدمات أو المنتجات بطريقة منظمة وأنيقة.

• متاجر إلكترونية: لعرض المنتجات بشكل جذاب مع إمكانية الضغط على أي بطاقة للشراء.

• Portfolio الأعمال: إبراز مشاريعك بطريقة حديثة، مع حركة كهربائية جذابة على الحواف.

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

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); })(); نسخ الكود

الخلاصة

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

• سهل الدمج مع أي قالب.

• متجاوب بالكامل مع جميع الشاشات.

• تأثير كهربائي ديناميكي يجعل الكروت تنبض بالحياة.