如何使用 javascript 显示 div 幻灯片？

Question

在 html 中，div 幻灯片可以更改，但是当页面第一次加载时，没有任何视图显示为这样

单击按钮后 div 显示为

知道如何在不单击按钮的情况下显示第一个 div 吗？

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = x.length;
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

<div class="row">
  <div class="col-xs-1">
    <button style="margin-top:70px" onclick="plusDivs(-1)">&#10094;</button>
  </div>
  <div class="col-xs-10">
    <div class="mySlides" v-for="review in reviews">
      <div class="row">
        <div class="col">
          <div class="card">
            <div class="card-body" style="padding:0px">
              <h5 class="card-title text-warning">{{review.name}}</h5>
              <p style="text-align:justify">{{review.review}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-1">
    <button style="margin-top:80px" onclick="plusDivs(1)">&#10095;</button>
  </div>
</div>

Answer 1

鉴于您提供的代码，这些函数看起来应该可以正常工作。但是，假设它不起作用并且仅在按下按钮时起作用，解决该问题的一种方法是使用在 page is fully loaded[=12= 时单击按钮时触发的事件来初始化滑块]

window.addEventListener('load', (event) => {
    plusDivs(1);
});

如何使用 javascript 显示 div 幻灯片？

How to show div slideshow using javascript?

javascript

slideshow

vue.js