如何用两个活动图像制作画廊图像

如何解决如何用两个活动图像制作画廊图像

我想拥有一个包含3张图片的画廊，但只有一张被隐藏。 （类似此处：http://kenwheeler.github.io/slick/乘以项目） 我编写了代码，但是只有在看到一张照片时才能执行此操作。如何更改此代码以在屏幕上显示2张图片。滑块必须旋转图片，但屏幕上仍显示2张图片，require "addressable" require "net/http" begin uri = Addressable::URI.convert_path('https://api.dictionaryapi.dev/api/v2/entries/pt-BR/há') p uri rescue => error p error end response = Net::HTTP.get(uri) p response 上一张。我应该改变什么？有提示吗？

display:none

    var slideIndex = 1;
    showSlides(slideIndex);

    // Next/previous controls
    function plusSlides(n) {
      showSlides(slideIndex += n);
     }

     // Thumbnail image controls
      function currentSlide(n) {
      showSlides(slideIndex = n);
     }

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

     .prev,.next {
    cursor: pointer;
     position: absolute;
    top: 50%;
     width: auto;
    margin-top: -22px;
     padding: 16px;
     color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
     user-select: none;
   }

   /* Position the "next button" to the right */
   .next {
    right: 0;
    border-radius: 3px 0 0 3px;
   }

    /* On hover,add a black background color with a little bit see-through */
    .prev:hover,.next:hover {
     background-color: rgba(0,0.8);
   }

    /* Caption text */
    .text {
     color: #f2f2f2;
     font-size: 15px;
     padding: 8px 12px;
     position: absolute;
     bottom: 8px;
     width: 100%;
     text-align: center;
     }

    

任何想法它如何工作？