Почему не работает Swiper Slider?

Question

[denism300]

Есть код слайдов:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="banner__img">
                <img src="demo-banner-1.jpg" title="Это пример баннера">
                <div class="banner__inner">
                    <div class="container banner__content">
                        <div class="banner__header"><h2>Это пример баннера</h2></div>
                        <div class="banner__text"><p>Это пример текста, который может быть размещен на баннере.</p></div>
                        <div class="banner__link"><a class="btn" href="#" title="Это пример баннера">Подробнее</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="banner__img">
                <img src="demo-banner-2.jpg" title="Это другой пример баннера">
                <div class="banner__inner">
                    <div class="container banner__content">
                        <div class="banner__header"><h2>Это другой пример баннера</h2></div>
                         <div class="banner__text"><p>Это другой пример текста, который может быть размещен на баннере.</p></div>
                        <div class="banner__link"><a class="btn" href="#" title="Это другой пример баннера">Подробнее</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

инициализирую:

jQuery(document).ready(function() {
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        noSwiping: false,
        autoplay: {
            delay: 3000
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },
    });
});

Загружается только первый слайд и все. Ни автопрокрутка, ни клики по кнопкам вперед/назад не работают.
В консоли ошибок нет.

Answer 1

[Julia Ovod]

А стили для <div class="swiper-container"></div> указаны? Например:

.swiper-container {
    width: 600px;
    height: 300px;
}

Comments

[denism300]

Не были указаны. Указал - ничего не поменялось

[Julia Ovod]

Реализовала ваш код на CodePen, все штатно работает. Возможно, дело в верстке (в которой лежит слайдер), либо какие-то стили перекрывают.