كيفية إنشاء عرض شرائح لمجموعة من الفيديوهات باستخدام JavaScript

Omaima Daboos · 1 نوفمبر 2023

كيف أستطيع عمل اسليد لمجموعة من الفديو او مجموعة من محتوى برجراف بإستخدام الدوم بالجافا إسكريبت ؟؟؟؟؟؟؟؟؟؟

تم التعديل في 1 نوفمبر 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 1 نوفمبر 2023

هل المقصود هو إنشاء slider؟ أي كالتالي:

1a105c866cd43b61e925767c3f308008.jpg.603d520311d7b2b55791b1eff9a5e7c7.jpg

في حال كان ذلك المقصود، فهناك مكتبات جاهزة مثل 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';
});

Adnane Kadri · 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>

كيفية إنشاء عرض شرائح لمجموعة من الفيديوهات باستخدام JavaScript

السؤال

Omaima Daboos

2 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

Adnane Kadri

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية