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

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

Фильтрация
Сортировка
Метки
0 голосов
0 ответов
13 показов

Как прикрутить 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 ответа
50 показов

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

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

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

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

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

Как можно скрыть на половину блоки,как на макете : Ссылка : 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 ответов
44 показа

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

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

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

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

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

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

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

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

В чем состоит проблема при подключении 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 ответов
44 показа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Swiper slider не переключается слайд в thumbs

Cлева в thumbs, слайды по стрелочкам переключаются только до третьего, но если нажать на сам слайд или на стрелочку которая находиться на главном экране, то все работает. Помогите сделать чтобы в ...
whoismatvei's user avatar
0 голосов
1 ответ
172 показа

Неправильно работает swiper slider

Что-то неправильно стал работать swiper слайдер. Я пробовал добавить в swiper-wraper overlof-hidden, но это не решило мою проблему. Буду рад любой помощи! <link rel="stylesheet" href="https://...
Pavel 's user avatar
  • 333
0 голосов
0 ответов
173 показа

Swiper слайдер выдает ошибку Uncaught ReferenceError: Swiper is not defined

Не пойму почему swiper выдает следующую ошибку. Буду рад любой помощи! <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Swiper demo</...
Pavel 's user avatar
  • 333
0 голосов
0 ответов
28 показов

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

Ребят, есть слайдер пока слайды переключаются заполняется полоска пагинации, при загрузке страницы почему-то не проигрывается до конца анимация полоски пагинации, она доходит до половины и слайд ...
Space_Dip Space_Dip's user avatar
0 голосов
0 ответов
59 показов

В слайдере swipper в битрикс не срабатывает буллеты в пагинации при перелистывание слайдов

В слайдере swipper в битрикс не срабатывают буллеты в пагинации при перелистывание слайдов. Получается что перелистывание на кнопку- у меня булеты переключаются, а вот когда перелистываю мышкой- не ...
Pavel 's user avatar
  • 333
0 голосов
0 ответов
35 показов

Неправильное отображение swiper slider

Возникла такая проблема, мне нужно чтобы с двух стороны были видны картинки, а у меня только с одной, как решить эту проблему. Сейчас у меня отображается вот так А надо вот так Вот сам код этого ...
whoismatvei's user avatar
0 голосов
0 ответов
86 показов

Не работает loop(бесконечный) слайдер swiper

Всем привет! Может кто сможет помочь, почему не работает loop в swiper slider? Ниже код ` const partnersSlider = new Swiper('.partners-slider', { // Optional parameters direction: '...
whoismatvei's user avatar
0 голосов
0 ответов
27 показов

Как Swiper'у задать центральный слайд?

В Swiper есть настройка "centeredSlides: true,", но она применяется сначала к первому слайду и при этом остается пустое место слева. Как задать настройку "centeredSlides: true," с ...
Burr_DI's user avatar
  • 122
0 голосов
0 ответов
61 показ

слайдер с помощью библиотеки swiper

Делаю на сайте блок логотипов партнеров. Установив библиотеку swiper через npm импортирован объект в JS. Слайдер отображается на сайте, при клике мышки есть движения влево и вправо. Но кнопки стрелок ...
And So What's user avatar
0 голосов
1 ответ
75 показов

Конфликт двух swiper js

У меня на странице есть 2 вкладки, в каждой из которой по 2 слайдера. В первой вкладке активный thumbnail показывается первым, а во второй вкладке thumbnail показывается вторым по счету, что является ...
Роман Герасименко's user avatar
0 голосов
1 ответ
52 показа

Как сделать такой карусель на swiper

Как сделать такую верстку через swiper пример карусель https://art-tehnik.ru/ скрин http://joxi.ru/BA0okeETqp0XN2 opacity: 0; transform: translateX(-50%); пробовал через css, но не так работает, как ...
user avatar
0 голосов
1 ответ
148 показов

Swiper slider увеличивается сам по себе

Всем привет! Столкнулся с такой проблемой, что когда я меняю прокрутку для главных фото на горизонтальную, то у меня начинает увеличиваться слайдер до колоссальных размеров каждую секунду. Помогите ...
whoismatvei's user avatar
0 голосов
1 ответ
54 показа

Как можно кастомизировать swiper-slider?

Я подключил слайдер swiper с помощью vue и теперь не пойму как его можно кастомизировать под свои нужды. Я хотел уменьшить ширину и добавить кнопки влево и вправо на слайд. Пробовал прописать в css,но ...
Pavel 's user avatar
  • 333
0 голосов
0 ответов
100 показов

Слайдер Swiper выходит за колонку в Css Grid

У меня Css Grid с двумя колоками в первой слайдер Swiper, во второй картинка. Swiper выходит за колонку и заходит под картинку CSS Grid: Слайдер: swiper.js: import { Pagination } from "swiper&...
Alex Fox's user avatar
  • 171
0 голосов
0 ответов
40 показов

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

Вот тут пытаюсь сделать, но пока все одновременно заполняются, а как сделать по очереди для каждого слайда? или может вообще надо по другому https://codepen.io/dima2323/pen/WNabNKx const ...
Андрей's user avatar
0 голосов
0 ответов
34 показа

Как перейти с swiper js 4 версии на 9

Столкнулся с проблемой: при реализации слайдера на 4 версии swiperjs все работает корректно, при запуске на 9 версии слайдер ломается. Приложу код в codepen, в блоке html закомментировал подключение к ...
Илья's user avatar
0 голосов
1 ответ
93 показа

Как я могу передвинуть навигационные стрелки в swiper? Я использую React

Я хочу передвинуть навигационные стрелки в swiper чуть дальше от рисунков в моем случае div контейнеров. Для этого я импортировал библиотеки Swiper и использую их в React. Для стрелок я использую хук ...
Bale's user avatar
  • 1
0 голосов
0 ответов
63 показа

Почему ломается порядок слайдов после переключения и закрытия слайдера при использовании virtual?

Имеется галерея изображений. При клике на любое изображение в этой галерее показывается созданный слайдер, в качестве текущего изображения показывается то, которое было нажато, слайды переключаются ...
Anton Ryzhenko's user avatar
0 голосов
0 ответов
51 показ

Как доработать блок?

Как доработать блок? Cлайдер работает. Свапом ( в этом и суть). Но раскладка не такая как на скрине. В этом и проблема html, body { position: relative; height: 100%; } body { background: #...
olya096's user avatar
0 голосов
0 ответов
12 показов

Не работает адаптив swiper-слайдера в теге picture

Не работает адаптив swiper-слайдера в теге picture. При изменении ширины экрана изображение с десктопной версии не исчезает, а показывается позади изображения для текущего разрешения. HTML <div ...
Mikhail's user avatar
0 голосов
1 ответ
94 показа

Как сделать пагинацию на каждом слайде Swiper JS [закрыт]

Нужна помощь, ломаю голову, загуглил по разному и не нашел ничего. Проблема в следующем, возможно ли вообще на swiper.js сделать так, чтобы пагинация dots была не вынесена отдельно, а наоборот, ...
Andew's user avatar
  • 29
0 голосов
1 ответ
215 показов

Как скрыть элементы навигации Swiper.js

Итак, в чём суть. Библиотека Swiper сама убирает навигацию когда все элементы помещаются на экран и прокрутка не требуется. Но, мне нужно реализовать так, чтобы даже если они не помещаются, но, ...
Evgeniy Leonidov's user avatar
0 голосов
0 ответов
22 показа

Wordpress - Плагин WP Fastest Cache и swiper слайдер не отображаются стрелки навигации

Если кеширование плагина WP Fastest Cache отключить, то у слайдера стрелки отображаются. Если включить, то вместо стрелок появляется текст 'next' и 'prev'. Может кто подсказать как это исправить?
Dunno's user avatar
  • 5