代码之家 › 专栏 › 技术社区 › Rami Sedhom

具有特定备用位置的Web设计滑块

slider css javascript

Rami Sedhom · 技术社区 · 1 年前

设计者要求在主页上添加以下格式的滑块部分:

我正试图找到一种方法来做这种类型的滑块,使用:

单击幻灯片会将幻灯片集中在其他滑块的顶部,
幻灯片具有交替的位置(请参见下面的示例图像)。

以下是我所接触到的内容(javascript、css和html):

document.addEventListener("DOMContentLoaded", function() {
    const slides = document.querySelectorAll('.slide');
    
    slides.forEach((slide, index) => {
        slide.addEventListener('click', () => {
            slides.forEach(s => s.classList.remove('active'));
            slide.classList.add('active');
            updateSlides();
        });
    });
    
    function updateSlides() {
        slides.forEach((slide, index) => {
            slide.style.zIndex = 'auto';
            slide.style.transform = 'none';
            if (slide.classList.contains('active')) {
                slide.style.zIndex = 5;
                slide.style.transform = 'scale(1.2)';
            } else {
                if (index < slides.length / 2) {
                    slide.style.transform = `translateX(${-(slides.length - index - 1) * 30}%) scale(0.8)`;
                    slide.style.zIndex = slides.length - index;
                } else {
                    slide.style.transform = `translateX(${(index) * 30}%) scale(0.8)`;
                    slide.style.zIndex = index;
                }
            }
        });
    }

    updateSlides();
});

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.slider {
    position: relative;
    width: 100%;
    height: 400px;
    /*overflow: hidden;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide {
    position: absolute;
    width: 20%;
    height: 100%;
    background-color: #333;
    color: #fff;
    border-radius: 25px;
    transition: transform 0.5s ease, z-index 0.5s ease;
    cursor: pointer;
    border: solid;
}

.content {
    text-align: center;
    padding: 20px;
}

h2 {
    margin-top: 0;
}

p {
    font-size: 1rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider">
        <div class="slide active">
            <div class="content">
                <h2>LOREM IPSUM 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <h2>LOREM IPSUM 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <h2>LOREM IPSUM 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <h2>LOREM IPSUM 4</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <h2>LOREM IPSUM 5</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

0 回复 | 直到 1 年前