Javascript used

 <script>

    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");

        var dots = document.getElementsByClassName("dot dot2 dot3 dot4 dot5 dot6");

        if (n > slides.length) {slideIndex = 1} 

        if (n < 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(" active", "");}

        slides[slideIndex-1].style.display = "block";

        dots[slideIndex-1].className += " active";

    } 

</script>

html used

<!-- Slideshow container -->

<div class="slideshow-container">

<div class="row">

<!--ENGAGE-->

  <div class="mySlides fade">

    <div class="text-containter">

      <div class="engage-icon"></div>

       <h5 style="line-height: 1em; margin-top: 15px !important; margin-bottom: 15px !important;">Finly Engage</h5>

      <p>

        Ontvang signalen en verstuur (geautomatiseerd) uitnodigingen aan prospects en klanten en geef hen toegang tot de agenda van jouw verkopers en adviseurs.

      </p>

      <br>

      <a href="/producten#finly-engage" class="iv-button1">

        Bekijk Finly Engage

      </a>

    </div>

  </div>

<!--PLAN-->

 <div class="mySlides fade">

    <div class="text-containter">

	 <div class="plan-icon"></div>

       <h5 style="line-height: 1em; margin-top: 15px !important; margin-bottom: 15px !important;">Finly Plan</h5>

      <p>

        Geef elke prospect en klant de mogelijkheid om online een afspraak te plannen in de agenda van jouw adviseurs en verkopers.

      </p>

      <br>

      <a href="/producten#finly-plan" class="iv-button2">

        Bekijk Finly Plan

      </a>

    </div>

  </div>

<!--PREPARE-->

 <div class="mySlides fade">

    <div class="text-containter">

      <div class="prepare-icon"></div>

       <h5 style="line-height: 1em; margin-top: 15px !important; margin-bottom: 15px !important;">Finly Prepare</h5>

      <p>

        Laat klanten bestanden uploaden, downloaden en ondertekenen en formulieren invullen op de beveiligde voorbereidingspagina.

      </p>

      <br>

      <a href="/producten#finly-prepare" class="iv-button3">

        Bekijk Finly Prepare

      </a>

    </div>

  </div>

<!--MEET-->

 <div class="mySlides fade">

    <div class="text-containter">

      <div class="meet-icon"></div>

       <h5 style="line-height: 1em; margin-top: 15px !important; margin-bottom: 15px !important;">Finly Meet</h5>

      <p>

        Co-browsen en schermdelen, videochat en veilig documenten uitwisselen: alle tools om te scoren in online verkoop- en adviesgesprekken.

      </p>

      <br>

      <a href="/producten#finly-meet" class="iv-button4">

        Bekijk Finly Meet

      </a>

    </div>

  </div>

<!--CLOSE-->

 <div class="mySlides fade">

    <div class="text-containter">

     <div class="close-icon"></div>

       <h5 style="line-height: 1em; margin-top: 15px !important; margin-bottom: 15px !important;">Finly Close</h5>

      <p>

        Laat medewerkers excelleren met een gestructureerd verkoop- of adviesproces en genereer gepersonaliseerde adviesrapporten en voorstellen die tot deals leiden.

      </p>

      <br>

      <a href="/producten#finly-close" class="iv-button5">

        Bekijk Finly Close

      </a>

    </div>

  </div>

  <!--FLOW-->

 <div class="mySlides fade">

    <div class="text-containter">

       <h5 style="line-height: 1em; margin-top: 15px !important; margin-bottom: 15px !important;">Finly Flow</h5>

      <p>

        Flow is het extra brein. Met een workflow zorg je ervoor dat geen enkele klant of prospect van de band valt en dat je volledig grip hebt op je portefeuille.

      </p>

      <br>

      <a href="/producten#finly-flow" class="iv-button6">

        Bekijk Finly Flow

      </a>

    </div>

  </div>  

<!-- The buttons -->

<div style="text-align:center" class="dots-containter">

    <ul>

      <li class="active"><a class="dot" onclick="currentSlide(1)" role="button">ENGAGE</a></li>

      	<p style="margin: 0px !important; color: #ED1B57;">&#8595;</p>

      <li><a class="dot2" onclick="currentSlide(2)" role="button">PLAN</a></li>

    	<p style="margin: 0px !important; color: #ED1B57;">&#8595;</p>	

      <li><a class="dot3" onclick="currentSlide(3)" role="button">PREPARE</a></li>

    	<p style="margin: 0px !important; color: #ED1B57;">&#8595;</p>	

      <li><a class="dot4" onclick="currentSlide(4)" role="button">MEET</a></li>

    	<p style="margin: 0px !important; color: #ED1B57;">&#8595;</p>

      <li><a class="dot5" onclick="currentSlide(5)" role="button">CLOSE</a></li>

    </ul>

  </div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script type="text/javascript">

  	$(document).on('click', 'ul li', function(){

      $(this).addClass('active').siblings().removeClass('active')

    })

</script>

<!-- The flow button -->

  <div style="text-align: center;" class="dots-containter2">

    <span class="dot6" onclick="currentSlide(6)" role="button">FLOW</span>

</div>

	  <div style="height: 415px !important;"  class="iv-bracket"><span></span>

  	</div>

  </div>

</div>

</div>