swiper: второй экземпляр swiper не инициализируется - PullRequest
Новая
       11

swiper: второй экземпляр swiper не инициализируется

0 голосов
/ 03 февраля 2020

на моем сайте я не могу получить второй экземпляр swiper для инициализации. Первый Swiper работает как надо. Второй просто отображает первый слайд.

Я попытался обернуть второй экземпляр в тайм-аут, как некоторые люди рекомендуют. Я также попытался изменить имена переменных (как видно из кода).

Что я делаю не так? Спасибо за вашу помощь!

код выглядит так: 

<script>

    const swiper1 = new Swiper('.s1', {
      cssMode: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination'
      },
      mousewheel: true,
      keyboard: true,
    });

    const swiper2 = new Swiper('.s2', {
      cssMode: true,
      navigation: {
        nextEl: '.next-s2',
        prevEl: '.prev-s2',
      },
      pagination: {
        el: '.pagination-s2'
      },
      mousewheel: true,
      keyboard: true,
    });
  </script>
.swiperSection {
    width: 80%;
    text-align: center;
    margin: auto;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 100%;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-bottom: 1em
}

.swiper-slide p {
    display: block;
}

.swiper-slide a {
    color: #df1e25;
    text-decoration: none;
    cursor: pointer;
}

.quotes {
    background-color: #000;
    color: #fff;
    text-align: center;
}

.quote-sign {
    font-size: 7em;
    font-family: serif;
    color: #df1e25;
    height: 110px;
    margin-top: 1em;
}

.swiper-slide-black {
    background-color: #000;
}

.quotes p {
    font-size: 1em;
    font-style: italic;
}

.quotes h6 {
    color: #df1e25
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>


<div class="content">
        <h1>[...]</h1>
        <div class="swiperSection">
            <div class="swiper-container s1">
                <div class="swiper-wrapper" >
                    <div class="swiper-slide">
                        [...]
                    </div>
                    <div class="swiper-slide">
                        [...]
                    </div>
                    <div class="swiper-slide">
                        [...]
                    </div>
                    <div class="swiper-slide">
                        [...]
                    </div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-black"></div>
                <div class="swiper-button-prev swiper-button-black"></div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-black"></div>
            </div>
        </div>
    </div>

    <div class="quotes">
        <div class="quote-sign">“</div>
        <div class="swiperSection">
            <div class="swiper-container s2">
                <div class="swiper-wrapper" >
                    <div class="swiper-slide swiper-slide-black">
                        [...]
                    </div>
                    <div class="swiper-slide swiper-slide-black">
                        [...]
                    </div>
                    <div class="swiper-slide swiper-slide-black">
                        [...]
                    </div>
                    <div class="swiper-slide swiper-slide-black">
                        [...]
                    </div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-white nex1-s2"></div>
                <div class="swiper-button-prev swiper-button-white prev-s2"></div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-white pagination-s2"></div>
            </div>
        </div>
    </div>

1 Ответ

1 голос
/ 03 февраля 2020

Я получил это работает (ниже). Я думаю, что ответ в том, что у вас есть опечатка в разметке для вашей второй кнопки «Далее». В настоящее время это nex1-s2 и должно быть next-s2, чтобы соответствовать тому, что вы имеете в JavaScript настройке второго слайд-шоу. Легко пропустить, и я поймал его только после того, как некоторое время возился с кодом. 

    const swiper1 = new Swiper('#s1', {
      cssMode: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination'
      },
      mousewheel: true,
      keyboard: true,
    });

    const swiper2 = new Swiper('#s2', {
      cssMode: true,
      navigation: {
        nextEl: '.next-s2',
        prevEl: '.prev-s2',
      },
      pagination: {
        el: '.pagination-s2'
      },
      mousewheel: true,
      keyboard: true,
    });
.swiperSection {
    width: 80%;
    text-align: center;
    margin: auto;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 100%;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-bottom: 1em
}

.swiper-slide p {
    display: block;
}

.swiper-slide a {
    color: #df1e25;
    text-decoration: none;
    cursor: pointer;
}

.quotes {
    background-color: #000;
    color: #fff;
    text-align: center;
}

.quote-sign {
    font-size: 7em;
    font-family: serif;
    color: #df1e25;
    height: 110px;
    margin-top: 1em;
}

.swiper-slide-black {
    background-color: #000;
}

.quotes p {
    font-size: 1em;
    font-style: italic;
}

.quotes h6 {
    color: #df1e25
}
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

<body>
    <div class="content">
        <h1>[...]</h1>
        <div class="swiperSection">
            <div class="swiper-container" id="s1">
                <div class="swiper-wrapper" >
                    <div class="swiper-slide">
                        [aaa]
                    </div>
                    <div class="swiper-slide">
                        [bbb]
                    </div>
                    <div class="swiper-slide">
                        [ccc]
                    </div>
                    <div class="swiper-slide">
                        [ddd]
                    </div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-black"></div>
                <div class="swiper-button-prev swiper-button-black"></div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-black"></div>
            </div>
        </div>
    </div>

    <div class="quotes">
        <div class="quote-sign">“</div>
        <div class="swiperSection">
            <div class="swiper-container" id="s2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-slide-black">
                        [eee]
                    </div>
                    <div class="swiper-slide swiper-slide-black">
                        [fff]
                    </div>
                    <div class="swiper-slide swiper-slide-black">
                        [ggg]
                    </div>
                    <div class="swiper-slide swiper-slide-black">
                        [hhh]
                    </div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-white next-s2"></div>
                <div class="swiper-button-prev swiper-button-white prev-s2"></div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-white pagination-s2"></div>
            </div>
        </div>
    </div>
</body>
</html>
...