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

Question

Stoble @Stoble

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

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

Вопрос задан более трёх лет назад
124 просмотра

9 комментариев

Подписаться 1 Средний 9 комментариев

Stoble @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 @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 @DanArst Куратор тега CSS

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

Написано более трёх лет назад
Stoble @Stoble Автор вопроса

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

Написано более трёх лет назад
Danny Arty @DanArst Куратор тега CSS

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

Написано более трёх лет назад
Danny Arty @DanArst Куратор тега CSS

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

Написано более трёх лет назад
Stoble @Stoble Автор вопроса

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

Написано более трёх лет назад
Stoble @Stoble Автор вопроса

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

Написано более трёх лет назад
Danny Arty @DanArst Куратор тега CSS

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

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Академия Eduson

Fullstack-разработчик на JavaScript

11 месяцев

Далее

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как получить события VK.VideoPlayer используя JS?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
CSS

+1 ещё

Простой
Как оптимизировать svg картинку?
- 1 подписчик
- вчера
- 106 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Почему зависает виджет в OBS?
- 1 подписчик
- 10 нояб.
- 136 просмотров
0

ответов
JavaScript

Простой
Смещение группы в fabric.js?
- 1 подписчик
- 06 нояб.
- 121 просмотр
0

ответов
CSS

Средний
Как найти стили в шаблоне Битрикс?
- 1 подписчик
- 06 нояб.
- 152 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 172 просмотра
0

ответов
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 168 просмотров
0

ответов
CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 31 окт.
- 136 просмотров
2

ответа
CSS

Простой
Как правильно задать размеры блоков?
- 1 подписчик
- 31 окт.
- 102 просмотра
1

ответ
HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 176 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Разработчик (Next.js / JavaScript / TypeScript)

App Company

от 200 000 до 300 000 ₽

Web-разработчик/WordPress программист (Full-stack)

JustBusiness • Санкт-Петербург

от 130 000 до 150 000 ₽

React разработчик

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

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 });
т.е. кнопки вообще не активируются? а можно ссылку на источник?
Danny Arty, вообще не активируются, что имеет ввиду под источником
Stoble, сайт, на котором не работает. просто по коду, который вы скинули все норм
Stoble, кстати какую версию используете? если v6, то она касячная, попробуйте лучше v5
Danny Arty, Использую v6, сейчас попробую установить другую
Danny Arty, Даже не поменял версию и он внезапно заработал, но спасибо за помощь
Stoble, то, что он внезапно заработал - не есть решение) я бы на вашем месте поставил стабильную v5) не за что

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт