Кастомный Swiper

@AlekseyShing · Регистрация: 29.06.2021

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

Всем привет, делаю кастомный Swiper, не могу понять почему не видно цифр фракции когда листаешь фото

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
<div class="galery__swiper">
          <div class="galery__swiper-btns">
            <button type="button" class="galery__button-prev"></button>
            <div class="swiper-pagination swiper-pagination-fraction">
              <span class="swiper-pagination-current">1</span>
              "/"
              <span class="swiper-pagination-total">2</span>
            </div>
            <button type="button" class="galery__button-next"></button>
          </div>
          <!-- Slider main container -->
          <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide">
                  <img src="img/Rectangle1.jpg" class="" alt="Картина">
              </div>
              <div class="swiper-slide">
                  <img src="img/Rectangle2.jpg" class="" alt="Картина">
              </div>
              <div class="swiper-slide">
                  <img src="img/Rectangle3.jpg" class="" alt="Картина">
              </div>
              <div class="swiper-slide">
                <img src="img/Rectangle4.jpg" class="" alt="Картина">
            </div>
            <div class="swiper-slide">
              <img src="img/Rectangle5.jpg" class="" alt="Картина">
          </div>
          <div class="swiper-slide">
            <img src="img/Rectangle6.jpg" class="" alt="Картина">
        </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.galery__swiper-btns {
  display: flex;
  justify-content: space-between;
  max-width: 130px;
}
 
.swiper-pagination-fraction {
  color: var(--main-color);
}
 
.swiper-pagination-current,
.swiper-pagination-total {
  display: block;
  color: var(--main-color);
}

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
 const swiper = new Swiper('.swiper-container', {
    // Optional parameters
    loop: true,
  
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
      clickable: true,
    },
  
    // Navigation arrows
    navigation: {
      nextEl: '.galery__button-next',
      prevEl: '.galery__button-prev',
    },
  
    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
      allowTouchMove: true,
      slidesPerView: 6,
      spaceBetween: 40,
    },
  });

@mr_dramm · 15.08.2021, 14:29

очевидно потому что вы используете какую то реализацию Swiper в которой не до конца разобрались и пытаетесь переделать, и вместо цифр фракции эта реализация ставит кнопочки вправо влево, а все остальное из контейнера swiper-pagination удаляется. Потому вы и не видете 1/2, эти цифры должен ставить сам Swipper с помощью своей логики прописанной в javascript модуле, а не прописываться в html. A по тому коду что вы опубликовали трудно понять в чем дело.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	15.08.2021, 14:29
	очевидно потому что вы используете какую то реализацию Swiper в которой не до конца разобрались и пытаетесь переделать, и вместо цифр фракции эта реализация ставит кнопочки вправо влево, а все остальное из контейнера `swiper-pagination` удаляется. Потому вы и не видете 1/2, эти цифры должен ставить сам Swipper с помощью своей логики прописанной в javascript модуле, а не прописываться в html. A по тому коду что вы опубликовали трудно понять в чем дело. 0