Javascript 如何将图像的宽度扩展到旋转木马内窗口的宽度？_Javascript_Html_Css_Web_Carousel

Javascript 如何将图像的宽度扩展到旋转木马内窗口的宽度？

javascript html css web

Javascript 如何将图像的宽度扩展到旋转木马内窗口的宽度？,javascript,html,css,web,carousel,Javascript,Html,Css,Web,Carousel,你可以在我的Github页面上看到我的旋转木马。我将.carousel设置为位置：绝对即ul标签。当我点击。右键btn，幻灯片效果就开始工作了。但我使用双显示器，当我将web浏览器窗口水平扩展到显示器的整个宽度时，我可以看到幻灯片中也显示了其他图像。（要检查此问题，我应该水平减小web浏览器的大小，然后刷新页面，然后水平扩展web浏览器）我试着自己修理它。但效果并不好此外，我将在这里包括我的代码 html代码 <!DOCTYPE html> <html lang="

你可以在我的Github页面上看到我的旋转木马。

我将

.carousel

设置为

位置：绝对即ul标签。
当我点击。右键btn，幻灯片效果就开始工作了。但我使用双显示器，当我将web浏览器窗口水平扩展到显示器的整个宽度时，我可以看到幻灯片中也显示了其他图像。
（要检查此问题，我应该水平减小web浏览器的大小，然后刷新页面，然后水平扩展web浏览器）
我试着自己修理它。但效果并不好
此外，我将在这里包括我的代码
html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css?family=Anton|Bowlby+One+SC|PT+Sans+Narrow&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="nav-container">
        <div class="logo">
            LogoShop
        </div>
        <ul class="menu-container">
            <li class="menu-item"><a href="">shirt</a></li>
            <li class="menu-item"><a href="">pants</a></li>
            <li class="menu-item"><a href="">uniform</a></li>
            <li class="menu-item"><a href="">contact</a></li>
        </ul>
    </nav>
    <div class="carousel-container">
        <div class="carousel-wrapper">
            <ul class="carousel">
                <li class="slide active"><img src="images/freestocks-org-_3Q3tsJ01nc-unsplash.jpg" alt=""></li>
                <li class="slide"><img src="images/jonathan-francisca-HY-Nr7GQs3k-unsplash.jpg" alt=""></li>
                <li class="slide"><img src="images/tamara-bellis-0C2qrwkR1dI-unsplash.jpg" alt=""></li>
            </ul>
        </div>
        <button class="btn left-btn"><img src="images/left-arrow.svg" alt=""></button>
        <button class="btn right-btn"><img src="images/right-arrow.svg" alt=""></button>
        <div class="carousel-nav">
            <div class="dot active"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
    <script src="index.js"></script>

</body>
</html>

javascript
const carousel = document.querySelector('.carousel');
const slides = [...carousel.children];
const nextBtn = document.querySelector('.right-btn');
const previousBtn = document.querySelector('.left-btn');

const slideWidth = slides[0].getBoundingClientRect().width;

console.log(slideWidth);

function positionSlides(slides){
    for (let i=0; i<slides.length; i++){
        slides[i].style.left = slideWidth * i + 'px';
    };
};

nextBtn.addEventListener('click', function(){
    const currentSlide = carousel.querySelector('.active');
    const nextSlide = currentSlide.nextElementSibling;
    const position = nextSlide.style.left;

    carousel.style.transform = `translateX(-${position})`;
    currentSlide.classList.remove('active');
    nextSlide.classList.add('active');

});

previousBtn.addEventListener('click', function(){
    const currentSlide = carousel.querySelector('.active');
    const previousSlide = currentSlide.previousElementSibling;
    const position = previousSlide.style.left;

    carousel.style.transform = `translateX(-${position})`;
    currentSlide.classList.remove('active');
    previousSlide.classList.add('active');
});

positionSlides(slides);

const carousel=document.querySelector（'.carousel'）；
const slides=[…carousel.children]；
const nextBtn=document.querySelector（'.right btn'）；
const previousBtn=document.querySelector（'.left btn'）；
const slideWidth=幻灯片[0]。getBoundingClientRect（）.width；
控制台日志（滑动宽度）；
功能定位幻灯片（幻灯片）{
对于（设i=0；i您可以修改CSS规则，如下所示：
   .slide {
      position: absolute;
      border: 1px solid red;
      margin: 0;
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

或
   .slide {
      position: absolute;
      border: 1px solid red;
      margin: 0;
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    .slide {
      width: 100vw;
    }