Вопросы с меткой [swiper]

Ещё никто не добавил руководство по использованию для метки , но есть описание этой метки.

Фильтрация
Сортировка
Метки
-2 голоса
1 ответ
31 показ

Как добавить пагинации класс активности swiper slider при просморенном слайде?

- картинка как должно выглядеть Как добавить класс активности к пагинаци при просмотренном слайде и наоборот убрать, когда отмотали обратно Swiper slider Может можно кастомный progress bar сделать как-...
Майя's user avatar
0 голосов
0 ответов
16 показов

Как сделать адаптивный swiper vue3?

Есть свайпер и нужно как то сделать так, чтобы он был адаптивный. То есть его :slides-per-view="" уменьшалось при определенном размере экрана. (Свайпер подключал через <script src="...
arisha's user avatar
  • 21
0 голосов
1 ответ
23 показа

Почему не работает autoplay в свайпере vue3

Вроде все импортировал, и по документации по сути ничего дополнительного прописывать не надо, но все равно не работает. <script setup> import { Swiper, SwiperSlide } from 'swiper/vue'; import '...
arisha's user avatar
  • 21
0 голосов
0 ответов
20 показов

Как добавить кнопки на каждый слайд, если pagination занят под progressbar?

Всем привет! Делаю слайдер на swiper. В слайдере есть прогрессбар и кнопки для каждого слайда. Вот пример: Вот разметка: <div class="swiper"> <div class="swiper-wrapper"&...
Fresh Carrot's user avatar
0 голосов
0 ответов
24 показа

Подключение Swiper через npm

Хочу подключить Swiper через npm. Я сделал как в инструкции, все установил. Использую я node.js, в проекте создалась папка node_modules, а в ней и папка swiper. Но когда я прописываю данный скрипт, то ...
XlAlbertlX's user avatar
0 голосов
0 ответов
20 показов

Количество отображаемых элементов в направлении в слайдере swiper

Нужно было сделать слайдер из 3 слайдов, чтобы один заменял другой, то есть бесконечный. Сделал я это через библиотеку swiper. Проблема заключается в следующем, когда я вращаю слайдер влево, то есть ...
Egor Givzegud's user avatar
0 голосов
0 ответов
20 показов

Отображение слайдов swiper за границами контейнера

Очень нужна помощь со слайдером. Задача сделать слайдер swiper который будет выходить за пределы контейнера. Нагуглить ничего не удалось. Приложу рисунок. Имеется сайт с определенным контейнером. ...
Sergey Builov's user avatar
0 голосов
0 ответов
32 показа

Переключение слайдов внутри слайдера

В секции 6 табов, внутри которых свои самостоятельные слайдеры (swiper). при нажатии на какой-то таб должен открываться свой слайдер. В целом идея реализована, но стрелки живут своей жизнью: то ...
NikRNN's user avatar
  • 1
0 голосов
1 ответ
38 показов

Баг swiper js на мобильном устройстве (остановка свайпинга после перехода на второй слайд) [закрыт]

Я создал сайт с использованием Swiper JS. В desktop версии все работает нормально, но в мобильной версии на 2-м слайде регистрация свайпов вверх и вниз останавливается. Вот ссылка на сайт: https://...
FACT ECSPERT's user avatar
0 голосов
0 ответов
29 показов

Как исправить некорректную верстку у слайдера Swiper?

использую слайдер Swiper, но почему-то, он корректно работает только при 75% зуме в браузера, если делаю больше, тогда он видимо не понимает какой размер я задал и показывает только пару слайдов, ...
Виталий Тимонин's user avatar
0 голосов
0 ответов
46 показов

swiper vertical touch fade не работает

Столкнулся с такой проблемой. Слайдер vertical на touch экране не отрабатывает. Скрипт для слайдера: createSlider(slider, { modules: [Navigation, Pagination, EffectFade], effect: 'fade', ...
Rusty SPC's user avatar
0 голосов
0 ответов
27 показов

Не получается увязать между собой два элемента swiper

У меня есть два swiper. Необходимо, чтобы при клике на второй swiper (на один из слайдов) , на первом открывался соответствующий слайд (по индексу). Что я делаю не так? И второй отдельный вопрос: ...
Vadim Lyutsko's user avatar
0 голосов
1 ответ
48 показов

Как достучаться до конкретного слайдера в Swiper? (нужно получить индекс для работы табов)

Нужно, чтобы функция срабатывала с конкретным индесом (id) слайдера срабатывала в момент постановки слайдера, а не на onClick. P.s. в API вижу фигу... import React from 'react'; import { Swiper, ...
Vadim Lyutsko's user avatar
0 голосов
0 ответов
38 показов

Как вывести количество активных слайдов Swiper&JS?

Как вывести количество активных слайдов Пример: в скриншоте 4 слайда активный (visible) и показывает 4 / 15; если юзер нажимает на кнопку Next, то так должно быть 5 / 15 в выводе; в мобильной версии ...
Алесь's user avatar
0 голосов
0 ответов
52 показа

Swiper pagination fractions slidesPerView 4

https://stackoverflow.com/questions/63865706/swiper-slide-custom-counter-fractions нашел готовое решение, но он работает только slidesPerView: '1', у меня slidesPerView: '4' и breakpoints как ...
Алесь's user avatar
0 голосов
0 ответов
29 показов

Как настроить swiper в react чтобы слайд всегда был по центру. А если они не помещаются, то первый слайд разрезается и добавляется с краю

Как сделать так, чтобы первый слад разрезался так, чтобы какой-то элемент был по центру, а вторая часть первого слайда добавилось с права? так быть не должно слайд с права должен добавить невидимую ...
PovarCoda's user avatar
0 голосов
0 ответов
34 показа

React Styled Component слайдер в слайдере Swiper js

На странице 2 слайдера. Первый отвечает за пролистывание периода (например, 1987-1991, 1992- 1995, 1996 - 2000 и т д), второй - за пролистывание событий в периоде по каждому году (например, 87, 88, 89,...
dunaissa's user avatar
0 голосов
0 ответов
42 показа

swiper настройка пагинации

Как задать горизонтальному слайдеру вертикальную пагинацию в Swiper var headerSlider = new Swiper(".header-slider__slider", { loop: true, spaceBetween: 10, navigation: { nextEl: &...
Михаил Морозов's user avatar
0 голосов
0 ответов
48 показов

скролл внутри слайда на swiper.js

Всем привет. Делаю следующий функционал: вертикальный swiper.js, первые две секции растянуты на 100vh, последняя секция имеет внутренний скролл с собственным контентом. Реализовал следующим способом ...
yanballas's user avatar
0 голосов
0 ответов
18 показов

при вызове register() из веб компонента Swiper происходит бесконечный вызов жизненого цикла компонента Angular

моя проблема заключается в том что при попытке вызвать register в коде TS у меня происходит бесконечное количество вызовов компонента. По логике компонент перерисовывается когда в нем или в него ...
Zor's user avatar
  • 27
0 голосов
0 ответов
61 показ

слайдер Swiper при клике на кнопки next / prew выделяеться текст заголовка

слайдер Swiper при клике на кнопки next / prew выделяться текст заголовка. Не могу понять из-за чего происходит выделение текста. Тут можно глянуть баг долистав до товаров. https://dmitry-rogg.vn.ua/...
Дмитрий's user avatar
0 голосов
0 ответов
39 показов

Почему не работает скролл на колесико в низ и вверх?

Подскажите , хотел подключить swiper , но столкнулся с проблемой , что не работает смена страниц при скроле колесика мыши в низ и в верх , что не так я написал ? <template> <swiper :...
Young's user avatar
  • 145
0 голосов
0 ответов
27 показов

Как прокручивать swiper на скролл окна вниз?

Коллеги, прошу указать где искать решение САБЖ: Есть страница, на ней есть Swiper слайдер. ЗАДАЧА: Надо запускать его скролл, т.е скроллить слайдер автоматом, самостоятельно, при скролле окна вниз (...
Polina's user avatar
  • 336
0 голосов
0 ответов
20 показов

Как прикрутить swiper, что бы от 300 до 600 px выводился 1 слайд от 600 до 920 2 слайда и если экран больше 920 то 3 слайда и слайдер был не активен

Есть блок. Как к нему прикрутить swiper слайдер, что бы от 300 до 600 px выводился олин слайд от 600 до 920 два слайда и если экран больше 920 то 3 слайда и слайдер был не активен <div class=&...
sap's user avatar
  • 9
0 голосов
2 ответа
164 показа

Не получается сделать бесконечный слайдер

Делаю слайдер через swiper js, нужно чтобы он сам прокручивался без остановки, но у меня получается какая-то фигня. <section class="brands"> <div class="container"&...
protonio's user avatar
0 голосов
0 ответов
119 показов

Swiper как сделать что бы при клике на карточку переходила по ссылке без отработки события клик?

Swiper как сделать что бы при клике на карточку переходила по ссылке без отработки события клик, но при этом сохранилось пролистывание слайдов при наведении мыши <a href="" class="...
Юлия Дьяконова's user avatar
1 голос
0 ответов
84 показа

Как на половину скрыть блоки слайдера,как на макете?

Как можно скрыть на половину блоки,как на макете : Ссылка : https://xd.adobe.com/view/3831e990-1d2a-4aa1-9b83-f0ad445abd5d-6d62/screen/412772a8-93d7-425c-a81d-e3e3329ce836/ Нужно,чтобы первые 4 блока ...
Andrey Prog's user avatar
0 голосов
0 ответов
62 показа

Не корректное отображение изображений swiper

Из-за использования двух foreach, происходит не корректная работа свайпера. Получается, разные картинки на превью и основном слайде. При вынесении foreach выше, на каждую картинку отдельный слайдер с ...
Knm's user avatar
  • 1
0 голосов
0 ответов
65 показов

swiper js не корректно выводит слайды

мне необходимо сделать слайдер на сайте, для этого я использовал библиотеку swiper js. В целом все получилось, но только почему то происходит не корректное отображение слайдов, то есть я хочу что бы ...
НИКИТА ТУМАШЕВИЧ's user avatar
1 голос
1 ответ
53 показа

Сохранение пропорций изображения при изменения ширины

Сделал слайдер на Swiper JS. Хотелось бы, чтобы при изменении ширины экрана, пропорционально изменялась бы и высота картинки. Как это можно сделать? Ссылка на слайдер: [https://codepen.io/oykhflhm-the-...
Роман Герасименко's user avatar
0 голосов
2 ответа
138 показов

Выделение слайдера при использовании Swiper JS

При попытке свайпа в месте между слайдами начинает выделяться слайдер (при чем только на тех слайдах, которые дальше первых слайдов). Можно ли это исправить? var swiper = new Swiper('.swiper-container'...
w1zl's user avatar
  • 1
0 голосов
0 ответов
113 показов

В чем состоит проблема при подключении swiper к react?

Есть проблема при подключении библиотеки swiper к react 18, а именно возникает ошибка Cannot read properties of undefined (reading 'wrapperClass') TypeError: Cannot read properties of undefined (...
Mark Gober's user avatar
1 голос
0 ответов
122 показа

Swiper не корректно работает при трех слайдах

Все привет, столкнулся с рядом проблем слайдера Swiper и не знаю как решить. Необходимо сверстать вот такой слайдер: Сам слайдер идет на всю ширину экрана(при макете 1440px). А слайды в нем имеют ...
Donald-Duck's user avatar
0 голосов
0 ответов
64 показа

Как зациклить слайдер swiper, если не хватает слайдов

Для понимания - одновременно выводится 6 слайдов, а в наличии их 8 всего. Само собой, что для корректной работы зацикливания нужно slidesPerView * 2, но столько слайдов нет. loopedSlides не ...
Евгений's user avatar
0 голосов
0 ответов
115 показов

слайдер Swiper react typescript не настраивается свойство slidesPerView: 'auto'

Спасайте!! Уже несколько часов бьюсь над задачей. У меня в react-приложении есть компонент Slider.tsx. Нужно, чтобы количество слайдеров в слайдере помещалось на всю видимую ширину, независимо от ...
Elena Maslovskaya's user avatar
0 голосов
0 ответов
84 показа

Fade effect у swiper блокирует контент слайда

При использовании у swiper эффекта "fade", блокируется доступ к контенту внутри слайдов (ховер, клики и т.д). Если убрать этот эффект, контент внутри снова откликается на мышь. Использую ...
En Kratia's user avatar
0 голосов
0 ответов
79 показов

Какой слайдер-библиотека обычно используется в React?

При верстке html-css-js для контента по типу изображений в основном используется swiper (имхо). Какой слайдер в основном используется в реакте? Может тоже свайпер, или может вручную пишут?
En Kratia's user avatar
0 голосов
1 ответ
84 показа

Swiper Js autoplay после окончания видео

Не смог найти ответ на вопрос. Делаю слайды, где, в том числе, есть и видео, и картинки. Ставлю свойство autoplay. Все файлы видео и картинок лежат локально. Как заставить переключать на следующий ...
Sergio555's user avatar
0 голосов
0 ответов
99 показов

Как стилизовать .swiper-pagination в swiper?

У меня в js файле прописан следующий код: pagination: { el: '.swiper-pagination', type: 'fraction', formatFractionCurrent: function (number) { return '0' + number; ...
XlAlbertlX's user avatar
0 голосов
0 ответов
31 показ

Одновременное пролистывание нескольких слайдеров Swiper

На странице имеется несколько слайдеров (их количество может быть разное). Как сделать так, чтобы все слайдеры работали как один, например проскролил один и все остальные так же отреагировали? <div ...
  Domi's user avatar
  • 49
2 голоса
0 ответов
97 показов

Проблема с анимацией при ховере на карусели swiper

Суть проблемы: Дизайнер придумал такую анимацию что при ховере на слайд он увеличивается а остальные слайды рядом уменьшаются так что бы 4 слайда (на десктопе) заполняли всю ширину слайдера. Сейчас ...
Shiyan7's user avatar
  • 83
0 голосов
0 ответов
47 показов

Как сделать слайдер с селектом что бы при нажатии на категорию показывались только те картинки которые относятъся к категории

Надо реализовать слайдер с селектом. Есть селект c категориями. При выборе категории нужно что-бы картинки были на слайдере относящиеся только к выбранной категории. Есть вот такая html разметка. <...
Kemal's user avatar
  • 1
0 голосов
1 ответ
92 показа

При обновлении страницы в Swiper слайдер10 мигает первый слайд

Сайт на Wordpress На странице установлен Swiper слайдер 10. На страницу слайдер выводится повторителем ACF Изначально выводится 4 слайда. В момент загрузки/обновления страницы на долю секунды ...
Alandr's user avatar
  • 33
0 голосов
1 ответ
250 показов

Написал swiper, но при увеличении экрана (zoom) ведёт себя ужасно, как исправить?

Написал swiper, но словил баг (при расширении экрана zoom) всё дёргается — видео. Demo. Код swiper: // Initialize Swiper var swiper = new Swiper(".mySwiper", { slidesPerView: "3", pagination: {...
user559066's user avatar
0 голосов
0 ответов
67 показов

Воспроизведение видео в активном слайде Swiper

У меня есть слайдер Swiper, в каждом слайде находится видео. Я хочу сделать так, чтобы в активном слайде автоматически воспроизводилось видео. Возможно ли это реализовать?
Smekalinho's user avatar
0 голосов
1 ответ
77 показов

Как сделать, чтобы слайдер обрезался только с левой стороны?

Как сделать, чтобы слайдер обрезался только с левой стороны? То есть, чтобы с правой стороны он был виден. Сейчас обрезается с двух сторон, схематически на скрине. var swiper = new Swiper("....
frontik's user avatar
0 голосов
0 ответов
68 показов

Как сделать чтобы при смене слайда видео останавливалось

Всем привет использую Swiper 5.3.8 в слайдах есть автоматическая загрузка видео, все работает, но проблема в том, что при изменении слайда, слайд который перестал быть активным все равно проигрывает ...
Иван's user avatar
1 голос
1 ответ
351 показ

Как добавить класс другому блоку в зависимости от слайда swiper.js?

Я использую для слайдера библиотеку swiper.js. Мне необходимо в зависимости от текущего слайда, добавлять класс для header, для того, чтобы текст в нем был другого цвета. Желательно решение на js.
niskofly's user avatar
0 голосов
0 ответов
861 показ

Переключение слайдов в swiper slider

На данный момент когда я в thumbs переключаю слайды, то активный слайд сразу передвигает контейнер, а не идет к нижнему слайду. Сейчас все наглядно покажу. Сейчас у меня вот так а надо при нажатии на ...
Moty's user avatar
  • 7
0 голосов
1 ответ
103 показа

Swiper YouTube Не отображает видео, кроме первого на мобильных

На десктопе всё ок, а на моб нет. Стоит показ по одному слайду, все остальные, где есть видео не отображают предпросмотр с фото и кнопкой. Я понимаю почему - для экономии трафика и нагрузки. Но как ...
Roman Kh's user avatar
  • 652