如何使我的主屏幕滑块响应

Question

我已经集中了我的滑块，一旦我对布局进行排序，我就会将相同大小的图像放入其中。我需要滑块具有响应能力。有人知道我该怎么做吗？

参见html

let slideIndex = 0;
      showSlides();

      function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
          slideIndex = 1;
        }

        slides[slideIndex - 1].style.display = "block";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
      }

.home-container { 
margin: 0px auto; // center
width:1000%;  
text-align:center; 
border-image-width: auto;
overflow: hidden;
} 
.slideshow-container {
   width: 1000%;
    margin: auto;
    position: relative;
   
}


.mySlides {
  display:none;
}



.text {
  color: orange;
  font-size: 60px;
  position: bottom;
  bottom: 8px;
  width: 100%;
  text-align: center;
        
}


.fade {
  animation-name: fade;
  animation-duration: 1.5s;
    align-content: center;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

div class="home-container">

        <div class="slider-container">
                  
          <div class="mySlides fade">
            <img
              src="Media/slider/2.jpg"
              alt="Roller Coaster" height=800px>
            <div class="text">Teddy Tinkers</div>
              
          </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/7.jpg"
              alt="Splash Park"
              height=800px
              >
              <div class="text">Teddy Tinkers</div>
        </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/6.jpg"
              alt="Eating Area"
                 height=800px
              >
              <div class="text">Teddy Tinkers</div>
        </div>
          <div class="mySlides fade">
            <img
              src="Media/slider/8.jpg"
              alt="Park Map"
                 height=800px
              >
              <div class="text">Teddy Tinkers</div>
            </div>
            <div class="mySlides fade">
           <img
              src="Media/slider/10.jpg"
              alt="Park Map"
                height=800px
             >
            <div class="text">Teddy Tinkers</div>
            </div> 
            <div class="mySlides fade">
          <img
              src="Media/slider/11.jpg"
              alt="Park Map"
               height=800px
              >
            <div class="text">Teddy Tinkers</div>
            </div>
            <div class="mySlides fade">
         <img
              src="Media/slider/12.jpg"
              alt="Park Map"
              height=800px
              >
            <div class="text">Teddy Tinkers</div>
            </div>
           </div> 
        
       </div>
        

我希望滑块集中并在较小的屏幕上具有响应能力！任何帮助都会很棒。

我最多会有 20-25 张幻灯片，所以我想我可能需要确保我也添加这个数量的代码？

Answer 1

您可以使用下面的 CSS 使其根据屏幕尺寸负责。

@media only screen and (max-width: 600px) {
    .home-container {
        height:100px;
    }
}

您还可以根据屏幕尺寸自定义CSS。