JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div class="slideShow" id="1">
  <div class="slideDiv slide visible">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 5</div>
</div>

<div class="slideShow2" id="2" style="display:none;">
  <div class="slideDiv slide visible">HELLO 1</div>
  <div class="slideDiv slide">HELLO 2</div>
  <div class="slideDiv slide">HELLO 3</div>
  <div class="slideDiv slide">HELLO 4</div>
  <div class="slideDiv slide">HELLO 5</div>
</div>

<div class="slideShow2" id="3">
  <div class="slideDiv slide visible">
	HELLO 11
	<span class="element">
	</span>
	</div>
  <div class="slideDiv slide">HELLO 22
	<span class="element2">
	</span>
	
	</div>
  <div class="slideDiv slide">HELLO 33
	<span class="element3">
	</span>
	
	</div>
  <div class="slideDiv slide">HELLO 44
	<span class="element4">
	</span>
	
	</div>
  <div class="slideDiv slide">HELLO 55
	<span class="element5">
	</span>
	
	</div>
</div>

CSS

.slide {
  display: none;
  transition: 4s;
}

.visible {
  display: block;
  width: 100%;
  opacity: 100;
}

.slideShow {
  width: 40%;
  display: inline-block;
}
.slideShow2 {
  width: 40%;
  display: inline-block;
}

.slideDiv {
  height: 200px;
  width: 200px;
  background-color: #378B53;
}

.dot {
  display: inline-block;
  cursor: pointer;
}

JavaScript

var slideShows = document.getElementsByClassName("slideShow");
var slideShows2 = document.getElementsByClassName("slideShow2");
var dots = document.getElementsByClassName("dot");
var timers = [];

// Finds all elements by class name and adds an event listener to each.
function addListener(element, listenFor, functionToCall) {
  for (var i = 0; i < element.length; i++) {
    element[i].addEventListener(listenFor, functionToCall);
  }
}

function listen(element, listenFor, functionToCall) {
  element.addEventListener(listenFor, functionToCall);
}

function addDots() {
  for (var i = 0; i < slideShows.length; i++) {
    var slides = slideShows[i].getElementsByClassName("slide");
    for (var j = 0; j < slides.length; j++) {
      var dot = document.createElement("div");
      dot.classList.add("dot");
      dot.innerHTML = "O";
      slideShows[i].appendChild(dot);
    }
  }
}

//addDots();

function nextSlide(slideShowss,i,element=''){
	console.log(i);
    var currentSlideHere = slideShowss[i].getElementsByClassName("visible");
    var dots = slideShowss[i].getElementsByClassName("dot");
    var slides = slideShowss[i].getElementsByClassName("slide");
    var slidesArray = Array.prototype.slice.call(slides);
    var here = slidesArray.indexOf(currentSlideHere[0]);
    //dots[here].style.backgroundColor = "white";
    slides[here].classList.remove("visible");
    here += 1;
    if (here >= slides.length) {
      here = 0;
    }
    slides[here].classList.add("visible");
    //dots[here].style.backgroundColor = "grey";

    console.log(slides[here]);
   
		if(element !=''){
      //$(element).text('');
      //slides[here].find('.element').text('');
     // slides[here].innerHTML='';
      //slides[here].appendChild(listItem);

      // var typed = new Typed(element, {
			// 		 strings: ['HTML', 'PHP', 'MYSQL'],
			// 		 typeSpeed:100,
			// 		 backDelay: 200,
			// 		 smartBackspace: true, // this is a default
			// 		 loop: true
			// 		 });
         
      //     ...