时间戳

首页 > 解决方案 > 当用户放大/缩小时保持轮播幻灯片的结构/顺序

javascript - 当用户放大/缩小时保持轮播幻灯片的结构/顺序

问题描述

我有这个我想创建的无限轮播的初始设置。执行时，它使用绝对坐标将幻灯片从 0 到 n 一个接一个地放置，并将最后一个添加到当前幻灯片的左侧。最后，您必须至少能够看到 3 张幻灯片。一个完全可见，另一个太部分可见，无法让用户单击它们并将此幻灯片设置为活动幻灯片（中间的那个）。

如果我放大和缩小一切都开始变得疯狂，并且幻灯片的位置不再正确，因为它们以绝对方式定位，并且根据我放大或缩小，或多或少的宽度可用。

当用户放大和缩小时，如何保持相同的结构（中间的活动幻灯片，以及周围的其他幻灯片）。我已经阅读了一些关于窗口调整大小事件的内容，这可以完成这项工作，但这是一个好习惯吗？通过 resize 事件，我将在窗口更改时收到通知，并且我可以再次相应地重新定位轮播中的所有幻灯片。

let container = document.getElementById("container");
let slides = document.getElementsByClassName("slide");

let colors = ["red", "green","purple","blue"];

let slideWidth = slides[0].offsetWidth;
let slideHeight = slides[0].offsetHeight;
let containerWidth =  container.offsetWidth;

/*console.log("container -> "+containerWidth);
console.log(slideWidth);
console.log(slideHeight);
console.log((containerWidth-slideWidth)/2+"px");*/

for(let i=0 ; i<slides.length; ++i)
{
    slides[i].style.backgroundColor = colors[i];
  slides[i].style.left = `${(slideWidth*i +(containerWidth-slideWidth)/2)}px`;
}

slides[slides.length-1].style.left = `${(-slideWidth +(containerWidth-slideWidth)/2)}px`;
.container {
  display: block;
  width: 100%;
  position:relative;
}


.slide {
  width:80%;
  height:400px;
  flex-shrink:0;
  position:absolute;
}
<html>
  <body>
    <div id="container" class="container">
      <div class="slide"></div>
      <div class="slide"></div>
      <div class="slide"></div>
      <div class="slide"></div>
    </div>  
  </body>
</html>

标签： javascripthtmlcsscarousel

解决方案

推荐阅读