複数のdivでスライダーが動作しない

Question

スライダースクリプトを呼び出すには、さまざまな4つのdivセクション（つまり、マイページに4つのスライダーがあります）が必要です。これは最初のスライダーのために働いています。すべてのスライダーdivセクションのスクリプトを再利用する必要があります。今度はすべてのスライダが単一のスライダとして扱われます。

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("demo"); 
 
    if (n > x.length) {slideIndex = 1} 
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" w3-red", ""); 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " w3-red"; 
 
}

.mySlides {display:none}

<div class="w3-content" style="max-width:800px"> 
 

 
<div class="mySlides"> 
 
    <div style="width:50%;float:left;"> 
 
     <img src="image/cunsulting-marchandise.jpg" style="width:100%"> 
 
    </div> 
 
    <div style="width:50%;float:right;"> 
 
     <img src="image/cunsulting-marchandise.jpg" style="width:100%"> 
 
    </div> 
 
</div> 
 
<div class="mySlides"> 
 
    <div style="width:50%;float:left;"> 
 
     <img src="image/cunsulting-analytics.jpg" style="width:100%"> 
 
    </div> 
 
    <div style="width:50%;float:right;"> 
 
     <img src="image/cunsulting-analytics.jpg" style="width:100%"> 
 
    </div> 
 
</div> 
 
<div class="mySlides"> 
 
    <div style="width:50%;float:left;"> 
 
     <img src="image/cunsulting-store-solutions.jpg" style="width:100%"> 
 
    </div> 
 
    <div style="width:50%;float:right;"> 
 
     <img src="image/cunsulting-store-solutions.jpg" style="width:100%"> 
 
    </div> 
 
</div> 
 
</div> 
 

 
<div class="w3-center"> 
 
    <div class="w3-section"> 
 
    <button class="w3-btn" onclick="plusDivs(-1)">Prev</button> 
 
    <button class="w3-btn" onclick="plusDivs(1)">Next</button> 
 
    </div> 
 
    <button class="w3-btn demo" onclick="currentDiv(1)">1</button> 
 
    <button class="w3-btn demo" onclick="currentDiv(2)">2</button> 
 
    <button class="w3-btn demo" onclick="currentDiv(3)">3</button> 
 
</div> 
 

 
<div class="w3-content" style="max-width:800px"> 
 

 
<div class="mySlides"> 
 
    <div style="width:50%;float:left;"> 
 
     <img src="image/cunsulting-marchandise.jpg" style="width:100%"> 
 
    </div> 
 
    <div style="width:50%;float:right;"> 
 
     <img src="image/cunsulting-marchandise.jpg" style="width:100%"> 
 
    </div> 
 
</div> 
 
<div class="mySlides"> 
 
    <div style="width:50%;float:left;"> 
 
     <img src="image/cunsulting-analytics.jpg" style="width:100%"> 
 
    </div> 
 
    <div style="width:50%;float:right;"> 
 
     <img src="image/cunsulting-analytics.jpg" style="width:100%"> 
 
    </div> 
 
</div> 
 
<div class="mySlides"> 
 
    <div style="width:50%;float:left;"> 
 
     <img src="image/cunsulting-store-solutions.jpg" style="width:100%"> 
 
    </div> 
 
    <div style="width:50%;float:right;"> 
 
     <img src="image/cunsulting-store-solutions.jpg" style="width:100%"> 
 
    </div> 
 
</div> 
 
</div> 
 

 
<div class="w3-center"> 
 
    <div class="w3-section"> 
 
    <button class="w3-btn" onclick="plusDivs(-1)">Prev</button> 
 
    <button class="w3-btn" onclick="plusDivs(1)">Next</button> 
 
    </div> 
 
    <button class="w3-btn demo" onclick="currentDiv(1)">1</button> 
 
    <button class="w3-btn demo" onclick="currentDiv(2)">2</button> 
 
    <button class="w3-btn demo" onclick="currentDiv(3)">3</button> 
 
</div> 
 

 
<div class="w3-content" style="max-width:800px"> 
 

 
<div class="mySlides"> 
 
    <div style="width:50%;float:left;"> 
 
     <img src="image/cunsulting-marchandise.jpg" style="width:100%"> 
 
    </div> 
 
    <div style="width:50%;float:right;"> 
 
     <img src="image/cunsulting-marchandise.jpg" style="width:100%"> 
 
    </div> 
 
</div> 
 
<div class="mySlides"> 
 
    <div style="width:50%;float:left;"> 
 
     <img src="image/cunsulting-analytics.jpg" style="width:100%"> 
 
    </div> 
 
    <div style="width:50%;float:right;"> 
 
     <img src="image/cunsulting-analytics.jpg" style="width:100%"> 
 
    </div> 
 
</div> 
 
<div class="mySlides"> 
 
    <div style="width:50%;float:left;"> 
 
     <img src="image/cunsulting-store-solutions.jpg" style="width:100%"> 
 
    </div> 
 
    <div style="width:50%;float:right;"> 
 
     <img src="image/cunsulting-store-solutions.jpg" style="width:100%"> 
 
    </div> 
 
</div> 
 
</div> 
 

 
<div class="w3-center"> 
 
    <div class="w3-section"> 
 
    <button class="w3-btn" onclick="plusDivs(-1)">Prev</button> 
 
    <button class="w3-btn" onclick="plusDivs(1)">Next</button> 
 
    </div> 
 
    <button class="w3-btn demo" onclick="currentDiv(1)">1</button> 
 
    <button class="w3-btn demo" onclick="currentDiv(2)">2</button> 
 
    <button class="w3-btn demo" onclick="currentDiv(3)">3</button> 
 
</div> 
 
<div class="w3-center"> 
 
    <div class="w3-section"> 
 
    <button class="w3-btn" onclick="plusDivs(-1)">Prev</button> 
 
    <button class="w3-btn" onclick="plusDivs(1)">Next</button> 
 
    </div> 
 
    <button class="w3-btn demo" onclick="currentDiv(1)">1</button> 
 
    <button class="w3-btn demo" onclick="currentDiv(2)">2</button> 
 
    <button class="w3-btn demo" onclick="currentDiv(3)">3</button> 
 
</div> 
 
<div class="w3-center"> 
 
    <div class="w3-section"> 
 
    <button class="w3-btn" onclick="plusDivs(-1)">Prev</button> 
 
    <button class="w3-btn" onclick="plusDivs(1)">Next</button> 
 
    </div> 
 
    <button class="w3-btn demo" onclick="currentDiv(1)">1</button> 
 
    <button class="w3-btn demo" onclick="currentDiv(2)">2</button> 
 
    <button class="w3-btn demo" onclick="currentDiv(3)">3</button> 
 
</div>

Answer 1

私は、これは例えば新しいものに醜いが、コピーevrythingになります知っている：Myslide1は、第二はMyslide2である第1のスライダです。あなたはミスライドのイムが変わるべきだと言っているので....複数のミスライドがあります。