{% extends 'page.html' %} {% block outside %} <div class="container-fluid hero3 d-flex flex-column justify-content-center"> </div> {% endblock %} {% block js %} <script> var slideIndex = 1; showSlides(slideIndex, 'mySlides1', 'dot1'); showSlides(slideIndex, 'mySlides2', 'dot2'); // Next/previous controls function plusSlides(n, slideName, dotName) { showSlides(slideIndex += n, slideName, dotName); } // Thumbnail image controls function currentSlide(n, slideName, dotName) { showSlides(slideIndex = n, slideName, dotName); } function showSlides(n, slideName, dotName) { var i; var slides = document.getElementsByClassName(slideName); var dots = document.getElementsByClassName(dotName); 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> {% endblock %}