Как сделать несколько слайд-шоу на одной странице с помощью javascript

Question

W3Schools имеет отличный javascript slideshow с выцветанием и элегантным CSS, который я хочу использовать для моего проекта и отлично работает как одно слайд-шоу. Может ли кто-нибудь показать мне, как изменить этот скрипт, чтобы позволить нескольким слайд-шоу на одной странице работать независимо друг от друга?

Answer 1

Вам просто нужно будет дублировать некоторые HTML и некоторые CSS непосредственно из кода примера для каждого нового слайд-шоу, которое вы хотите. Предоставьте дополнительные изображения, затем измените позиции 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 «сверху», «внизу» и «справа» на позиции, которые вы хотите для новых слайд-шоу.