JSFiddle - React, Tailwind, and code Playground

by Vasiliy

HTML

<div id="adoricMobileCarousel">
  <div class="adoricMobileCarouselSlide active">
  <div class="adoric_element element-image eventOptionsChecked" data-radius="0.00" style="left: 0px; top: 0px; position: absolute; display: flex; flex-direction: column; width: 110px; height: 113px; line-height: normal; opacity: 1; z-index: 126;" data-width="86" data-height="89" data-left="260" data-top="35">
    <a href="#" style="height: 100%; display: block; text-decoration: none; outline: none; border: none;"><img class="inner-element" src="https://adoric-user-images.s3.amazonaws.com/1542209014295_87axy7mwsz3/c.jpg" style="width: 100%; height: 100%; opacity: 1; box-shadow: none; border-radius: 0px; font-size: 2px;" data-event-name="adoric_ced0_62f60a790f50b" data-shadow-distance="0" data-width="NaN" data-height="NaN" data-left="NaN" data-top="NaN"></a>
</div>
<div class="adoric_element element-button" data-radius="0.00" style="left: 0px; top: 118px; position: absolute; width: 110px; height: 26px; opacity: 1; text-align: center; z-index: 133;" data-width="109" data-height="26" data-left="237" data-top="137">
    <button class="inner-element" style="left: 0px; width: 100%; padding: 0px 10px; height: 100%; font-size: 12px; background-color: rgb(255, 255, 255); border: 0px solid rgb(0, 0, 0); border-radius: 0px; letter-spacing: 0em; color: rgb(0, 0, 0); cursor: pointer; line-height: 1; font-family: &quot;Moderat Bold&quot;, sans-serif; outline: none; text-align: inherit; opacity: 1; box-shadow: none; font-weight: normal; text-transform: uppercase;" data-event-name="Conversion" data-shadow-distance="0" data-width="677.1559633027523" data-height="528" data-left="0" data-top="NaN">Curtains1 &gt;</button>
</div>
</div>
<div class="adoricMobileCarouselSlide">
  <div class="adoric_element element-image eventOptionsChecked" data-radius="0.00" style="left: 0px; top: 0px; position: absolute; display: flex; flex-direction: column; width: 110px; height: 113px; line-height: normal; opacity: 1;...

CSS

body {
  background: black;
}

.adoricMobileCarouselSlide {
  display: none;
}

.active {
  display: block;
}

#adoricMobileCarousel {
  
}

JavaScript

/* (function timer(){
setTimeout(function() {
  
  timer();
}, 1000);
})(); */

var nextSlide = document.getElementById('adoricMobileCarousel').firstChild;
console.log(nextSlide);
nextSlide.classList.remove('active');
nextSlide.nextSibling.add('active');
nextSlide = nextSlide.nextSibling;