HTML / CSS 全屏轮播图片

Question

在过去的几天里，我一直卡住。我正在尝试创建一个在网页背景中运行的全屏图像滑块，其中包括页面顶部的导航栏覆盖。

HTML：

      <div class="carousel-container">
        <i class="fas fa-arrow-left" id="prevButton"></i>
        <i class="fas fa-arrow-right" id="nextButton"></i> 

        <div id="nav-bar">      
          <nav>
            <ul>
             <li class="current"><a href="index.html">Home</a></li>
             <li><a href="location.html">Location</a></li>
             <li><a href="contact.html">Contact</a></li>
             <li><a href="accomodation.html">Accomodation</a></li>
             <li><a href="rates.html">Rates</a></li>
             <li><a href="gallery.html">Gallery</a></li>
             <li><a href="enquire.html">Enquire</a></li>                        
            </ul>
          </nav>
        </div>

        <div class="carousel-slide">
            <img src="./img/paintlive4.jpg" style="width:100%;" id="lastClone" alt="Living room and fireplace4">
            <img src="./img/paintlive1.png" style="width:100%" alt="Living room and fireplace1">
            <img src="./img/living2.JPG" style="width:100%" alt="Living room and fireplace2">
            <img src="./img/living3.JPG" style="width:100%" alt="Living room and fireplace3">
            <img src="./img/paintlive4.jpg" style="width:100%" id="firstClone" alt="Living room and fireplace4">
          </div>     
      </div>

CSS：

.carousel-container {

    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-position: center;
    background-size: cover;

}

.carousel-slide img{

    height: 700px;
    width: 160%;
    background-position: center;
    background-size: cover;
}

 .carousel-slide{

    display: flex;
    width: 100%;
    height: 490px;
}

如您所见，我已经给出了我能想到的所有内容“宽度：100%”，但我的轮播中的图像大小仍然只是屏幕的一部分。

我对我的导航栏很满意，它会有一些不透明度，以便通过导航栏看到图像。

我已经设法使轮播（使用按钮和 JavaScript）工作，但是一旦图像大小也发生了变化，我将需要对其进行更改。非常感谢您在使这些图像全屏时提供任何帮助，谢谢！

附：对不起，如果格式不好，我是新手程序员:)

Answer 1

这是因为你的显示器是弹性的，女巫让孩子水平了

并从轮播容器中删除高度和宽度（可选）

我添加了 flex-direction: column 这是一个 flex 但不是水平的

.carousel-container {


background-position: center;
background-size: cover;
}

.carousel-slide img{

height: 700px;
width: 160%;
background-position: center;
background-size: cover;
}

.carousel-slide{

display: flex;
 flex-direction: column;
width: 100%;
height: 490px;
}

      <div class="carousel-container">
        <i class="fas fa-arrow-left" id="prevButton"></i>
        <i class="fas fa-arrow-right" id="nextButton"></i> 

        <div id="nav-bar">      
          <nav>
            <ul>
             <li class="current"><a href="index.html">Home</a></li>
             <li><a href="location.html">Location</a></li>
             <li><a href="contact.html">Contact</a></li>
             <li><a href="accomodation.html">Accomodation</a></li>
             <li><a href="rates.html">Rates</a></li>
             <li><a href="gallery.html">Gallery</a></li>
             <li><a href="enquire.html">Enquire</a></li>                        
            </ul>
          </nav>
        </div>

        <div class="carousel-slide">
            <img src="https://picsum.photos/200/300" style="width:100%;" id="lastClone" alt="Living room and fireplace4">
            <img src="https://picsum.photos/200/300" style="width:100%" alt="Living room and fireplace1">
            <img src="https://picsum.photos/200/300" style="width:100%" alt="Living room and fireplace2">
            <img src="https://picsum.photos/200/300" style="width:100%" alt="Living room and fireplace3">
            <img src="https://picsum.photos/200/300" style="width:100%" id="firstClone" alt="Living room and fireplace4">
          </div>     
      </div>

Answer 2

创建轮播的方法有多种，您似乎在这里混用了一些技巧。例如，您在容器中设置了背景大小和位置，但您没有设置背景图像。好的提示是尽可能避免使用内联样式，这样所有样式都在一个地方，并且易于查看和更改（从 HTML 中删除 style="width:100%" 并将其放入 CSS 文件中）。也将您的导航从轮播容器中取出 - 这不应该是轮播的一部分。

如果您想走弹性路线，请尝试以下方法：

#carousel-slide {
   width: 100vw;
   overflow: hidden;
   display: flex;
   align-content: stretch;
}

#carousel-slide img{
   width: 100vw;
   height: auto;
   flex-shrink: 0;
   margin: auto 0;
}

根据图像的大小、屏幕尺寸和您想要的外观，您可以随意调整图像的宽度和高度。如果看起来不错，您可以使用一些 JS 魔法来切换到下一张和上一张幻灯片。 在不编写整个代码的情况下，这就是我最近在类似任务中使用的方法..同样有很多技术可以做到这一点：

//next slide event handler
...
const currentScroll = document.getElementById('carousel-slide').scrollLeft();
const newScroll = currentScroll + window.innerWidth;
//do some cool stuff, or nothing when getting to the end of the slider
document.getElementById('carousel-slide').scrollTo({
        left: newScroll,
        behavior: 'smooth'
    });
...