Display more than one div at a time in javascripts slide

1

I want to display 3 divs at a time instead of 1. In the below code the class of the div is myslides fade. I want 3 of them at a time. The slide is automatic but has one button also. For example, I want tomatoes, pepper, oranges to be display once and in a single slide. And the next three group together to form another slide. What I presently have is a situation where only tomatoes make a slide. Thanks

    var slideIndex = 0;
    showSlides();
    var slides, dots;

    function showSlides() {
      var i;
      slides = document.getElementsByClassName("mySlides");
      dots = document.getElementsByClassName("dot");
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > slides.length) {
        slideIndex = 1
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" acted", "");
      }
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className += " acted";
      setTimeout(showSlides, 8000); // Change image every 8 seconds
    }

    function plusSlides(position) {
      slideIndex += position;
      if (slideIndex > slides.length) {
        slideIndex = 1
      } else if (slideIndex < 1) {
        slideIndex = slides.length
      }
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" acted", "");
      }
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className += " acted";
    }

    function currentSlide(index) {
      if (index > slides.length) {
        index = 1
      } else if (index < 1) {
        index = slides.length
      }
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" acted", "");
      }
      slides[index - 1].style.display = "block";
      dots[index - 1].className += " acted";
    }

<!-- language: lang-css -->

    #slide {
      width: 40%;
    }

    * {
      box-sizing: border-box
    }

    .mySlides,
    .dot_cover {
      display: none
    }

    .mySlides span {
      border-radius: 40% 20% 20% 40%;
      border: 1px solid #000;
      padding: 15px 20px;
      margin: 0 10px;
    }

    .slideshow-container {
      position: relative;
      margin-top: 40px;
    }

    .slideshow-container img {
      height: 100px;
    }


    /* next_slide & previous buttons */

    .prev,
    .next_slide {
      cursor: pointer;
      position: absolute;
      top: 5px;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
    }


    /* Position the "next_slide button" to the right */

    .next_slide {
      right: 60;
      border-radius: 50% 0 0 50%;
      border-width: 2px;
      border-style: solid;
    }


    /* On hover, add a black background color with a little bit see-through */

    .prev:hover,
    .next_slide:hover {
      background: yellow;
    }


    /* Caption text */

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


    /* The dots/bullets/indicators */

    .dot {
      cursor: pointer;
      height: 13px;
      width: 13px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .acted,
    .dot:hover {
      background-color: #717171;
    }


    /* Fading animation */

    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1s;
      animation-name: fade;
      animation-duration: 1s;
    }

    @-webkit-keyframes fade {
      from {
        opacity: .4
      }
      to {
        opacity: 1
      }
    }

    @keyframes fade {
      from {
        opacity: .4
      }
      to {
        opacity: 1
      }
    }


    /* On smaller screens, decrease text size */

    @media only screen and (max-width: 300px) {
      .text {
        font-size: 11px
      }
    }

    <

<!-- language: lang-html -->

    <div id="slide">
      <div class="slideshow-container">
        <div class="mySlides fade"><span>Tomatoes</span> </div>
        <div class="mySlides fade"><span>Pepper</span> </div>
        <div class="mySlides fade"><span>Oranges</span> </div>
        <div class="mySlides fade"><span>apricot</span> </div>

        <a class="next_slide" onclick="plusSlides(1)">&#10095;</a> </div>

      <div class="dot_cover">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
        <span class="dot" onclick="currentSlide(4)"></span>
      </div>
    </div>

<!-- end snippet -->

Please help me and send the code here. I don’t want jquery ooo. Thank.

2

What the currentSlide() will do then?