Что делать, если при перезагрузке не работает swiper?

Question

[Stoble]

При перезагрузке страницы перестает работать swiper, кнопки все время деактивированы

Comments

[Stoble]

new Swiper('.container__slider',{


    observer: true,
    observeParents: true,
    slidesPerView: 6,

    navigation:{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },

    pagination:{
        el: '.swiper-pagination',
        clickable: true, 
        dynamicBullets: true,
        type: 'progressBar'
    },

    spaceBetween: 40,
    slidesPerGroup: 5,
    speed: 1000
});

[Stoble]

<section class="popular__shoes">
        <div class="container__popular">
            <h3 class="popular__shoes--main--title title">Хиты продаж</h3>
        <div class="container__slider swiper-container">
            <div class="popular__shoes--wrapper swiper-wrapper">
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                <div class="popular__shoes--slide swiper-slide">
                    <div class="popular__shoes--image">
                        <img src="https://via.placeholder.com/250x250/999" alt="">
                    </div>    
                    <div class="popular__shoes--title">Название товара</div>
                    <div class="popular__shoes--cost">Цена товара &#36;</div>
                </div>
                
            </div>
            <div class="swiper-button-prev"></div>   
             <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    </section>

[Danny Arty]

т.е. кнопки вообще не активируются? а можно ссылку на источник?

[Stoble]

Danny Arty, вообще не активируются, что имеет ввиду под источником

[Danny Arty]

Stoble, сайт, на котором не работает. просто по коду, который вы скинули все норм

[Danny Arty]

Stoble, кстати какую версию используете? если v6, то она касячная, попробуйте лучше v5

[Stoble]

Danny Arty, Использую v6, сейчас попробую установить другую

[Stoble]

Danny Arty, Даже не поменял версию и он внезапно заработал, но спасибо за помощь

[Danny Arty]

Stoble, то, что он внезапно заработал - не есть решение) я бы на вашем месте поставил стабильную v5) не за что