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

你可以在活动类的帮助下完成它，第一个块具有活动类，然后交换它，或者你可以使用任何可用的插件或bootstrap轮播

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

如何将幻灯片设置为图像？

1 个答案: