分享一个占满屏幕宽度各一半且互不干扰的轮播图

分享一个占满屏幕宽度各一半且互不干扰的轮播图，左右两边各一个轮播图，宽度是屏幕的50%，各一个，支持独立设置轮播时间，支持独立切换，是之前发那个大气轮播图的各占50%两个轮播图的版本呢

注意：里面的img标签没有放图片链接地址，需要自己修改下使用哦

<style>

  /*手机*/
  @media screen and (max-width: 768px) {

  .d-container {
        display: flex;
position: absolute;
    top: 30vh;
    left: 0;

        width: 100vw;
        height: 25vh;
    }

}

  /*电脑*/
  @media screen and (min-width: 769px) {
  .d-container {
        display: flex;
position: absolute;
    top: 200px;
    left: 0;

        width: 100vw;
        height: 700px;
    }
}

    .slideshow-container {
        flex: 1;
        position: relative;
    }

    .mySlides {
        display: none;
        width: 100%;
        height: 100%;
    }

    .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        z-index: 1;
    }

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    }

    .dot-container {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 2;
    }

    .dot {
        display: inline-block;
        width: 15px;
        height: 15px;
        background-color: #bbb;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
    }

    .dot.active {
        background-color: #ffffff;
    }
</style>

<div class="d-container">
  <div class="slideshow-container">
    <div class="mySlides"><img src="" style="width:100%;height:100%"></div>
<div class="mySlides"><img src="" style="width:100%;height:100%"></div>
<div class="mySlides"><img src="" style="width:100%;height:100%"></div>
<div class="mySlides"><img src="" style="width:100%;height:100%"></div>
    <div class="mySlides"><img src="" style="width:100%;height:100%"></div>
    <a class="arrow prev" onclick="plusSlides(-1, this)">&#10094;</a>
    <a class="arrow next" onclick="plusSlides(1, this)">&#10095;</a>
    <div class="dot-container">
      <span class="dot" onclick="currentSlide(1, this)"></span>
      <span class="dot" onclick="currentSlide(2, this)"></span>
      <span class="dot" onclick="currentSlide(3, this)"></span>
      <span class="dot" onclick="currentSlide(4, this)"></span>
      <span class="dot" onclick="currentSlide(5, this)"></span>
    </div>
  </div>

  <div class="slideshow-container">
    <div class="mySlides"><img src="" style="width:100%;height:100%"></div>
    <div class="mySlides"><img src="" style="width:100%;height:100%"></div>
    <a class="arrow prev" onclick="plusSlides(-1, this)">&#10094;</a>
    <a class="arrow next" onclick="plusSlides(1, this)">&#10095;</a>
    <div class="dot-container">
      <span class="dot" onclick="currentSlide(1, this)"></span>
      <span class="dot" onclick="currentSlide(2, this)"></span>
    </div>
  </div>
</div>

<script>
let slideIndex = [1, 1]; // 初始化两个轮播图的索引
let slideContainers = document.getElementsByClassName('slideshow-container');
let slideInterval;

// 显示指定的轮播图
function showSlides(n, containerIndex) {
  let slides = slideContainers[containerIndex].getElementsByClassName('mySlides');
  let dots = slideContainers[containerIndex].getElementsByClassName('dot');

  if (n > slides.length) { slideIndex[containerIndex] = 1; }
  if (n < 1) { slideIndex[containerIndex] = slides.length; }

  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
  }
  for (let i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(' active', '');
  }
  slides[slideIndex[containerIndex] - 1].style.display = 'block';
  dots[slideIndex[containerIndex] - 1].className += ' active';
}

// 切换到上一张或下一张
function plusSlides(n, el) {
  let containerIndex = Array.from(el.closest('.slideshow-container').parentNode.getElementsByClassName('slideshow-container')).indexOf(el.closest('.slideshow-container'));
  showSlides(slideIndex[containerIndex] += n, containerIndex);
}

// 跳转到指定的轮播图
function currentSlide(n, el) {
  let containerIndex = Array.from(el.closest('.slideshow-container').parentNode.getElementsByClassName('slideshow-container')).indexOf(el.closest('.slideshow-container'));
  showSlides(slideIndex[containerIndex] = n, containerIndex);
}

// 自动切换轮播图
function startSlideShow() {
  for (let i = 0; i < slideContainers.length; i++) {
    showSlides(slideIndex[i], i);
  }
  slideInterval = setInterval(function() {
    for (let i = 0; i < slideContainers.length; i++) {
      plusSlides(1, slideContainers[i].querySelector('.arrow.next'));
    }
  }, 3000);
}

// 初始化轮播图
function initSlides() {
  for (let i = 0; i < slideContainers.length; i++) {
    showSlides(slideIndex[i], i);
  }
  startSlideShow();
}

// 直接初始化轮播图
initSlides();
</script>