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

问题描述 投票：0回答：1

设计师要求在主页上添加一个滑块部分，格式如下： sliders

我正在尝试找到一种可以实现这种类型滑块的方法，其中：

  1. 单击幻灯片会将幻灯片集中在其他滑块之上，
  2. 幻灯片具有交替位置（参见下面的示例图片）。

这是我所接触到的（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>

javascript css slider
1个回答
0
投票

幻灯片相互重叠的设计方式会导致转换变得困难，因为需要更改 

z-index
，但是这个使用 glide.js 的示例应该可以帮助您了解一种可行的方法。

let glide = new Glide('.glide', {
  type: 'carousel',
  focusAt: 'center',
  perView: 3,
  gap: -50,
  peek: {
    before: 125,
    after: 125
  }
})

glide.mount()
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%;
  padding-top: 50px;
  padding-bottom: 50px;
  overflow: hidden;
}

.slide {
  background: #737373;
  border: 1px solid #fff;
  border-radius: 10px;
}

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

h2 {
  margin-top: 0;
}

p {
  font-size: 1rem;
}


/* glide.js CSS */

.glide__track,
.glide__slides {
  overflow: visible !important;
}

.glide__slide {
  transition: transform 400ms ease;
}

.glide__slide.glide__slide--active {
  transform: translateY(-15px);
  z-index: 2;
}

.glide__slide:has( + .glide__slide.glide__slide--active),
.glide__slide.glide__slide--active+.glide__slide {
  transform: translateY(15px);
  z-index: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>glidejs Slider Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/[email protected]/dist/css/glide.core.min.css">
</head>

<body>
  <div class="slider glide">
    <div class="glide__track" data-glide-el="track">
      <div class="glide__slides">
        <div class="slide glide__slide">
          <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 glide__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 glide__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 glide__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 glide__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>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@glidejs/[email protected]/dist/glide.min.js"></script>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.