Почему Свайпер js не работает?

Question

[WoodyAndBuzz]

Не могу найти ошибку почему не работает swiper использую плагин swiper js.
https://codepen.io/EdWrightwesr/pen/oNENpRN

Comments

[Антон Литвиненко]

потому что нельзя в теге скрипт писать одновременно src и внутри еще и скрипт

[WoodyAndBuzz]

Все равно тупит

[Антон Литвиненко]

WoodyAndBuzz, потому что неправильно пользуетесь. в поле для скриптов пишут сразу скрипты без тегов. а подключать свайпер нужно через зшестеренку этого поля

[WoodyAndBuzz]

Ну это да, ошибку понял. Там по сути этот скрипт там и не нужен в моем случае. Но он все равно глючит. Не знаю в чем дело, раньше пробовал работало тут нет. Исправил.

Answer 1

[zephire]

Здравствуйте, всё довольно просто, вы используете класс slide у элементов, а нужно swiper-slide

Comments

[WoodyAndBuzz]

А оно должно влиять? Попробовал все равно не работает. может проблема с родительскими блоками. он должен выглядеть так как на картинке изображено, т.е. не целиком один блок на весь экран а по несколько.

[zephire]

WoodyAndBuzz, Сейчас она у вас не работает тк вы вырезали JS) вот мой код https://codepen.io/EdWrightwesr/pen/oNENpRN

[zephire]

WoodyAndBuzz, Чтобы было несколько элементов нужно добавить поле slidesPerView: 1. Где 1 это количество отображаемых элементов за раз, если нужно сделать чтобы второй элемент вылазит не полностью можно сделать к примеру дробное значение 1.6

var swiper = new Swiper(".my__swiper", {
        slidesPerView: 1.6,
        spaceBetween: 5,
      });

[WoodyAndBuzz]

УРЯ! Спасибо, помогло. Даже не знал, что так принципиально надо указывать имена классов.

[zephire]

zephire, P.S код почему не пересохранился и открывается ваша версия, просто сделайте swiper-slide везде и мой js который выше, и всё должно работать.

[zephire]

WoodyAndBuzz, не за что)

[WoodyAndBuzz]

zephire, Не хочу показаться настырным, но может ты знаешь почему когда я задал значение чтобы отображалось сразу два слайда, последний слайд до конца не открывается. Т.е. застревает наполовину. И как это исправить?

[zephire]

WoodyAndBuzz, Привет, не увидел что ты ответил, если проблема еще актуально скинь пример на codepen посмотрю что не так.

[WoodyAndBuzz]

Да. До сих пор не знаю как решить. Проблема возникает при мобильных расширениях, я использовал 375*(неважно). Последний слайд открывается только наполовину, когда применяешь slidesPerView: 2.
https://codepen.io/EdWrightwesr/pen/oNENpRN

[zephire]

WoodyAndBuzz, Привет, нашел в чем была проблема, она заключалась в том что размеры заданы в % и у класса .swiper-wrapper был gap: 20px. Лучше использовать такую запись

var mySwiper = new Swiper ('.swiper-container', {
        slidesPerView: 2,
        spaceBetween: 20
  })

Вот отредактированный код: https://codepen.io/zephiredesign/pen/XWZdjqX

P.s зачастую не вижу что сюда пишите, если что вот телега @zephire_yt

[WoodyAndBuzz]

Спасибо, работает.)