Вопросы с меткой [swiper]
Ещё никто не добавил руководство по использованию для метки swiper, но есть описание этой метки.
239
вопросов
0
голосов
0
ответов
13
показов
Как прикрутить swiper, что бы от 300 до 600 px выводился 1 слайд от 600 до 920 2 слайда и если экран больше 920 то 3 слайда и слайдер был не активен
Есть блок. Как к нему прикрутить swiper слайдер, что бы от 300 до 600 px выводился олин слайд от 600 до 920 два слайда и если экран больше 920 то 3 слайда и слайдер был не активен
<div class=&...
0
голосов
2
ответа
50
показов
Не получается сделать бесконечный слайдер
Делаю слайдер через swiper js, нужно чтобы он сам прокручивался без остановки, но у меня получается какая-то фигня.
<section class="brands">
<div class="container"&...
0
голосов
0
ответов
16
показов
Swiper как сделать что бы при клике на карточку переходила по ссылке без отработки события клик?
Swiper как сделать что бы при клике на карточку переходила по ссылке без отработки события клик, но при этом сохранилось пролистывание слайдов при наведении мыши
<a href="" class="...
1
голос
0
ответов
39
показов
Как на половину скрыть блоки слайдера,как на макете?
Как можно скрыть на половину блоки,как на макете :
Ссылка : https://xd.adobe.com/view/3831e990-1d2a-4aa1-9b83-f0ad445abd5d-6d62/screen/412772a8-93d7-425c-a81d-e3e3329ce836/
Нужно,чтобы первые 4 блока ...
0
голосов
0
ответов
44
показа
Не корректное отображение изображений swiper
Из-за использования двух foreach, происходит не корректная работа свайпера. Получается, разные картинки на превью и основном слайде. При вынесении foreach выше, на каждую картинку отдельный слайдер с ...
0
голосов
0
ответов
17
показов
swiper js не корректно выводит слайды
мне необходимо сделать слайдер на сайте, для этого я использовал библиотеку swiper js. В целом все получилось, но только почему то происходит не корректное отображение слайдов, то есть я хочу что бы ...
1
голос
1
ответ
26
показов
Сохранение пропорций изображения при изменения ширины
Сделал слайдер на Swiper JS.
Хотелось бы, чтобы при изменении ширины экрана, пропорционально изменялась бы и высота картинки.
Как это можно сделать?
Ссылка на слайдер:
[https://codepen.io/oykhflhm-the-...
0
голосов
2
ответа
30
показов
Выделение слайдера при использовании Swiper JS
При попытке свайпа в месте между слайдами начинает выделяться слайдер (при чем только на тех слайдах, которые дальше первых слайдов). Можно ли это исправить?
var swiper = new Swiper('.swiper-container'...
0
голосов
0
ответов
24
показа
В чем состоит проблема при подключении swiper к react?
Есть проблема при подключении библиотеки swiper к react 18, а именно возникает ошибка Cannot read properties of undefined (reading 'wrapperClass')
TypeError: Cannot read properties of undefined (...
1
голос
0
ответов
44
показа
Swiper не корректно работает при трех слайдах
Все привет, столкнулся с рядом проблем слайдера Swiper и не знаю как решить. Необходимо сверстать вот такой слайдер:
Сам слайдер идет на всю ширину экрана(при макете 1440px). А слайды в нем имеют ...
0
голосов
0
ответов
28
показов
Как зациклить слайдер swiper, если не хватает слайдов
Для понимания - одновременно выводится 6 слайдов, а в наличии их 8 всего. Само собой, что для корректной работы зацикливания нужно slidesPerView * 2, но столько слайдов нет. loopedSlides не ...
0
голосов
0
ответов
46
показов
слайдер Swiper react typescript не настраивается свойство slidesPerView: 'auto'
Спасайте!! Уже несколько часов бьюсь над задачей. У меня в react-приложении есть компонент Slider.tsx. Нужно, чтобы количество слайдеров в слайдере помещалось на всю видимую ширину, независимо от ...
0
голосов
0
ответов
23
показа
Fade effect у swiper блокирует контент слайда
При использовании у swiper эффекта "fade", блокируется доступ к контенту внутри слайдов (ховер, клики и т.д). Если убрать этот эффект, контент внутри снова откликается на мышь.
Использую ...
0
голосов
0
ответов
33
показа
Какой слайдер-библиотека обычно используется в React?
При верстке html-css-js для контента по типу изображений в основном используется swiper (имхо).
Какой слайдер в основном используется в реакте? Может тоже свайпер, или может вручную пишут?
0
голосов
0
ответов
17
показов
Swiper Js autoplay после окончания видео
Не смог найти ответ на вопрос. Делаю слайды, где, в том числе, есть и видео, и картинки. Ставлю свойство autoplay. Все файлы видео и картинок лежат локально. Как заставить переключать на следующий ...
0
голосов
0
ответов
34
показа
Как стилизовать .swiper-pagination в swiper?
У меня в js файле прописан следующий код:
pagination: {
el: '.swiper-pagination',
type: 'fraction',
formatFractionCurrent: function (number) {
return '0' + number;
...
0
голосов
0
ответов
21
показ
Одновременное пролистывание нескольких слайдеров Swiper
На странице имеется несколько слайдеров (их количество может быть разное). Как сделать так, чтобы все слайдеры работали как один, например проскролил один и все остальные так же отреагировали?
<div ...
2
голоса
0
ответов
76
показов
Проблема с анимацией при ховере на карусели swiper
Суть проблемы:
Дизайнер придумал такую анимацию что при ховере на слайд он увеличивается а остальные слайды рядом уменьшаются так что бы 4 слайда (на десктопе) заполняли всю ширину слайдера. Сейчас ...
0
голосов
0
ответов
28
показов
Как сделать слайдер с селектом что бы при нажатии на категорию показывались только те картинки которые относятъся к категории
Надо реализовать слайдер с селектом. Есть селект c категориями. При выборе категории нужно что-бы картинки были на слайдере относящиеся только к выбранной категории.
Есть вот такая html разметка.
<...
0
голосов
1
ответ
36
показов
При обновлении страницы в Swiper слайдер10 мигает первый слайд
Сайт на Wordpress
На странице установлен Swiper слайдер 10.
На страницу слайдер выводится повторителем ACF
Изначально выводится 4 слайда.
В момент загрузки/обновления страницы на долю секунды ...
0
голосов
1
ответ
107
показов
Написал swiper, но при увеличении экрана (zoom) ведёт себя ужасно, как исправить?
Написал swiper, но словил баг (при расширении экрана zoom) всё дёргается — видео.
Demo.
Код swiper:
// Initialize Swiper
var swiper = new Swiper(".mySwiper", {
slidesPerView: "3",
pagination: {...
0
голосов
0
ответов
20
показов
Воспроизведение видео в активном слайде Swiper
У меня есть слайдер Swiper, в каждом слайде находится видео. Я хочу сделать так, чтобы в активном слайде автоматически воспроизводилось видео. Возможно ли это реализовать?
0
голосов
1
ответ
37
показов
Как сделать, чтобы слайдер обрезался только с левой стороны?
Как сделать, чтобы слайдер обрезался только с левой стороны?
То есть, чтобы с правой стороны он был виден. Сейчас обрезается с двух сторон, схематически на скрине.
var swiper = new Swiper("....
0
голосов
0
ответов
37
показов
Как сделать чтобы при смене слайда видео останавливалось
Всем привет использую Swiper 5.3.8 в слайдах есть автоматическая загрузка видео, все работает, но проблема в том, что при изменении слайда, слайд который перестал быть активным все равно проигрывает ...
1
голос
1
ответ
98
показов
Как добавить класс другому блоку в зависимости от слайда swiper.js?
Я использую для слайдера библиотеку swiper.js. Мне необходимо в зависимости от текущего слайда, добавлять класс для header, для того, чтобы текст в нем был другого цвета. Желательно решение на js.
0
голосов
0
ответов
365
показов
Переключение слайдов в swiper slider
На данный момент когда я в thumbs переключаю слайды, то активный слайд сразу передвигает контейнер, а не идет к нижнему слайду. Сейчас все наглядно покажу. Сейчас у меня вот так
а надо при нажатии на ...
0
голосов
1
ответ
41
показ
Swiper YouTube Не отображает видео, кроме первого на мобильных
На десктопе всё ок, а на моб нет. Стоит показ по одному слайду, все остальные, где есть видео не отображают предпросмотр с фото и кнопкой. Я понимаю почему - для экономии трафика и нагрузки. Но как ...
0
голосов
0
ответов
110
показов
Swiper slider не переключается слайд в thumbs
Cлева в thumbs, слайды по стрелочкам переключаются только до третьего, но если нажать на сам слайд или на стрелочку которая находиться на главном экране, то все работает. Помогите сделать чтобы в ...
0
голосов
1
ответ
172
показа
Неправильно работает swiper slider
Что-то неправильно стал работать swiper слайдер. Я пробовал добавить в swiper-wraper overlof-hidden, но это не решило мою проблему. Буду рад любой помощи!
<link rel="stylesheet" href="https://...
0
голосов
0
ответов
173
показа
Swiper слайдер выдает ошибку Uncaught ReferenceError: Swiper is not defined
Не пойму почему swiper выдает следующую ошибку. Буду рад любой помощи!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</...
0
голосов
0
ответов
28
показов
Проблема со swiper, не проигрывается не до конца анимация пагинации
Ребят, есть слайдер пока слайды переключаются заполняется полоска пагинации, при загрузке
страницы почему-то не проигрывается до конца анимация полоски пагинации, она доходит до половины
и слайд ...
0
голосов
0
ответов
59
показов
В слайдере swipper в битрикс не срабатывает буллеты в пагинации при перелистывание слайдов
В слайдере swipper в битрикс не срабатывают буллеты в пагинации при перелистывание слайдов. Получается что перелистывание на кнопку- у меня булеты переключаются, а вот когда перелистываю мышкой- не ...
0
голосов
0
ответов
35
показов
Неправильное отображение swiper slider
Возникла такая проблема, мне нужно чтобы с двух стороны были видны картинки, а у меня только с одной, как решить эту проблему. Сейчас у меня отображается вот так
А надо вот так
Вот сам код этого ...
0
голосов
0
ответов
86
показов
Не работает loop(бесконечный) слайдер swiper
Всем привет! Может кто сможет помочь, почему не работает loop в swiper slider? Ниже код `
const partnersSlider = new Swiper('.partners-slider', {
// Optional parameters
direction: '...
0
голосов
0
ответов
27
показов
Как Swiper'у задать центральный слайд?
В Swiper есть настройка "centeredSlides: true,", но она применяется сначала к первому слайду и при этом остается пустое место слева.
Как задать настройку "centeredSlides: true," с ...
0
голосов
0
ответов
61
показ
слайдер с помощью библиотеки swiper
Делаю на сайте блок логотипов партнеров. Установив библиотеку swiper через npm импортирован объект в JS. Слайдер отображается на сайте, при клике мышки есть движения влево и вправо. Но кнопки стрелок ...
0
голосов
1
ответ
75
показов
Конфликт двух swiper js
У меня на странице есть 2 вкладки, в каждой из которой по 2 слайдера.
В первой вкладке активный thumbnail показывается первым, а во второй вкладке thumbnail показывается вторым по счету, что является ...
0
голосов
1
ответ
52
показа
Как сделать такой карусель на swiper
Как сделать такую верстку через swiper
пример карусель
https://art-tehnik.ru/
скрин
http://joxi.ru/BA0okeETqp0XN2
opacity: 0;
transform: translateX(-50%);
пробовал через css, но не так работает, как ...
0
голосов
1
ответ
148
показов
Swiper slider увеличивается сам по себе
Всем привет! Столкнулся с такой проблемой, что когда я меняю прокрутку для главных фото на горизонтальную, то у меня начинает увеличиваться слайдер до колоссальных размеров каждую секунду. Помогите ...
0
голосов
1
ответ
54
показа
Как можно кастомизировать swiper-slider?
Я подключил слайдер swiper с помощью vue и теперь не пойму как его можно кастомизировать под свои нужды. Я хотел уменьшить ширину и добавить кнопки влево и вправо на слайд. Пробовал прописать в css,но ...
0
голосов
0
ответов
100
показов
Слайдер Swiper выходит за колонку в Css Grid
У меня Css Grid с двумя колоками в первой слайдер Swiper, во второй картинка.
Swiper выходит за колонку и заходит под картинку
CSS Grid:
Слайдер:
swiper.js:
import { Pagination } from "swiper&...
0
голосов
0
ответов
40
показов
Как в слайдере Swiper сделать автоматически заполняющийся прогрессбар
Вот тут пытаюсь сделать, но пока все одновременно заполняются, а как сделать по очереди для каждого слайда? или может вообще надо по другому
https://codepen.io/dima2323/pen/WNabNKx
const ...
0
голосов
0
ответов
34
показа
Как перейти с swiper js 4 версии на 9
Столкнулся с проблемой: при реализации слайдера на 4 версии swiperjs все работает корректно, при запуске на 9 версии слайдер ломается.
Приложу код в codepen, в блоке html закомментировал подключение к ...
0
голосов
1
ответ
93
показа
Как я могу передвинуть навигационные стрелки в swiper? Я использую React
Я хочу передвинуть навигационные стрелки в swiper чуть дальше от рисунков в моем случае div контейнеров. Для этого я импортировал библиотеки Swiper и использую их в React. Для стрелок я использую хук ...
0
голосов
0
ответов
63
показа
Почему ломается порядок слайдов после переключения и закрытия слайдера при использовании virtual?
Имеется галерея изображений. При клике на любое изображение в этой галерее показывается созданный слайдер, в качестве текущего изображения показывается то, которое было нажато, слайды переключаются ...
0
голосов
0
ответов
51
показ
Как доработать блок?
Как доработать блок?
Cлайдер работает. Свапом ( в этом и суть). Но раскладка не такая как на скрине. В этом и проблема
html,
body {
position: relative;
height: 100%;
}
body {
background: #...
0
голосов
0
ответов
12
показов
Не работает адаптив swiper-слайдера в теге picture
Не работает адаптив swiper-слайдера в теге picture. При изменении ширины экрана изображение с десктопной версии не исчезает, а показывается позади изображения для текущего разрешения.
HTML
<div ...
0
голосов
1
ответ
94
показа
Как сделать пагинацию на каждом слайде Swiper JS [закрыт]
Нужна помощь, ломаю голову, загуглил по разному и не нашел ничего.
Проблема в следующем, возможно ли вообще на swiper.js сделать так, чтобы пагинация dots была не вынесена отдельно, а наоборот, ...
0
голосов
1
ответ
215
показов
Как скрыть элементы навигации Swiper.js
Итак, в чём суть. Библиотека Swiper сама убирает навигацию когда все элементы помещаются на экран и прокрутка не требуется. Но, мне нужно реализовать так, чтобы даже если они не помещаются, но, ...
0
голосов
0
ответов
22
показа
Wordpress - Плагин WP Fastest Cache и swiper слайдер не отображаются стрелки навигации
Если кеширование плагина WP Fastest Cache отключить, то у слайдера стрелки отображаются. Если включить, то вместо стрелок появляется текст 'next' и 'prev'. Может кто подсказать как это исправить?