Подскажите по слайдеру Swiper, проблема с breakpoints

@Шум · Регистрация: 05.12.2015

Студворк — интернет-сервис помощи студентам

День добрый, проблема с внедрением слайдера, может подскажите чего?
Я его сделал в том виде, когда нужно стрелки навигации вынести за пределы за контейнера слайдера, прописал в это в js, и все работало до той поры, пока не встал вопрос по breakpoints. Когда я прописываю параметры breakpoints слайдер разваливается, принимает непотребный вид. Без breakpoints в дескопте работает отлично...
Что не так?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
          document.querySelectorAll('.swiper-container').forEach(function(elem) {
          new Swiper(elem, {
          slidesPerView: 4,
          spaceBetween: 30,
 
 
    breakpoints: {
          320: {
          slidesPerView: 2,
          spaceBetween: 20
          },
          768: {
          slidesPerView: 2,
          spaceBetween: 30
          },
          1024: {
          slidesPerView: 2,
          spaceBetween: 12
          },
          },
 
 
 
          navigation: {
          nextEl: elem.nextElementSibling.nextElementSibling,
          prevEl: elem.nextElementSibling,
              },
 
            });
          });
        </script>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
        <div class="swiper-object">
        <div class="swiper swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide about-card__img-1">
                <h3 class="about-card__title">
                  Дмитрий Гутенберг
                </h3>
                <p class="about-card__desc">
                  Эксперт (ну, почти) по всем вопросам (почти).
                </p>
              </div>
              <div class="swiper-slide about-card__img-2">
                <h3 class="about-card__title">
                  Анна Васильева
                </h3>
                <p class="about-card__desc">
                  Как я здесь оказалась?<br> А главное — зачем?
                </p>
              </div>
              <div class="swiper-slide about-card__img-3">
                <h3 class="about-card__title">
                  Пётр Дмитриевский
                </h3>
                <p class="about-card__desc">
                  Господа! Внимание! Благодарю за внимание!
                </p>
              </div>
              <div class="swiper-slide about-card__img-4">
                <h3 class="about-card__title">
                  Татьяна Флеганова
                </h3>
                <p class="about-card__desc">
                  Одна я в пальто стою красивая, <br>а вокруг...
                </p>
              </div>
              <div class="swiper-slide about-card__img-5">
                <h3 class="about-card__title">
                  Дмитрий Гутенберг
                </h3>
                <p class="about-card__desc">
                  Эксперт (ну, почти) по всем вопросам (почти).
                </p>
              </div>
              <div class="swiper-slide about-card__img-6">
                <h3 class="about-card__title">
                  Дмитрий Гутенберг
                </h3>
                <p class="about-card__desc">
                  Эксперт (ну, почти) по всем вопросам (почти).
                </p>
              </div>
           </div>
        </div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>

С прописанными breakpoints на десктопе две фото вываливаются вместо трёх, и ничего не меняется при любом расширении экрана.

@gogolik · 24.02.2023, 13:38

Читаем документацию и делаем вывод, что брейкпоинты работают по принципу ОТ стольки-то пикселей. У вас для всех брейкпоинтов 2 слайда, чему удивляться? Дефолтные работают ДО первого брейкпоинта. https://swiperjs.com/swiper-api#param-breakpoints

@Шум · 24.02.2023, 18:17 **[ТС]**

Сообщение от gogolik

Читаем документацию и делаем вывод, что брейкпоинты работают по принципу ОТ стольки-то пикселей. У вас для всех брейкпоинтов 2 слайда, чему удивляться? Дефолтные работают ДО первого брейкпоинта. https://swiperjs.com/swiper-api#param-breakpoints

Спасибо за ответ, но мне всё же не понятно. По умолчанию у меня прописано 4 слайда, и только на брекпоинтах 2 слайда. Но по факту по умолчанию он всё равно два мне показывает, и на брекпоинтах слайдер не перестраивается вообще, ломает сайт..

@gogolik · 24.02.2023, 18:39

Шум, значит, перечитайте ещё раз моё сообщение и в документацию загляните.

Если у вас указаны дефолтные свойства - они применяются ДО первого бейкпоинта (у вас это 320 пикселей).
Если у вас указаны свойства для брейкпоинтов, то они применяются от указанного брейкпоинта до следующего - 1 пиксель. Если следующего брейкпоинта не указано, то свойства для последнего брейкпоинта применяются ко всему, что выше (в вашем случае выше 1024 пикселей).

Перестраиваться некуда, на всех брейкпоинтах (кроме "ниже 320 пикселей") указано 2 слайда. А почему они вылезают за границы - надо смотреть css, который вы не приложили.

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@gogolik Супер-модератор 3970 / 2092 / 832 Регистрация: 13.03.2010 Сообщений: 6,903
	24.02.2023, 13:38
	Читаем документацию и делаем вывод, что брейкпоинты работают по принципу ОТ стольки-то пикселей. У вас для всех брейкпоинтов 2 слайда, чему удивляться? Дефолтные работают ДО первого брейкпоинта. https://swiperjs.com/swiper-api#param-breakpoints 0

@gogolik Супер-модератор 3970 / 2092 / 832 Регистрация: 13.03.2010 Сообщений: 6,903
	24.02.2023, 18:39
	Шум, значит, перечитайте ещё раз моё сообщение и в документацию загляните. Если у вас указаны дефолтные свойства - они применяются ДО первого бейкпоинта (у вас это 320 пикселей). Если у вас указаны свойства для брейкпоинтов, то они применяются от указанного брейкпоинта до следующего - 1 пиксель. Если следующего брейкпоинта не указано, то свойства для последнего брейкпоинта применяются ко всему, что выше (в вашем случае выше 1024 пикселей). Перестраиваться некуда, на всех брейкпоинтах (кроме "ниже 320 пикселей") указано 2 слайда. А почему они вылезают за границы - надо смотреть css, который вы не приложили. 0