javascriptを使用して1つのページに複数のスライドショーを作成する方法

Question

W3Schoolsは素晴らしいプロジェクトです。退屈でエレガントなCSSを使用しています。誰かが、このスクリプトを変更して、互いに独立して動作する1つのページに複数のスライドショーを作成する方法を教えてもらえますか？

Answer 1

必要な新しいスライドショーごとにサンプルコードからHTMLとCSSを直接​​コピーするだけで済みます。追加画像を提供してから、新しいprevのCSS位置を変更してください。次のボタン。以下では、最初の例に加えて新しいスライドショーに必要なサンプルコードをいくつか変更しました。

<div class="newslideshow-container"> 
<div class="mySlides fade"> 
<div class="numbertext">1/3</div> 
<img src="img4.jpg" style="width:100%"> 
<div class="newtext">Caption Text</div> 
</div> 

<div class="mySlides fade"> 
<div class="newnumbertext">2/3</div> 
<img src="img5.jpg" style="width:100%"> 
<div class="newtext">Caption Two</div> 
</div> 

<div class="mySlides fade"> 
<div class="newnumbertext">3/3</div> 
<img src="img6.jpg" style="width:100%"> 
<div class="newtext">Caption Three</div> 
</div> 

<a id ="prev" class="prev" onclick="plusSlides(-1)">&#10094;</a> 
<a id ="next" class="next" onclick="plusSlides(1)">&#10095;</a> 
</div> 
<br> 

<div style="text-align:center"> 
<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span> 
</div> 

---------- CSS --------------------------

/* Next & previous buttons */ 
    #prev, #next { 
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    margin-top: -22px; 
    padding: 16px; 
    color: white; 
    font-weight: bold; 
    font-size: 18px; 
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0; 
} 

    /* Position the "next button" to the right */ 
    #next { 
    right: 0; 
    border-radius: 3px 0 0 3px; 

    /* Caption text */ 
    .newtext { 
    color: #f2f2f2; 
    font-size: 15px; 
    padding: 8px 12px; 
    position: absolute; 
    bottom: 8px; 
    width: 100%; 
    text-align: center; 
} 

/* Number text (1/3 etc) */ 
.newnumbertext { 
    color: #f2f2f2; 
    font-size: 12px; 
    padding: 8px 12px; 
    position: absolute; 
    top: 0; 
} 

CSSのプロパティ「上」、「下」、「右」を、新しいスライドショーに必要な位置に調整する必要があります。