تعطيل شريط التمرير في سلايدر الشاشة الكاملة

لتعطيل شريط التمرير (scroll bar) في السلايدر عند تكبير الشاشة (full screen)، يمكنك استخدام CSS لإخفاء الشريط بشكل ديناميكي باستخدام JavaScript عند الحاجة. يمكنك تحقيق ذلك عن طريق إضافة فئة CSS إلى العنصر الذي تحتوي عليه الصورة في السلايدر، والتبديل بين إظهار وإخفاء شريط التمرير عند الضغط على زر التمرير للأسفل.

هنا مثال على كيفية تحقيق ذلك باستخدام HTML، CSS، و JavaScript:

html
html>
<html>
<head>
    <title>Full Screen Slidertitle>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .slider {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .slide {
            width: 100%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;
            background-color: #ccc;
        }

        .show-scrollbar .slide {
            overflow-y: auto;
        }

        .slide.active {
            display: flex;
        }

        .scroll-down-button {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
        }
    style>
head>
<body>
    <div class="slider">
        <div class="slide active">
            <h1>Slide 1h1>
            <div class="scroll-down-button" onclick="scrollToNextSlide()">Scroll Downdiv>
        div>
        <div class="slide">
            <h1>Slide 2h1>
            <div class="scroll-down-button" onclick="scrollToNextSlide()">Scroll Downdiv>
        div>
        <div class="slide">
            <h1>Slide 3h1>
            <div class="scroll-down-button" onclick="scrollToNextSlide()">Scroll Downdiv>
        div>
    div>

    <script>
        let currentSlideIndex = 0;
        const slides = document.querySelectorAll('.slide');

        function scrollToNextSlide() {
            currentSlideIndex++;
            if (currentSlideIndex >= slides.length) {
                currentSlideIndex = 0;
            }

            slides.forEach((slide, index) => {
                if (index === currentSlideIndex) {
                    slide.classList.add('active');
                } else {
                    slide.classList.remove('active');
                }
            });

            // Check if scroll bar should be shown
            const slider = document.querySelector('.slider');
            if (slider.scrollHeight > slider.clientHeight) {
                slider.classList.add('show-scrollbar');
            } else {
                slider.classList.remove('show-scrollbar');
            }
        }
    script>
body>
html>

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

يمكنك تعديل هذا الكود ليتناسب مع متطلباتك الخاصة بشكل أفضل، مثل تغيير الألوان، وإضافة المزيد من السلايدات، وتخصيص التصميم بشكل عام.

المزيد من المعلومات

فهم مفهوم lvalue و rvalue

كيفية فحص قيمة في القاموس في Python

مقالات ذات صلة

فتح وتحليل بيانات CPS في R

حل مشكلة قراءة البيانات في خدمات REST

إعادة تهيئة منافذ USB في ويندوز

تحقق من صحة السلسلة النصية في Java

أنت تستخدم إضافة Adblock