Как получить несколько слайд-шоу на моем документе html?

Question

Я использую учебное пособие для школ W3 о том, как добавить несколько слайд-шоу в документ HTML: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple

Это ссылка. Однако мой вопрос заключается в том, как добавить 3 слайд-шоу на страницу?

Я попытался скопировать и вставить раздел mySlides2 в классе DIV и изменить его с mySlides2 на mySlides3. И я также добавил mySlides3 ко всему, что ссылается на mySlides2 и 1. Тем не менее, для mySlides3, я получаю только что перечисленные изображения по вертикали вниз и следующий / задний элементы управления, которые управляют mySlides2. Это мой код:

    * {box-sizing: border-box}
    .mySlides1, .mySlides2, .mySlides3 
// When I add .mySlides3 here, the images do not appear at all for .mySlides3
 {display: none}
    img {vertical-align: middle;}

    /* Slideshow container */
    .slideshow-container {
      max-width: 500px;
      position: relative;
      margin: auto;
    }

    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 0%;
      width: auto;
      padding: 50px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 10px 10px 0;
      user-select: none;
    }

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

    /* On hover, add a grey background color */
    .prev:hover, .next:hover {
      background-color: #f1f1f1;
      color: black;
    }

Answer 1

Вы должны внести еще несколько корректировок в код. Ваше третье слайд-шоу должно выглядеть следующим образом:

Затем, ниже, настройте так:

var slideIndex = [2,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);

В основном, в контейнере слайд-шоу для plusDivs (a, b), a относится к увеличивает или уменьшает индекс кнопку, а b указывает, какое слайд-шоу изменяется.

В showDivs (a, b) a указывает, какое изображение отображается, а b указывает, какое слайд-шоу. var slideIndex показывает, какое изображение следует показывать для каждого слайд-шоу.

Answer 2

Несколько слайд-шоу На одной странице

Добавьте для этого какой-нибудь библиотечный файл или CDN CSS CDN

<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet" type="text/css"/>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" type="text/css"/>

JS CDN или скрипт

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" type="text/javascript"></script>

<style>
#slider .container-fluid{
    padding: 0 15px;
}
#slider .slider-inner{
    padding: 0;
}
.slider-inner .item img{
    display: block;
    width: 100%;
    height: auto;
}
.slider-inner h1{
    color: purple;
}
</style>

HTML для слайд-шоу

Слайд-шоу 1

  <section id="slider">
            <div class="container-fluid">
                <div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h1>FIRST</h1>
                    <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
                        <div class="item">
                            <img src="img1.jpg" alt="sliderimg1">                           
                        </div>
                        <div class="item">
                            <img src="img2.png" alt="sliderimg2">
                        </div>
                        <div class="item">
                            <img src="img3.png" alt="sliderimg3">
                        </div>
                        <div class="item">
                            <img src="img4.png" alt="sliderimg3">
                        </div>
                    </div>                                       
                </div>

                <div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h1>SECOND</h1>
                    <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
                        <div class="item">
                            <img src="img1.png" alt="sliderimg1">                           
                        </div>
                        <div class="item">
                            <img src="img2.png" alt="sliderimg2">
                        </div>
                        <div class="item">
                            <img src="img3.png" alt="sliderimg3">
                        </div>
                        <div class="item">
                            <img src="img4.jpg" alt="sliderimg3">
                        </div>
                    </div>                                       
                </div>

                <div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h1>Third</h1>
                    <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
                        <div class="item">
                            <img src="img1.jpg" alt="sliderimg1">                           
                        </div>
                        <div class="item">
                            <img src="img2.png" alt="sliderimg2">
                        </div>
                        <div class="item">
                            <img src="img3.png" alt="sliderimg3">
                        </div>
                        <div class="item">
                            <img src="img4.png" alt="sliderimg3">
                        </div>
                    </div>                                       
                </div>
                <div class="slider-inner col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h1>FOURTH</h1>
                    <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;">
                        <div class="item">
                            <img src="img1.png" alt="sliderimg1">                           
                        </div>
                        <div class="item">
                            <img src="img2png" alt="sliderimg2">
                        </div>
                        <div class="item">
                            <img src="img3.png" alt="sliderimg3">
                        </div>
                        <div class="item">
                            <img src="img4.jpg" alt="sliderimg3">
                        </div>
                    </div>                                       
                </div>
            </div>
   </section>

Java скрипт для слайда шоу

<script>
$(function () {
    var count = 0;
    $('.owl-carousel').each(function () {
        $(this).attr('id', 'owl-demo' + count);
        $('#owl-demo' + count).owlCarousel({
            navigation: true,
            slideSpeed: 300,
            pagination: true,
            singleItem: true,
            autoPlay: 2000,
            autoHeight: true
        });
        count++;
    });
});
</script>

Answer 3

Итак, я проверил код, а также обновил его. В вашем файле HTML есть всего несколько небольших 3-4 изменений. Пожалуйста, замените его своим кодом. В файле CSS нет изменений. Просто замените ваш HTML код файла моим кодом, и вы увидите 3 слайд-шоу.

HTML КОД ФАЙЛА