如何将幻灯片设置为图像

Question

我想做的是制作一个充满文本的幻灯片，但是，我很难使幻灯片的第一个"幻灯片"仅显示自己，而不是在最初加载页面时显示其他"幻灯片"。

目前，我已经为我的幻灯片放映提供了此代码

<div class="slideshow-container">
          <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <div id="section1" class="prescroll-section"></div>
            <div id="about-section1">
            <p id="about-header1">Lorem Ipsum Times</p>
            <img id="hand-down1" src="../assets/hand-down.png"> 
            <p id="about-description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis nibh elementum vehicula molestie. Donec in vehicula orci. Praesent imperdiet, dolor quis consequat cursus, elit purus mattis dolor, quis tempus nisl odio eu nisi. Morbi eget porta elit. Phasellus non neque vel neque elementum mattis elementum quis quam. Ut hendrerit lorem quis velit luctus condimentum. Donec dui nibh, consectetur eu nisi in, euismod molestie massa. Duis et justo ipsum. Nulla ornare risus vestibulum, imperdiet justo non, finibus ante.</p>
            <img class="about-image-1" src="../assets/smaller-about-description1-image.png">
            <div class="about-divider"></div>
            </div>
          </div>
          <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
                            <div id="section1" class="prescroll-section"></div>
            <div id="about-section1">
            <p id="about-header1">Lorem Ipsum Times</p>
            <img id="hand-down1" src="../assets/hand-down.png"> 
            <p id="about-description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sagittis nibh elementum vehicula molestie. Donec in vehicula orci. Praesent imperdiet, dolor quis consequat cursus, elit purus mattis dolor, quis tempus nisl odio eu nisi. Morbi eget porta elit. Phasellus non neque vel neque elementum mattis elementum quis quam. Ut hendrerit lorem quis velit luctus condimentum. Donec dui nibh, consectetur eu nisi in, euismod molestie massa. Duis et justo ipsum. Nulla ornare risus vestibulum, imperdiet justo non, finibus ante.</p>
            <img class="about-image-1" src="../assets/smaller-about-description1-image.png">
            <div class="about-divider"></div>
          </div>
          <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>

          </div>

        </div>
        <div id="dot-row" style="text-align:center">
          <span class="dot" onclick="currentSlide(1)"></span> 
          <span class="dot" onclick="currentSlide(2)"></span> 
          <span class="dot" onclick="currentSlide(3)"></span> 
        </div>

将 CSS 设置为：

.mySlides {
display: none;}

显然，这将使图像默认隐藏。为了尝试不同的东西，我只是完全删除了它，但这显示了所有的幻灯片。有什么方法可以配置 CSS，使其默认只显示第一张幻灯片？

非常感谢。

Answer 1

您可以在活动类的帮助下做到这一点，第一个块具有活动类，然后交换它，或者您可以使用任何可用的插件或引导轮播

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp