Omaima Daboos نشر 1 نوفمبر 2023 أرسل تقرير مشاركة نشر 1 نوفمبر 2023 (معدل) كيف أستطيع عمل اسليد لمجموعة من الفديو او مجموعة من محتوى برجراف بإستخدام الدوم بالجافا إسكريبت ؟؟؟؟؟؟؟؟؟؟ تم التعديل في 1 نوفمبر 2023 بواسطة Mustafa Suleiman تعديل عنوان السؤال 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 1 نوفمبر 2023 أرسل تقرير مشاركة نشر 1 نوفمبر 2023 هل المقصود هو إنشاء slider؟ أي كالتالي: في حال كان ذلك المقصود، فهناك مكتبات جاهزة مثل Swiper وsplide وSlick وGlide. ويمكنك تنفيذ ذلك من خلال HTML, CSS, JS أيضًا من الصفر، وإليك مثال بسيط: HTML: <div id="menu"> <div id="nav"> <div id="prev"> <i class="fa-solid fa-chevron-left"></i> </div> <div id="next"> <i class="fa-solid fa-chevron-right"></i> </div> </div> <ul id="cards"> <li id="box1" class="list"> </li> <li id="box2" class="list"> </li> <li id="box3" class="list"> </li> <li id="box4" class="list"> </li> <li id="box5" class="list"> </li> </ul> CSS body{ background: #aeaeae; } .list{ width: 20rem; height: 20rem; background: #e5e5e5; display: inline-block; text-align: center; border-radius: 5%; position: relative; overflow: hidden; margin: 7rem 2rem 0 2rem; cursor: pointer; } #menu { position: relative; width: 90%; height: 26rem; top: 1rem; background-color: rgb(241, 241, 241); margin: 0 7rem 0 5rem; border-radius: 5rem; } #cards { width: 80%; overflow: hidden; white-space: nowrap; display: block; list-style: none; padding: 0; position: relative; left: 10%; bottom: 60px; } .list p{ width: 300px hidden; } #prev { display: inline-block; position: absolute; left: 2%; cursor: pointer; font-size: 60px; z-index: 1; width: 50px; height: 50px; } #next { display: inline-block; position: absolute; right: 2%; cursor: pointer; font-size: 60px; z-index: 1; width: 50px; height: 50px; } #prev, #next{ margin-top: 11rem; color: #aaaaaa; } @media (max-width: 1026px) { #menu { width: 95%; height: 22rem; top: 0.5rem; margin: 0 2% 0 2%; } .list{ width: 17rem; height: 17rem; background: #e5e5e5; display: inline-block; text-align: center; border-radius: 5%; position: relative; overflow: hidden; margin: 6rem 1rem 0 1rem; } #prev, #next{ margin-top: 9.5rem; } } JS document.getElementById('prev').addEventListener('click', function() { const cards = document.getElementById('cards'); cards.scrollLeft -= 500; cards.style.transition = 'scrollLeft 0.5s ease-in-out'; }); document.getElementById('next').addEventListener('click', function() { const cards = document.getElementById('cards'); cards.scrollLeft += 500; cards.style.transition = 'scrollLeft 0.5s ease-in-out'; }); اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 2 نوفمبر 2023 أرسل تقرير مشاركة نشر 2 نوفمبر 2023 بغض النظر عن المحتوى الداخلي للشريحة إلا أن فكرة عارض الشرائح غالبا ما تكون مماثلة لبعضها، وفيما يلي بعض الخطوات العامة لها: قم بإعداد هيكلة عارض الشرائح بشكل مناسب، بحيث يتموضع عدد من الشرائح داخل حاوية واحدة. قم بإضفاء التنسيقات المناسبة وأعط الحاوية وكل عنصر شريحة تنسيقا مناسبا، ونفس الشيء بطبيعة الحال بالنسبة لأزرار Next و Prev. قم بإضافة أحداث جافاسكربت اللازمة، فعند الضغط على Next يتم المرور الى الشريحة التالية بناءا على فهرس الشريحة وترتيبها. والأمر ذاته بالنسبة لزر Prev - طبعا فإنه يمكنك التحكم في طريقة المرور لهاته الشريحة، فقد يكون انزلاقا ببعض تنسيقات css أو الأبسط تماما: اظهار الشريحة المفعلة واخفاء كل ما هو دونها. مثال: <!DOCTYPE html> <html> <head> <style> .slide { display: none; } </style> </head> <body> <div class="slide">Slide 1 - Video 1</div> <div class="slide">Slide 2 - Video 2</div> <button id="prev">Previous</button> <button id="next">Next</button> <script> let currentSlide = 0; const slides = document.querySelectorAll('.slide'); function showSlide(n) { slides[currentSlide].style.display = 'none'; currentSlide = (n + slides.length) % slides.length; slides[currentSlide].style.display = 'block'; } document.getElementById('prev').addEventListener('click', () => showSlide(currentSlide - 1)); document.getElementById('next').addEventListener('click', () => showSlide(currentSlide + 1)); showSlide(currentSlide); </script> </body> </html> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Omaima Daboos
كيف أستطيع عمل اسليد لمجموعة من الفديو او مجموعة من محتوى برجراف بإستخدام الدوم بالجافا إسكريبت ؟؟؟؟؟؟؟؟؟؟
تم التعديل في بواسطة Mustafa Suleimanتعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.