JSFiddle - React, Tailwind, and code Playground

HTML

<input checked="checked" id="tab1" name="tabs" type="radio" /><!--디폴트 메뉴-->
<label for="tab1">탭메뉴1</label>
<input id="tab2" name="tabs" type="radio" />
<label for="tab2">탭메뉴2</label>
 
 
<section id="content1">
content1
    <div class="cgp-panel cgp-1box">
        <div class="cgp-pcontents">
            <div class="cgp-2box float-left">
                <div id="splash-m1" class="splash">
                    <ul class="slides">
                        <img class="slide1" src="http://placehold.it/100x100/cccccc" >
                        <img class="slide1" src="http://placehold.it/100x100/ff0000" >
                        <img class="slide1" src="http://placehold.it/100x100/666666" >
                        <img class="slide1" src="http://placehold.it/100x100/999999" >
                    </ul>
                </div>
            </div>
            <div class="cgp-2box float-right">
                <img src="http://placehold.it/100x100/000000" alt="그림 설명" />
 
            </div>
        </div>
    </div>
</section>
 
<section id="content2">
content2
    <div class="cgp-panel cgp-1box">
        <div class="cgp-pcontents">
            <div class="cgp-2box float-left">
                <div id="splash-m1" class="splash">
                    <ul class="slides">
                        <img class="slide2" src="http://placehold.it/100x100/ff0000" >
                        <img class="slide2" src="http://placehold.it/100x100/000000" >
                        <img class="slide2" src="http://placehold.it/100x100/cccccc" >
                    </ul>
                </div>
            </div>
            <div class="cgp-2box float-right">
                <img src="http://placehold.it/100x100/000000" alt="그림 설명" />
 
            </div>
        </div>
    </div>
</section>

CSS

.slides{
  border:1px solid red;
}

JavaScript

var index = 0;   //이미지에 접근하는 인덱스
    var idx = 0;
    window.onload = function(){
        slideShow();
    }
     
    function slideShow() {
    
    var i;
    var x = document.getElementsByClassName("slide1");
    
    console.log(x.length);
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";   //처음에 전부 display를 none으로 한다.
       console.log(x[i]);
    }
    
    index++;
    console.log(index);
    if (index > x.length) {
        index = 1;  //인덱스가 초과되면 1로 변경
    }   
    x[index-1].style.display = "block";  //해당 인덱스는 block으로
    
    
    var y = document.getElementsByClassName("slide2");
    for (i = 0; i < y.length; i++) {
       y[i].style.display = "none";   //처음에 전부 display를 none으로 한다.
    }
    idx++;
    if (idx > y.length) {
        idx = 1;  //인덱스가 초과되면 1로 변경
    }   
    y[idx-1].style.display = "block";  //해당 인덱스는 block으로
    
    setTimeout(slideShow, 2000);   //함수를 4초마다 호출
	}