fullscreenslider-barlaanstinson/index.js

This is a simple JavaScript implementation of a full screen slider. It creates a container with multiple slides, each occupying the entire viewport. Users can scroll horizontally to navigate between slides.

const sliderContainer = document.createElement('div');
sliderContainer.classList.add('slider-container');
const sliderItems = Array.from({ length: 5 }, (_, index) => {
    const sliderItem = document.createElement('div');
    sliderItem.classList.add('slider-item');
    sliderItem.textContent = `Slide ${index + 1}`;
    return sliderItem;
});
sliderItems.forEach(item => sliderContainer.appendChild(item));
document.body.appendChild(sliderContainer);
const style = `
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .slider-container {
        width: 100vw;
        height: 100vh;
        display: flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
    .slider-item {
        flex: 0 0 100%;
        height: 100vh;
        scroll-snap-align: start;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3rem;
        background-color: #f0f0f0;
    }
    .slider-nav {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
    }
    .slider-nav-button {
        padding: 10px;
        background-color: #ffffff;
        border: none;
        cursor: pointer;
    }
    .pagination {
        display: flex;
        gap: 5px;
        justify-content: center;
    }
    .pagination-dot {
        width: 10px;
        height: 10px;
        background-color: #bbb;
        border-radius: 50%;
        cursor: pointer;
    }
    .pagination-dot.active {
        background-color: #888;
    }
`;
const styleTag = document.createElement('style');
styleTag.textContent = style;
document.head.appendChild(styleTag);
const autoSlideInterval = 5000;
let currentIndex = 0;
const navContainer = document.createElement('div');
navContainer.classList.add('slider-nav');
const prevButton = document.createElement('button');
prevButton.classList.add('slider-nav-button');
prevButton.textContent = '<';
const nextButton = document.createElement('button');
nextButton.classList.add('slider-nav-button');
nextButton.textContent = '>';
navContainer.appendChild(prevButton);
navContainer.appendChild(nextButton);
document.body.appendChild(navContainer);
const paginationContainer = document.createElement('div');
paginationContainer.classList.add('pagination');
sliderItems.forEach((_, index) => {
    const dot = document.createElement('div');
    dot.classList.add('pagination-dot');
    if (index === 0) dot.classList.add('active');
    paginationContainer.appendChild(dot);
});
document.body.appendChild(paginationContainer);
function updatePagination(activeIndex) {
    const dots = document.querySelectorAll('.pagination-dot');
    dots.forEach((dot, index) => {
        dot.classList.remove('active');
        if (index === activeIndex) dot.classList.add('active');
    });
}
function scrollToSlide(index) {
    const width = sliderContainer.clientWidth;
    sliderContainer.scrollLeft = width * index;
    currentIndex = index;
    updatePagination(index);
}
prevButton.addEventListener('click', () => {
    let newIndex = currentIndex - 1;
    if (newIndex < 0) newIndex = sliderItems.length - 1;
    scrollToSlide(newIndex);
});
nextButton.addEventListener('click', () => {
    let newIndex = currentIndex + 1;
    if (newIndex >= sliderItems.length) newIndex = 0;
    scrollToSlide(newIndex);
});
setInterval(() => {
    let newIndex = currentIndex + 1;
    if (newIndex >= sliderItems.length) newIndex = 0;
    scrollToSlide(newIndex);
}, autoSlideInterval);
sliderContainer.addEventListener('scroll', () => {
    const index = Math.round(sliderContainer.scrollLeft / sliderContainer.clientWidth);
    if (index !== currentIndex) {
        currentIndex = index;
        updatePagination(index);
    }
});
document.querySelectorAll('.pagination-dot').forEach((dot, index) => {
    dot.addEventListener('click', () => scrollToSlide(index));
});

function toggleFullScreenMode() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}
function shuffleSliderItems() {
    for (let i = sliderContainer.children.length; i >= 0; i--) {
        sliderContainer.appendChild(sliderContainer.children[Math.random() * i | 0]);
    }
    scrollToSlide(0);
}
function changeSliderBackgroundColor() {
    const colors = ['#FFC0CB', '#FFD700', '#FFA07A', '#20B2AA', '#87CEFA'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    sliderContainer.style.backgroundColor = randomColor;
}
function dynamicallyAdjustSliderHeight() {
    window.addEventListener('resize', () => {
        const height = window.innerHeight * 0.8 + 'px';
        sliderContainer.style.height = height;
        sliderItems.forEach(item => item.style.height = height);
    });
}
function addKeyListenerForNavigation() {
    document.addEventListener('keydown', event => {
        if (event.key === 'ArrowLeft') {
            let newIndex = currentIndex - 1;
            if (newIndex < 0) newIndex = sliderItems.length - 1;
            scrollToSlide(newIndex);
        } else if (event.key === 'ArrowRight') {
            let newIndex = currentIndex + 1;
            if (newIndex >= sliderItems.length) newIndex = 0;
            scrollToSlide(newIndex);
        }
    });
}
function generateRandomTextForSlides() {
    const phrases = ['Welcome to our site', 'Enjoy your stay', 'Browse our collection', 'Contact us for more', 'Subscribe for updates'];
    sliderItems.forEach((item, index) => {
        const randomPhrase = phrases[Math.floor(Math.random() * phrases.length)];
        item.textContent = `Slide ${index + 1}: ${randomPhrase}`;
    });
}
function adjustSliderItemFontSizes() {
    sliderItems.forEach(item => {
        const randomFontSize = Math.floor(Math.random() * (5 - 2 + 1) + 2) + 'rem';
        item.style.fontSize = randomFontSize;
    });
}
function createDynamicShadowEffect() {
    sliderItems.forEach(item => {
        const randomH = Math.floor(Math.random() * 360);
        item.style.textShadow = `0px 0px 10px hsl(${randomH}, 100%, 50%)`;
    });
}
function invertSliderColors() {
    sliderContainer.classList.toggle('invert-colors');
    if (!document.querySelector('.invert-colors')) {
        document.documentElement.style.filter = 'invert(100%)';
    } else {
        document.documentElement.style.filter = '';
    }
}
function autoHideNavigationControls() {
    let lastScrollPosition = 0;
    sliderContainer.addEventListener('scroll', () => {
        const currentScrollPosition = sliderContainer.scrollLeft;
        if (currentScrollPosition > lastScrollPosition) {
            navContainer.style.opacity = '0';
        } else {
            navContainer.style.opacity = '1';
        }
        lastScrollPosition = currentScrollPosition;
    });
}